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.
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
This package helps to write Bootstrap 3 code snippets faster using auto-completion. More to that, it also supports Glyphicons and Fontawesome.
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.
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.
This package automatically adds closing tags when you complete the opening tag in your editor.
Provides Shorthand snippets for CSS, SCSS, Sass, and Less.
Allows you to quickly access the caniuse.com support tables in the editor itself.
Allows you to Validate your HTML and CSS files using W3C validators in the editor itself.
Helps to view the live rendered SVG to the right of the current editor.
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.
Performs conversions between different CSS length units. Can help you in converting font-sizes or other lengths units.
The famous tool-kit for developers to improve HTML & CSS workflow, which helps you in speeding up your code writing.
Open the Terminal (OSX, Linux) or Command Prompt (Windows) in the given directory via context menu or keyboard shortcut.
Linter is a base linter provider for the Hackable Atom Editor.
Lint your Bootstrap HTML on the fly. This package shows all your coding/structural errors created while working with Bootstrap framework.
Lint CSS on the fly. This package alerts you whenever you declare a wrong CSS property or make any typo inside your CSS file.
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.
Mini-map bindings for the find and replace feature similar to Sublime-text editor.
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.
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.
Reveal file in Finder!(like sublime text). This plugin adds a option to reveal current file in the right click context menu.
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.
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.
Assign file extension icons and colors for improved visual grepping in the Editor.
A very useful plugin if you work a lot with CSS. This package automatically adds vendor-prefix in your CSS and SCSS using Autoprefixer.