Atom Text Editor – a completely hack-able editor is a free and open source code editor available for Windows, Mac and Linux. It can be completely modified using Node.js based plugins and community created themes.

If you’re familiar with Sublime-text editor, you’d love Atom Editor. You can modify the Atom Editor to completely resemble sublime text as well.

Below is the list of plugins, I’ve been using for my front-end development purpose.

Atom Auto Indent

This package allows you to auto-indent the code inside your current file. Use the auto-indent:apply command or you also do it from File Menu, go to Packages > Auto Indent > Apply

Bootstrap 3 Support for Atom

This package helps to write Bootstrap 3 code snippets faster using auto-completion. More to that, it also supports Glyphicons and Fontawesome.

Bootstrap 4 Support for Atom

This package is similar to Bootstrap 3 package, it also helps to write Bootstrap 4 code snippets faster using auto-completion. Just write the Bootstrap component tag and hit Tab key and the whole code snippet is appended instantly.

Atom HTML Preview

This package enables live preview for Atom Editor. Makes your coding behave real-time. Write inside the editor and see the live changes on the browser.

Auto Close HTML 

This package automatically adds closing tags when you complete the opening tag in your editor.

CSS Snippets

Provides Shorthand snippets for CSS, SCSS, Sass, and Less.

CanIuse Package

Allows you to quickly access the caniuse.com support tables in the editor itself.

W3C Validation

Allows you to Validate your HTML and CSS files using W3C validators in the editor itself.

SVG Preview

Helps to view the live rendered SVG to the right of the current editor.

Atom CSS Comb

CSScomb is a coding style formatter for CSS (LESS|SASS|SCSS). You can easily write your own configuration to make your style sheets beautiful and consistent or use pre-defined configs like Yandex, Zen or CssComb.

Atom CSS Unit Converter

Performs conversions between different CSS length units. Can help you in converting font-sizes or other lengths units.

Emmet

The famous tool-kit for developers to improve HTML & CSS workflow, which helps you in speeding up your code writing.

Open Terminal Here

Open the Terminal (OSX, Linux) or Command Prompt (Windows) in the given directory via context menu or keyboard shortcut.

Linter

Linter is a base linter provider for the Hackable Atom Editor.

Linter Bootlint

Lint your Bootstrap HTML on the fly. This package shows all your coding/structural errors created while working with Bootstrap framework.

Linter CSS Lint

Lint CSS on the fly. This package alerts you whenever you declare a wrong CSS property or make any typo inside your CSS file.

Linter SCSS Lint

This Linter plugin for Linter provides an interface to SCSS-lint. It will be used with files that have the “SCSS” syntax and it works the same way as above mentioned CSS lint.

Minimap Find And Replace

Mini-map bindings for the find and replace feature similar to Sublime-text editor.

N-panes

Sublime Text-like n-column layout shortcuts. Use shortcuts or choose number of layouts from File Menu itself and divide your editor into n partitions.

Save Workspace

Work with few projects same time this plugin give you the opportunity to change your work-space faster. Save your work-space, all your opened tabs, cursor position, etc. for each task you are working with.

Atom Reveal File In Finder

Reveal file in Finder!(like sublime text). This plugin adds a option to reveal current file in the right click context menu.

Atomic Chrome

This is one of the very powerful features. Download this package and it’s Chrome extension. Once done, you can write inside any website’s textarea using Atom Editor. You can code or even write plain text directly from your editor.

Atom Monokai

If you are a Sublime Text fan, then this theme is for you, this theme package turns the view of editor almost similar to that of Sublime Text. Monokai syntax theme offers few options to choose from, like Atom Dark/light, One Dark/light, Seti UI and other.

File Icons

Assign file extension icons and colors for improved visual grepping in the Editor.

Autoprefixer

 

A very useful plugin if you work a lot with CSS. This package automatically adds vendor-prefix in your CSS and SCSS using Autoprefixer.