Web Development

Top 5 Atom Code Editor Packages


Github’s code editor Atom is becoming increasingly popular. The code editor is lightweight, easy to use and extensible by packages. The number of available packages is also increasing constantly. At the time of writing you can choose from a list of over 6000 packages.

This number makes it difficult to identify which packages are essential for every web developer. In the following you can find a list of the most essential Atom packages for web developers.

Installing Packages

Installing packages in atom is very easy because all available packages can be accessed and installed in the editor’s settings view. Open the settings view by selecting menu item Atom – Preferences:

Within the settings view you can tab Install from the left navigation menu. Searching for a specific package name is possible by using the Search packages input field. The list of results is shown below. Here you can click on a specific package to get more information or hit the button Install to add this package to Atom.

#1 Emmet (by emmetio)

One of the most important Atom add-ons is the Emmet package. More information about Emmet can be found on http://emmet.io. Installing this packages makes it possible to write HTML and CSS code by using abbreviations.

Emmet Abbreviations

By using Emmet abbreviations its possible to write complex HTML structures in short text string. E.g. writing the following text string into the code editor:

#page>div.logo+ul#navigation>li*5>a{Item $}

and afterwards hitting the TAB key will expand to the following HTML structure:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

A full reference of the abbreviation syntax can be found in the Emmet cheatsheet available at: https://docs.emmet.io/cheat-sheet/

#2 Advanced-open-file (by Osmose)

Advanced Open File is a package for helping Atom users to open files and folders easily. It can also create new files and folders if they don’t exist. After having installed the advanced-open-file package you can open the new functionality by using the key combination ALT+CMD+O.

As you can see the pop-up windows consists of two parts: an input field and a tree view. By default the input field contains the path of the project which is opened in Atom. The tree view below shows the project folder and files. Now you can navigate through the projects by typing in another path in the input field or clicking on a subfolder.

You can type in a file name (and use TAB for autocomplete) and hit enter to open that file in the editor. If the entered file name is not existing yet, the file is created and opened in the editor for editing as well.

Clicking on the plus symbol will add this folder to the Atom project structure.

#3 File-Icons (by file-icons)

By default Atom only displays filename in the tree view on the left side of the editor window. Adding file icons based on the file extensions makes it easier to find files in the tree and keep the overview. The File Icons package adds icons for the most common file types:

#4 Pigments (by abe33)

In web development you often have to deal with color codes. The Pigments package is a great help. It scans your file (e.g. CSS file), detects all color codes and displays the color code string with the corresponding background color as you can see in the following screenshot:


This makes it easy to directly see if the correct color code is used.

#5 Minimap (by atom-minimap)

The minimap is a feature which most developers know from the Sublime Text code editor. It gives you a preview of the complete file content on the right side of the code editor window like you can see in the following screenshot:

This helps to quickly get an overview of what’s inside the file. The code area which is shown in the editor at the moment is highlighted with a light grey background color in the minimap. The minimap view can also be used for scrolling. Drag and drop the light grey rectangle to scroll.

Conclusion

Atom is a really powerful code editor. By using plugins the editor functionality can be extended with many more features. This post contains a list of five popular plugins which are independent from the language or framework you’re using. Feel free to browse through the list of Atom plugins to find editor extensions which are a fit for your specific use case as well.

ONLINE COURSE: The Complete JavaScript Course

Check out the great The Complete JavaScript Course: Build a Real-World Project with thousands of students already enrolled:

The Complete JavaScript Course

  • Master JavaScript with the most complete JavaScript course on the market! Includes projects, challenges, final exam, ES6
  • You will go all the way from JavaScript beginner to advanced JavaScript developer.
  • You will gain a deep and true understanding of how JavaScript works behind the scenes.
Go To Course

Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments
    There are currently no comments.

    *