Atom by github: 25 Most Popular Packages

Atom is a popular open-source and cross-platform code editor that is made by GitHub. It is modern, approachable and yes it’s hackable too. Using Atom as a code editor, you can make the most customization that makes coding efficient and you more productive. On top of it, you can do this without the hassle of meddling with the configuration file. Here, I will try to tell you why Atom can be very helpful for you.

Key Features Atom can be very helpful for you.

  • Cross-platform editing: Atom works across operating systems. You can use it on OS X, Windows, or Linux.
  • Built-in package manager: Search for and install new packages or start creating your own—all from within Atom.
  • Smart auto-completion: Atom helps you write code faster with a smart, flexible auto-complete.
  • File system browser: Easily browse and open a single file, a whole project, or multiple projects in one window.
  • Multiple panes: Split your Atom interface into multiple panes to compare and edit code across files.
  • Find and replace: Find, preview, and replace text as you type in a file or across all your projects.

Price: FREE | More Information

Atom packages

In Atom, packages not only plays a vital role but also make it more versatile and powerful. Atom maintains its activities using packages. Atom has more than 5500 open source packages (at the time of writing) and it’s increasing every day. Every package has unique features and functionality. You can also build a package yourself and publish it for others.

Atom packages - cssanimation.io

Atom packages

We can divide the Atom packages into two types, core packages, and community packages. You will get 77 built-in packages (at the time of writing) in version 1.12.9 as core packages. Atom gives you the flexibility to enable or disable any of the core packages. Atom also counts the loading time of every package individually, so that you can manage its loading time. By disabling packages that are not important for you, you can make your Atom personalized and more efficient.

 

How to setup atom package

How to setup atom package - cssanimation.io

How to setup atom package

To set up a package you just go to the settings section and from there select install tab. Here you can search for official Atom packages from the Atom.io library. When you find the right package, just click on install to download and install the package.

Full documentation here  http://flight-manual.atom.io/using-atom/sections/atom-packages/

And an interesting video tutorial by DevTips

Once the packages are installed, it will appear in the Packages tab under settings. If you want to check and edit the default properties of any package click on the settings button under the package.

Now, let’s take a look inside some of the most popular packages in Atom.

 

1. File Icons

File Icons is a popular package of Atom which used for improved visual grepping. It gives you a quick understanding of file in a comfortable way by adding an icon before filename based on their corresponding file type. File icons are customizable and you can change it though the LESS files.

For more details and download link: https://atom.io/packages/file-icons

Atom File Icons - cssanimation.io

Atom File Icons

2. Minimap

The Minimap is one of Atom’s most popular packages. Using Minimap, you can see all of your code in a condensed view for quick navigation. You can set its position on the left or right or turn it off completely. This package is most helpful when you have a file with hundreds of lines of codes in it and need to jump between sections.

For more details and download link: https://atom.io/packages/minimap

Atom Minimap - cssanimation.io

Atom Minimap

3. Bezier Curve Editor Package

Bezier Curve Editor Package lets you edit CSS Bezier curves straight from Atom. You can select from the presets available or you can edit the curve visually giving you full freedom to express your creativity.

For more details and download link: https://atom.io/packages/bezier-curve-editor

Atom Bezier Curve Editor Package - cssanimation.io

Atom Bezier Curve Editor Package

4. Highlight Selected

Highlight Selected is another important atom package, where if you select one keyword or variable, it highlights all of the keywords that are with the same name or variable. If you are a web developer you know how important this is.

For more details and download link: https://atom.io/packages/highlight-selected

Atom Highlight Selected - cssanimation.io

Atom Highlight Selected

5. Autocomplete Plus

Autocomplete does exactly what it says, it gives you auto-complete suggestions as you type your codes. Select the right suggestion from the list and press enter or tab to confirm the selection. However, the default package does not provide many language support. Atom.io suggests that you should install additional language support from different providers from GitHub.

For more details and download link: https://atom.io/packages/autocomplete-plus

Atom Autocomplete Plus -cssanimation.io

Atom Autocomplete Plus

6. Linter

Atom Linter is a collection of linting packages for all major programming languages. You can install your required language specific linter package and can optimize it further by customizing it. There are linter packages available for most common languages like the linter-HTML hint, linter-csshint, linter-jshint, linter-jsonhint, linter-javac, linter-PHP, linter-Perl, linter-clang and much more. You just need to select and install the right linter package for you, that’s all.

For more details and download link: http://atomlinter.github.io/

Atom Linter - cssanimation.io

Atom Linter

7. Auto Close HTML

It automatically adds closing tags to HTML elements. When you finish writing an opening tag, it will add the closing tag inline or in between for block elements.

For more details and download link: https://atom.io/packages/autoclose-html

Atom Auto Close HTML - cssanimation.io

Atom Auto Close HTML

8. CSS Comb

CSS Comb package searches for csscomb.json until it has been found and if it hasn’t plugin takes default CSS-comb config or your custom config. If you have set any custom config then you can just press ctrl+alt+c to format to your style. There are 3 predefined configs available in the package. If you do not like the predefined ones, you can always create your custom config.

For more details and download link: https://atom.io/packages/css-comb

Atom CSS Comb - cssanimation.io

Atom CSS Comb

9. Pigments

Atom Pigments is another package which displays color in project files. It basically scans your source files in your project directories and builds a palette using searched colors. After that, in each open file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per-project level. By default colors in every file will be highlighted but you can also limit the display of colors to the desired file types.

For more details and download link: https://atom.io/packages/pigments

Atom Pigments - cssanimation.io

Atom Pigments

10. Git Plus

Atom is made by GitHub so you can expect a smooth integration of Git in Atom. Git-Plus is a must if you are a Git user. The main motto of this package is that it allows you to work with Git without having to leave atom editor. You can easily make Git commit, push/pull, checkout, diff and other Git command. For this, you have to setup your username email on your git config file to make this functional.

For more details and download link: https://atom.io/packages/git-plus

Atom Git Plus - cssanimation.io

Atom Git Plus

11. JSHint

This specialised linter package will lint JavaScript in files with the .js extension and optionally inside <script> blocks in HTML or PHP files.

For more details and download link: https://atom.io/packages/linter-jshint

Atom JSHint - cssanimation.io

Atom JSHint

12. Atom Alignment

A simple key-binding package for aligning multi-line and multiple selections in Atom. This package is based on the sublime text plugin called sublime_alignment. This is the perfect solution when you need to beautify single or multiple blocks of code.

For more details and download link: https://atom.io/packages/atom-alignment

Atom Alignment - cssanimation.io

Atom Alignment

13. Emmet

Emmet has become an essential tool for web developers, regardless of the text editor they use. Atom also has a dedicated package for it. It allows you to work quickly when you are writing HTML, CSS, SASS/SCSS and LESS syntax. In Atom, emmet provides multi cursor support for most emmet actions, like Expand Abbreviation, Wrap with Abbreviation, Update Tag etc. Interactive actions (Interactive Expand Abbreviation, Wrap with Abbreviation, Update Tag) allows you to preview the result in real-time as you type. It is a must install package for everyone.

For more details and download link: https://atom.io/packages/emmet

Emmet For Atom - cssanimation.io

Emmet For Atom

14. Color Picker

Color Picker is a great package to help you with the quick color selection and changes. It can also change color code between formats. It now supports HEX, HEXA, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors.

For more details and download link: https://atom.io/packages/color-picker

Atom Color Picker

Atom Color Picker

15. Atom Beautify

You want your messy code to look neat, clean and more readable right? atom-beautify is a package that will do this task for you. It provides a great support for many programming languages to beautify their codes like HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and much more.

For more details and download link: https://atom.io/packages/atom-beautify

Before:

Atom Beautify - cssanimation.io

Atom Beautify After

After Applying atom-beautify:

Atom Beautify Before - cssanimation.io

Atom Beautify Before

16. Snippets

Snippets mean a regularly used a chunk of code which you can quickly insert into program files. It lets you quickly write a portion of code from suggestions. Atom has added snippets and auto complete-snippets packages as its core packages. A large number of code snippets are available in Atom for different languages like CSS-snippets, leave-snippets, javascript-snippets etc. You can also customize and add your own snippets.

For more details and download link: https://atom.io/packages/snippets

Atom Snippets - cssanimation.io

Atom Snippets

17. Open Recent

As mentioned earlier Atom maintains all activities using packages Open Recent package is one its best example. Using this you can check your recent files like the Sublime text editor. Atom keeps a simple folder based project tree for your files. Making it really easy to jump to recently used files and folders.

For more details and download link: https://atom.io/packages/open-recent

Atom Open Recent

Atom Open Recent

18. Todo Show

TODO Show package can search for all TODO, FIXME, CHANGED, XXX, IDEA, HACK, NOTE, REVIEW, NB, BUG, QUESTION, COMBAK, TEMP comments in your project and shows them in a formatted list in Atom window. You can also narrow down your search to show results only from workspace, project, open files or active files.

For more details and download link: https://atom.io/packages/todo-show

Atom ToDo Show - cssanimation.io

Atom ToDo Show

19. Simple Drag Drop Text

You can choose to have or not have the feature of drag-and-drop text by using Simple-drag-drop-text package. While many other text editors have this feature by default, you can choose to have it on requirement basis. This further helps Atom to become a lean text editor for you.

For more details and download link: https://atom.io/packages/simple-drag-drop-text

Atom Simple Drag Drop Text - cssanimation.io

Atom Simple Drag Drop Text

20. Merge Conflicts

Atom is developed by GitHub and it sports an excellent support working with Git. You can commit your files straight from Atom. However, if you face conflicts, then Merge Conflicts package can provide you additional options to resolve you merge conflicts. It automatically detects merge conflict markers and provides you additional options to resolve them straight from Atom.

For more details and download link: https://atom.io/packages/merge-conflicts

Atom Merge Conflicts - cssanimation.io

Atom Merge Conflicts

21. CSS Snippets

CSS Snippets is a specialized package that allows shorthand snippets for CSS, SCSS, Sass, and Less.

For more details and download link: https://atom.io/packages/css-snippets

Atom CSS Snippets - cssanimation.io

Atom CSS Snippets

22. Atom Bootstrap 3

Just like the CSS Snippets, Atom Bootstrap 3 snippet is a specialized package that allows shorthand snippets for you guessed it Bootstrap 3.

For more details and download link: https://atom.io/packages/bootstrap3-snippets

A similar package for Bootstrap 4: https://atom.io/packages/bootstrap4-snippets

Atom Bootstrap - cssanimation.io

Atom Bootstrap

23. LiveStyle Atom – Real-Time Editing

This is an Atom plugin for Emmet LiveStyle. It is a real-time bi-directional edit tool for CSS, LESS and SCSS. LiveStyle provides proper source-to-result mappings, variable and mixin scopes, error recovery and partial compilation directly as you code.

For more details and download link: https://atom.io/packages/livestyle-atom

Atom LiveStyle Atom – Real-Time Editing - cssanimation.io

Atom LiveStyle Atom – Real-Time Editing

24. Autocomplete WordPress Hooks

As the name suggests this package provides autocomplete support for WordPress actions and filters in the Atom editor.

For more details and download link: https://atom.io/packages/autocomplete-wordpress-hooks

Atom Autocomplete WordPress Hooks - cssanimation.io

Atom Autocomplete WordPress Hooks

25. Bonus Packages: How to synchronize your Atom settings

If you want to use your Atom settings also on another computer or in another instance, you can sync your settings using a gist. To do this, you must install the Sync Settings for Atom package and follow the instructions under the package settings. You will need a GitHub account to save your settings.

For more details and download link: https://atom.io/packages/sync-settings

How to synchronize your Atom settings - cssanimation.io

Bonus Packages: How to synchronize your Atom settings

I have listed down the above Atom packages as per my experience with them, popularity and usefulness. It is totally possible that I have missed a few good ones. Also, I have ordered them as per their importance in my humble opinion. Feel free to defer. Finally, if you have any suggestion or like to add something, please feel free to write them in the comments section.