12+ must have Atom packages to work in JavaScript

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.

Why atom is a better text editor?

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.

atom1

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?

What is an packages ? Why do we need packages ?

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.

How to add a package in atom?

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.

atom install entension

There are almost 7000 packages available in atom, most probably you will find the one you are looking for.

JavaScript packages for atom

VoidCanvas has made your task easier as we are listing out the best 15 javascript plugins for atom that will definitely improve your productivity.

JavaScript-Snippets

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

  • Time saving process.
  • Reduces chances of syntax error.

ES6-Snippet

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.

es6 snippet ato js extension

Features

  • Can import an entire module’s content or even a part of it.
  • Can import single or multiple member of a module.
  • Export class or sub-class.
  • Generating getter or setter property and many more.

Emmet

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

  • Expand abbreviations by Tab key.
  • Multiple cursor support: most Emmet actions like Expand Abbreviation, Wrap with Abbreviation, Update Tag can run in multi-cursor mode.
  • Interactive actions (Interactive Expand Abbreviation, Wrap With Abbreviation, Update Tag) allows you to preview result real-time as you type.
  • Better tabstops in generated content: when abbreviation expanded, hit Tab key to quickly traverse between important code points.
  • Emmet v1.1 core.

Linter-JS-Standard

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

  • Support standard, semistandard and happiness styles.
  • Support ignore glob patterns in package.json.
  • Support custom parsers in package.json.
  • Support global variables in package.json (supported by standard and semistandard).
  • Support fenced code lint in markdown files.

Git-Blame

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

  • Easy to keep track about the person who did the change in the git repository.
  • Timing records can also be found.

Git-Plus

In short, the Git-Plus plugin lets you do git actions without changing the terminal.

Features

  • Make commits and other git things without the terminal.
  • Notifications will appear in a console output above the status bar. This view can be toggled by clicking the ‘git+’ icon in the bottom right of the status bar.
  • Auto fetch, keeps your local repo bang up to date by automatically fetching from all remotes in the background every minute by default.

Script

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.

script atom js extension

Features

  • Can run a particular block of code.
  • Execution of code directly and within atom.
  • Makes testing easier.

Ask Stack

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

  • Insert or copy code samples with the click of a button.
  • Easily browse between questions and answers.
  • Sort by relevance or votes.
  • Access to the number of votes, tags, accepted answer and more.

Atom-Beautify

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

  • Gives code proper structure & increase readability.

Highlight Selected

A very simple yet useful atom package. Highlight selected, as the name suggest this plugin highlights the current word selected when double clicking.

Features

  • Makes a particular word visible easily.
  • Easy to search.

Autocomplete-Paths

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

  • Support for JavaScript, CoffeeScript, TypeScript, PHP, SASS, LESS, Stylus, CSS, C, C++, Lua, Ruby and Python.
  • Very efficient thanks to caching and incremental cache rebuilds. (incremental builds are disabled for Windows. Please use the Rebuild Cache command.).
  • Easily extendable.

TODO-Show

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.

TODO-show

Features

  • Finds all the TODOs, FIXMEs, CHANGEDs, etc. in your project.
  • Provides nice, readable overview list.
  • Five different scopes (workspace, Project, Open file, Active file, Custom) are available to narrow down your search for todos.

Docblockr

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

  • Makes documentation easier & faster.
  • Provides intelligent documentation.

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

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

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.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

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