Sun Oct 08 2017
Paul Shan
For productive, efficient & faster coding we all need a comfortable as well as advanced text editor. Atom, a text editor developed by github, keeping every programmers capacity in mind. From beginner level programmers to super nerds atom is the perfect one for all. Approachable, modern yet hackable to the core & one can customize it according to the need, everything a nerd may ask for in a text editor. It’s long listed advanced features doesn’t make it hard for beginners to work on it, they can easily use this in a productive way without even touch any of the config file.
There are some major reasons why programmer loves working with atom. It comes with some useful and beneficial features improving the way of coding. Here are 6 major reason i found attractive in atom.
Easy to use, cross platform text editor: Windows, Linux or OS X, whatever you might be using, atom is for all.
Built-in package manager: Not only you can search & install the required one but also can create of your own.
Smarter auto completion: Atom helps you write faster code by providing auto completion facility.
File systme browser: In a single window you can browse & open a file, a whole project or even multiple project.
Multi panes: The atom interface can be split in multiple panes.
Simple search: Atom has focused on simplicity a lot. You can easily search, preview or even replace texts in few seconds.
Though atom has a long listed features of it but we aren’t going to discuss about all of them. Our discussion will simply stick to the plugins or packages area. In this article we will be focusing on the need and uses of packages in atom while coding in javascript.
Before jumping there lets find out what is a package? Why do we need them?
A package (or plugin) is a small external software program (a piece of code) consisting its own features & uses that can be installed to a valid software or program to modify and enhance the ability or functionality of the software or program.
Adding some particular package in atom text editor will help increase the working ability, easiness and efficiency of the editor. Both downloading and installing of a particular package in atom gets done in just few clicks and the best part is one can even create their own package according to the need.
No headache, just few clicks and your job is done. Below you will find step by step process of downloading & installing an package in atom.
Step 1: Launch the atom. Press ctrl
+,
for opening up the settings view.
Step 2: Click on install
.
Step 3: Search the required plugin.
Step 4: Install it. Once the plugin/package has been installed you can see it under the ‘packages’ tab.
There are almost 7000 packages available in atom, most probably you will find the one you are looking for.
VoidCanvas has made your task easier as we are listing out the best 15 javascript plugins for atom that will definitely improve your productivity.
Snippet is a programming term that suggests a small region of re-usable source code, machine code or text.
Snippet makes your coding faster & easier as you don’t have to write to whole syntax again and again. JavaScript-Snippets is the best one for JS & NodeJs in atom.
Features
The most recent javascript code snippet having all the recently added functionalities, ES6-Snippet. Using this plugin and the above one will give amazing comfort while coding.
Features
Emmet is the most popular HTML & CSS code snippet among front end developers. You can even easily extend Emmet with new actions and filters or customize existing ones. If you are conscious about your time, emmet is must.
Features
Linter plugin for JavaScript Standard Style. This plugin for Linter provides an interface for error/warning messages from standard, as well as variations of standard such as semistandard and happiness.
Remember, you must install linter package to use Linter-JS-Standard.
Features
standard
, semistandard
and happiness
styles.Toggle git-blame annotations in the gutter of atom editor. This package helps you to keep a track of the changes or modifications done by your group members, who-when did the modification etc. In order to toggle the git-blame annotations press ctrl + b
.
Features
In short, the Git-Plus plugin lets you do git actions without changing the terminal.
Features
Script allows you to run & test a particular block of code. To check if some lines are working properly we don’t have to run the whole code every time.
Features
Switching between editor and browser again and again is surely irritating. Specially beginners need to search random stuffs every now and then while coding. Ask Stack is not only for JS, but very useful for any developing task in atom as you can quickly get answers and code samples from Stack Overflow directly in Atom editor.
So if you are a novice programmer can try this one comfortable learning & coding.
Features
Writing your code in a proper structure is very important, it increases readability and makes it easier to understand the code for you and others. Atom-Beautify makes the task easier for you.
Features
A very simple yet useful atom package. Highlight selected, as the name suggest this plugin highlights the current word selected when double clicking.
Features
Remembering or copy pasting the whole path is not a comfortable practice of coding. Autocomplete-Paths will automatically suggest the path name you are looking for.
Features
When it is about memorizing something, the lesser the better. It happens a lot that there are some unfinished task we are keeping for upcoming days, TODO-Show is the best atom package for maintaining better task doing.
This package helps you revealing the comments having keywords like TODO
, CHANGED
, FIXME
. You can even add your own keywords.
Features
Documentation is an integral part of coding, specially when you are working in a group a proper documentation is must. Docblockr is a great documenting plugin for atom.
Features
If you have found any other helpful JS atom package which has not been included in this list, please let us know in the comment section.
SHARE THIS ARTICLE
Thu Mar 10 2016
OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.Sat Mar 01 2014
This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading