Webprogramo

How to setup Atom for WordPress development

First, before learning about how to Setup Atom for WordPress development, I think it is nice to write the Atom.io definition of its own software:

Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. — atom.io

Atom text editor can be fully customizable through Package installations and setup; these are extra functionalities developed by contributors around the world. In this massive packages database, we can find extensions for Code highlight, auto-completing actions, linting, beautifier, etc. Here I am going to tell you which of those packages are useful for PHP and WordPress development.

If you want to install any of them, go to the Package site doing click on the title, and each one of them will tell you how to install and properly setup.

WordPress API

With this package you will have a list of code snippets like «post»; to create a small HTML template with a single post (after the loop), there is also, «theloop»; to create a basic WordPress loop code, so you can combine both to quickly create a blank post theme for WordPress. There are also support for «shortcode», «widget», «sidebar», and much more.

WordPress Suite

With this package, you will have several functionalities, like support for WP-CLI, Atom Watcher on debug.log  in WordPress, notifications, and smart context menu with tons of extra options. WordPress suite is an excellent extension for WordPress developers.

WordPress Dictionary

Package with a large list of snippets of all WordPress functions, filter hooks, and action hooks.

In addition to these Atom packages, there are others you shold have like:

Minimap

This package will create a full representation of your code on the right side of your screen; it is convenient when editing files with an immense number of code lines, so, you can go up and down easy and quick.

Todo-show

With this Atom extension you can use the command palette to display a representation of all TODO, FIXME, CHANGED, XXX, IDEA, HACK, NOTE, REVIEW, NB, BUG, QUESTION, COMBAK, TEMP on your current code, open files or full project.

Linter

Linter is an MUST-USE package for every developer, with this, you can considerably reduce your errors while developing because this tool will highlight your code and coding standards errors. This is the global framework for specific linter packages as linter-csslint (CSS files error detection), linter-jscs (JavaScript error detection), linter-jsonlint (For JSON code), linter-phpcs (This is for PHP, specifically WordPress using CodeSniffer).

WordPress-Coding-Standards

Here is the second MUST-USE package and it is because this package will install a full WordPress development standards extension. PHP_CodeSniffer;  a set of two PHP scripts, phpcs a script that tokenises PHP, JavaScript and CSS files to detect violations of a defined coding standard and phpcbf to automatically correct coding standards (With a beautifier), and this package also register WordPress standards in the PHP_CodeSniffer configuration. So, with this package, you can fully develop for WordPress like a PRO.

And finally,

Atom-beautify

With this extension you can automatically beautify your code on Atom, some of the supported languages are HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more.

Particularly you can beautify your code using WordPress coding standards, after you have installed the package, go to package settings in Atom.

Then search atom-beautify, open it, and scroll down to Settings – PHP, then set Default Beautifier to PHPCBF and in the last option set PHPCBF Standard to the coding standards you selected when you installed WordPress Coding Standards package.

Here is an example on my Laptop.

When you have finished doing this configuration, you can execute the Ctrl + alt + b combination for automatically apply the WordPress PHP Coding Standards to your code!

 

I hope you enjoyed this how to setup Atom for WordPress development article. Any questions or considerations are very appreciated.