Must have Atom Text Editor packages for Web Developers

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.

A must-have Git commands handbook

If you haven’t heard of the term Git (Git Version Control System), you can skip the story and google the term to know more about it.

And if you are aware of it and looking for a handy document, where you could refer all the commands in a single glance and learn more, checkout the website by Roger Dudler, which explores all the important Git commands in a very simple, plain English and in an appealing way.

The website: http://rogerdudler.github.io/git-guide/

And if you wish to download the same in PDF format, you can download it from the same website as well or from the below shared link.

Download: Git CheatSheet PDF

The English AtoZ Pangram in action

Whenever we check for fonts or any specific font on any system or website for the design purpose, it is shown using the most common english pangram listing all the 26 alphabets of English.

The quick brown fox jumps over the lazy dog

And I found it in a real video, shared on Twitter.

Feature Image credits: Adriana Chionetti

Finally, I start writing again..

And the day is here,  when I start writing on my blog as well..

What I’m gonna write is not yet planned,  but surely something will be written

The best part is, the blog is launched as a demo test for WordCamp Pune,  happening on January 14, 2017 and that too at ThoughtWorks office.

Honestly ThoughtWorks do have an excellent working atmosphere, it kind of feels like open office environment. They have these dummy displays of a Bus,  a Street-hawker stall, an Auto-rickshaw and more. Everywhere there is something to eat, relax upon and No Cubicles anywhere..

And on the WordCamp side, there are great people like Aditya,  Saurabh,  Rahul,  Premanshu,  Amit from Pune city, while Isabelle is here from France/New York, who will be speaking at the main WordCamp event tomorrow. There are many more people, whom i can’t remember and can’t even list their name here..

Let’s see how this blog and things around me go..

Cya at WordCamp Pune tomorrow…