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
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.
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
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
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
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
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
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 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/
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
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 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
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
For more details and download link: https://atom.io/packages/linter-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
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
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
15. Atom Beautify
For more details and download link: https://atom.io/packages/atom-beautify
After Applying atom-beautify:
For more details and download link: https://atom.io/packages/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
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
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
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
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
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
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
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
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
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.