The primary things you want out of your text editor are documentation lookup, autocompletion, code formatting, and code linting (more on that in a bit). Atom gives you some of these features by default, but installing a few plug-ins will make it even better.

Open Atom and reveal its Settings screen. On a Mac, this is done by choosing Atom → Preferences... or using the keyboard shortcut Command-, (that is, the Command key plus the comma). On Windows, you can access it via File → Settings or using the keyboard shortcut Ctrl-,.

On the lefthand side of the Settings screen, click + Install (Figure 1.3).

Here, you can search for plug-in packages by name. Begin by searching for “emmet.”

Writing a lot of HTML can be very tedious and is error-prone. The emmet plug-in (Figure 1.4) lets you write well-formatted HTML using a convenient shorthand. Click the Install button to get emmet.

Next, search for “atom-beautify.” The atom-beautify plug-in (Figure 1.5) helps with the indentation of your code, which helps with readability. Again, click Install to get this plug-in.

Search for and install the autocomplete-paths plug-in (Figure 1.6). Very often, your code will need to refer to other files and folders in your project. This plug-in helps by offering filenames in an autocomplete menu as you type.

Your next plug-in to install is the api-docs package (Figure 1.7), which lets you look up documentation based on keyword. It displays the documentation in a separate tab in the editor.

Next, search for and install the linter package (Figure 1.8). A linter is a program that checks the syntax and style of your code. Make sure you find and install the package that is just named “linter.” This is a base linter that works with language-specific plug-ins. You will need it in order to use the other linter plug-ins below.

There are three companions to linter that you will want to install to check your CSS, HTML, and JavaScript code. Start with linter-csslint (Figure 1.9), which ensures that your CSS is syntactically correct and also offers suggestions about writing performant CSS.

The next linter companion plug-in to install is linter-htmlhint (Figure 1.10), which confirms that your HTML is well formed. It will warn you about mismatched HTML tags.

The last linter companion plug-in to install is linter-eslint (Figure 1.11). This plug-in checks the syntax of your JavaScript and can be configured to check the style and formatting of your code (for example, how many spaces lines are indented or how many blank lines come before and after comments).

Chrome and Atom are now ready for front-end development. There are just a few more steps to completing your coding environment: accessing documentation, learning command-line basics, and downloading two final tools.