Best Useful Atom Packages for Web Developers

Atom already comes preinstalled with a few built-in packages, including Git integration along with tree-view. But if you are a developer then you will definitely require a few more packages to use with this editor. Mentioned below are the 10 best atom packages to be used by developers. Have a look.

Color Picker Package

This is a simple package which is build to allow you to pick colors. You need to just press the right click and choose color picker. You can also choose it by pressing Ctrl+Shift+C keys. But remember that to make it work, you need to put your cursor on files like CSS/SASS/LESS containing color formats like HEX, HEXa, RGB, RGBa or HSL and HSLa.

Minimap

It is the package which provides you a preview on the right side window. This feature comes in handy when you have to scroll through your source codes quickly if they are longer than the window height. You can switch the preview to the left or turn on/off code highlights, and more.

File Icons

This is a really good package which helps to add icons to a filename which is based on the corresponding file type. It adds visual improvements to your file on opening it on tab or tree view. You can also customize the file icons. Either you can add your icon and or change its color, making it one of the best atom packages.

GIT Plus

Git Plus is one of the best atom packages of the year. Through this, you can work on Git without having to leave the Atom editor. This provides you the option to make a Git commit, checkout or the push or pull command. All you need to do is just setup your user.name and user.email on your git configuration file. Press CMD + SHIFT + H if you want to open the palette. You can also choose Package > Git Plus.

Remote Edit

This is one of the useful atom packages for developers through which you can see and edit your remote files. You can do it without even leaving the editor. To begin, you have to create a new host. You can then add it by going to menu Packages > Remote Edit > Add New Host and inserting your login information.

CSS Comb

This is a best atom plugin which you can use to consistently make your stylesheet code formatted. You can also make it look neat, clear and beautiful. First you need to install this package. Thereafter, you can sort the things accordingly by pressing CTRL + ALT + C. You can also access it from the context menu by going through Packages > CSS comb > Comb.

JavaScript Snippets

This is one of the best atom add-ons which allow you to quickly edit the JS source code. It consists of defined abbreviation, so you don’t need to write the code word for word. You just have to type the initials to complete the code. For example if you type cl, then the code will automatically become console.log. Although it is very similar to Emmet, but it runs on JavaScript code which makes it different.

Atom Linter

This is one of the best atom packages for developers as it provides top level API for linters. This package has linters available for JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, and Python. To make it work, you have to install the specific linter for the language which you prefer. So, if you use JavaScript, then you can choose JSHint for linter. Just install it by running $ apm install linter-jshint on Terminal and you are ready to go.

Beautify

This package is created to make messy codes more neat and clear. It has great support for Most of the programming languages, which includes languages such as HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, typescript as well as SQL. To open this package, you need to install the package, press right-click and choose ‘Beautify editor contents. The package will start running immediately thereafter.

Emmet

Whatever type of text editor environment you may have, emmet is the plugin which you must definitely install. Emmet has some awesome features including expanding abbreviations and wrapping text with abbreviations. Due to these, you can work quickly while writing syntaxes like HTML, CSS, and LESS. For example if you type p>a.mylink in HTML and then press TAB key, you’ll get a complete HTML tag <p><a href class=”mylink”></a></p>. This makes it one of the best atom packages for developers.