Atom. Useful packages for PHP developers

8 min readSep 27, 2017

In the previous article I told you how to install Atom text editor and gave you a list of packages that I use every day.

Here is the list again:

Let’s see each package from this list in detail.

Sync-settings

In my own opinion it is the main package. This package is allow you to synchronize your Atom and packages settings. For settings synchronization you need to have GitHub account.

GitHub gist settings

Follow to the link for new token creation. After authorization fill token description field, then select Gist-Create gist in the select scopes:

Click Generate token button and copy generated token. It will be useful later.

Now we will create GitHub Gist, where our settings will be stored. Go to the Gist section. At the first time you need to enter next information:

Gist Description field — Atom settings
File name field — Atom-sync.txt
In text field — gist token=[your token] and gist id=[here will be your gist id]

Then click Create secret gist or Create public gist. We will create a personal gist. Now look on the page address, where you have been redirected. Here will be your gist id after your login name:

Now edit existing file and put gist id into it.

We created this file only to store gist token and gist id.

Atom settings

Go to the Settings View in the “Packages” tab, find sync-settings package and press Settings button:

Fill your gist token and gist id:

That’s all. In the future you always will be use this gist token and gist id.

Back up and restore settings

Open console with Ctrl + Shift + P and start typing sync and you can see all sync-settings commands. We need Sync Settings: Backup now.

Or on the any other computer install sync-settings, fill your gist token and gist id and use Sync Settings: Restore command in console.

And now reinstall Atom with all your favorite settings is very simple. Very useful.

Minimap

This package just add minimap to text editor (just like in Sublime Text). It is allow to scrolls the file more convenient way.

Platformio IDE terminal

If you want to use terminal from text editor this package for you. Press Ctrl+` to open terminal.

File Icons

It’s just about visualization. I like it very much and this package help me to recognize file extension faster. But after all the main reason is that it’s has a very nice view.

Emmet

Emmet expands abbreviations by Tab key for HTML, CSS, Sass/SCSS and LESS syntaxes. How to expand abbreviations with Tab key for other syntaxes you can see here https://atom.io/packages/emmet.

Git Plus

Make commits and other git things without terminal. If you want use this package you need to install git and configure it (at least user.email and user.name).

Press Ctrl + Shift + P and typing Git Plus to see all commands. For more information go to https://atom.io/packages/git-plus.

Goto Definition

Just install and use it: right click and Goto Defenition

or select the method and press Ctrl + Alt + Enter.

In addition it can be use with hyperclicMeta + Alt + Click (because of hyperlink)k (Ctrl + mouse click)

Also, as you can see, it show you method information on hover.

You can use performance mode. Performance mode is 10x faster then normal model. Do following steps for it:

Install ripgrep https://github.com/BurntSushi/ripgrep#installation.
In package settings turn on Performance Mode.
Enjoy it!

In performance mode, if you want ignore some files, you can create a file called .ignore in the root of the project, it working like .gitignore.

Autoclose HTML

Will automatically add closing tags when you complete the opening tag.

Atom Beautify

If you need to beautify your code you are on the right way! This package automatically beautify your html or css or javaScript code, but you must use php-cs-fixer to beautify PHP code.

First of all download php-cs-fixer:

$ wget http://cs.sensiolabs.org/download/php-cs-fixer-v2.phar -O php-cs-fixer

or with curl:

$ curl -L http://cs.sensiolabs.org/download/php-cs-fixer-v2.phar -o php-cs-fixer

Then make it executable and move it to /usr/local/bin/ (you need have root privileges for it):

$ sudo chmod a+x php-cs-fixer
$ sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer

Now go to the package settings and find Executables section.

Here is fill path to php-sc-fixer

Restart Atom and that’s it!

Now right click on the file and choose Beautify editor content.

Docblockr

This is a package for Atom which is designed to make writing documentation faster and easier. Pressing Enter or Tab after /** will yield a new line and will close the comment.

Atom Autocomplete PHP

Provides autocompletion for the PHP language for projects that use Composer for dependency management. Add path to Composer in package settings.

Now everything works perfectly.

Advanced Open File

This is one of the most useful package. This package help Atom users open files and folders easily. It can also create new files and folders if they don’t exist.

Press Ctrl + Alt + O to open the file list to the directory of the current file. If you edit the path the file list will automatically show matching files and directories. Press Tab to autocomplete the path.

All keybindings you can see here https://atom.io/packages/advanced-open-file.

Script

It’s may be needed run some scripts directly in text editor. This package can help you with it. There is nothing complicated with this package, so you can find all information at https://atom.io/packages/script.

Linter

Linter is a base linter provider for the hackable Atom Editor. Additionally, you need to install a specific linter for your language. We will use linter-php (see below).

Linter PHP

This package will lint PHP files and embedded PHP within HTML files in Atom through php -l. Once the package is installed you may need to specify the path to the php executable if Atom is not able to find it automatically. So go to the package settings and do it.

Linter UI default

Some UI that show errors, warnings or another additional info.

PHP Debug

This package allow you debug PHP code using the Xdebug PHP Extension. So download and install Xdebug. Here is Xdebug settings that I use:

xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=false

If you set remote_autostart to true PHP will connect to your editor for every script it executes. It’s not what I need. So I install Xdebug helper extension for browser (for Mozilla Firefox or for Google Chrome)

Now you can enable/disable Xdebug from your browser. It’s very useful.

Add this to your config file (config.cson in Edit/File — Config)

"php-debug":
  {
    ServerPort: 9000
    ServerAddress: 127.0.0.1
  }

Now toggle debugging and set breakpoint. Go to the browser, turn on XDebug with Xdebug extension, load/reload page and here we go.

In bottom left corner we can see Toggle Debugging button (or you can use Ctrl + Alt + D instead).

Also here is buttons for manage debugging process (such as Continue, Stop etc.), Breakpoints (contains list of all your breakpoints), Watchpoints (enter here variable which value you want to watch) — that very useful, because main Context block can contain a lot of values. Context consist of Local and Superglobal (such as superglobal array $_POST, $_GET etc.) variables.

I think it’s much better than debugging with var_dump.

Finish line

Hyperlink package (which can be used in goto-defenition package) is now a bundled version of the code in atom-ide-ui. The last package use diagnostics that can replace linter. If you use both package (atom-ide-ui and linter) Atom will warn you and offer you choose one of this packages for using.

Also if you use hyperlink (or atom-ide-ui) use Ctrl + Alt + Click for multi cursor (instead of Ctrl + Click). In this case Atom warn you as well.

Thank you for the reading!

P.S.

Of course Atom doesn’t replace IDE (PHPStorm for example), but it will be faster and can be useful for some purposes. See video where Jeffrey Way explain why he is use both PHPStorm and Sublime Text. Enjoy!