Detailed Guide to Writing JavaScript in Atom


Atom is one of the most well-known source code editors for JavaScript out there. It is free of cost, flexible, customizable, and is entirely built using HTML, CSS, JavaScript, and Node.js integration. 

As a beginner JS developer myself, I find Atom easy to understand, navigate and use. It allows you to write code efficiently. Furthermore, the most significant advantage is that its core is hackable. So if you want to add any features or functionalities, all you need to do is add another package.

Before we get started, if you are looking to learn more about JavaScript or other topics, you should really check out SkillShare, you should really check out SkillShare. Skillshare is an online learning platform with courses on pretty much anything you want to learn. To learn more about Skillshare and its vast library of courses and get 30% off, click the link below:

SkillShare – Online Learning Platform

If you are looking to learn how to use arrays to their fullest potential in JavaScript, check out our Complete Guide to Arrays in JavaScript here. It will teach you everything you need to know on creating, using, and manipulating arrays efficiently in JavaScript.

Now, let’s get started with the tutorial!

Is Atom Good For Writing JavaScript?

The quick answer is yes.

Atom has features such as auto-completion, fuzzy finder, and many others make writing code an easy job. These efficiency features are combined with the extensibility of the Atom.io platform make Atom a really compelling code editor option for JavaScript.

How To Setup Atom For Writing JavaScript?

Before you begin to write and run a JavaScript program or script in Atom, you need two Atom packages:

  • Node.js atom package
  • the Script package on Atom

Installing Node.js

Node.js download page
Node.js download page

Install Node.js on your system. This will enable you to write JavaScript code in your editor by providing access to JS commands and functionalities. Without it, you wouldn’t be able to write a JS program. You can download Node.js from the website nodejs.org.

Node.js installer for MacOS
Node.js installer for MacOS

Once you have downloaded the Node.js installer, double-click it to install Node.js onto your computer.

Besides this, you need a series of packages and plugins that enhance the process of writing JS code and make it an efficient process. Following is the list of packages you need to install for writing JavaScript programs.

Best Atom Packages To Write JavaScript In Atom

  PackagePackage Description Link To Package
  Emmetallows you to create custom code
snippets for any language, including JS.
link
  JavaScript – SnippetsThis provides the most reused JS code
blocks that help you avoid writing the same
code again and again.
link
Linter – JS – StandardThis plugin adds an interface that can show
error/warning messages in all JS styles:
standard, semistandard, and happiness.
link
Atom TernJSThe plugin enhances your code writing experience
by providing JavaScript intelligence and support for:
ES5, ES6, ES7, ES8, and many more.
link
Ask StackSwitching between your browser and editor while coding
is an annoying process since it breaks your flow. This provides
an interface where you can get your answers from
Stack Overflow without leaving the editor.
link
DocBlockrWhile documenting a project, this plugin comes in handy
since it helps you fasten that process.
link
Atom BeautifyThis plugin increases the code readability in your JS program
by helping you add structure to your code.
link
  Autocomplete – PathsAs the name suggests, this gives you suggestions for the paths
that you might be looking for and lets you select from them instead
of manually writing the complete path. 
link
GIT ProjectsThis allows you to open your Git projects with quick keyboard shortcuts.link
Git PlusThis package allows you to run all the Git commands within Atom itself. Conventionally, you’ll need to switch between Git and the editor to do so.
Not anymore!
link
Git BlameThe plugin adds support for projects that multiple people work
on at the same time. It notifies the changes or modifications made
by which member, where, and when. 
link
ReactFor those who work on React JS, this plugin provides support
while coding using React JS. It has auto-complete,
snippets, necessary formatting, and much more.
link
ScriptThis package is perhaps the most crucial package that
allows you to run JavaScript programs within Atom itself. 
link
Best Atom Packages to Write JavaScript in Atom.io

How to Install Packages in Atom

To install any Atom package on Windows, all you need to do is go to File -> Settings -> Install

If you are on a Mac, to find the atom install packages screen, do the following:

Accessing Preferences in Atom
Accessing Preferences in Atom
  1. in the Main Menu, go to Atom -> Preferences.
Atom.io install section of preferences on MacOS
Atom.io install section of preferences on MacOS
  1. Click on the “Install” tab on the left as shown in the screenshot above to bring up the Install Packages screen
Searching for Emmet package in Atom
Searching for Emmet package in Atom
  1. In the “Install Packages” section, click in the “Search packages” text box and type in the name of the package you want to install as shown in the screenshot above.
Click install to install package in Atom
Click install to install package in Atom
  1. Find the package you want and click the “Install” button as shown above.
Emmet atom package installed in Atom
Emmet atom package installed in Atom

5. Once the package is installed, it should look something like the screenshot above.

If you are wondering which JavaScript frameworks you need to learn, you have to read our complete guide to the key JavaScript frameworks you must learn here.

Can You Run JavaScript In Atom?

Yes, we can run JavaScript inside the Atom editor itself. All you need is to download and install the Script Package in Atom. 

Conventionally, to run a JS program, you’ll need to go to the Command-Line and then type in commands, file name, and path to run the JS program. However, with Script, you will be able to run the program on JavaScript itself. 

To install the Script package in Atom, do the following:

The install package screen in Atom.io for MacOS
The install package screen in Atom.io for MacOS
  1. Go to File -> Settings -> Install on Windows or Atom -> Preferences -> Install on MacOS
searching for the script package in Atom
searching for the script package in Atom
  1. In the Install Packages window, type ‘Script’
Click 'Install' to start installing the Script package in Atom
Click ‘Install’ to start installing the Script package in Atom
  1. You should see the Script package as shown in the screenshot above. Click the ‘Install’ button to install the package in Atom
Script package installed in Atom.io
Script package installed in Atom.io

Wait for a few seconds, and your package will be downloaded and installed. 

How To Run JavaScript In Atom

A simple JavaScript file in Atom
A simple JavaScript file in Atom
  1. Open your JavaScript file in Atom
  2. Make any changes you need and then save the file
the 'Run Script' option in the Script package for Atom.io
the ‘Run Script’ option in the Script package for Atom.io
  1. To run this JS file, go to the menu bar, click Packages -> Script -> Run Script as shown in the screenshot above. 
Script Output in Atom.io using Script package
Script Output in Atom.io using Script package
  1. Wait for a few seconds, and you’ll see the output at the bottom of the Atom window as shown in the screenshot above.

Voila! You’ve just written and run a JavaScript program inside Atom.

I hope this tutorial was helpful to you. Good luck!

Want More Tips and Tricks? Subscribe to our Newsletter!

If you haven’t already subscribed, please subscribe to The Productive Engineer newsletter. It is filled with tips and tricks on how to get the most out of the productivity apps you use every day. We hate spam as much as you do and promise only to send you stuff we think will help you get things done.

Newsletter

Subscribe to our newsletter and stay updated.

Check Out Our YouTube Channel!

How to Use the Outline Tool in Google Docs

We have a YouTube channel now and we are working hard to fill it with tips, tricks, how-tos, and tutorials. Click the link below to check it out!

link to our YouTube page

Do you use the same password for multiple sites? Do you have trouble remembering all your passwords? You should try 1Password! 1Password is secure and allows you to log in to sites and fill forms securely with a single click. I use 1Password for all my passwords and it really makes managing all my passwords simple.

For more information on 1Password and to get a 30-day free trial, go to 1Password at the link below:

1Password – The world’s most-loved password manager

Check out our Resources Page

Check out our resources page for the products and services we use every day to get things done or make our lives a little easier at the link below:

Link to the resources page

Looking to Get Started Blogging or on YouTube?

Getting started can seem daunting and scary (I know it was for me) but it doesn’t have to be. I was very lucky to find a program that that has helped me grow my blog to over 35,000 page views and a YouTube channel that is growing month-over-month.

Project 24 by Income School is the program that I have used. I have been a member for over a year now and just renewed my membership. I cannot recommend Project 24 enough! For more information on Income School, click the link below:

Project 24 byIncome School – Teaching You How to Create Passive Income from Blogs and YouTube

Recent Posts

Detailed Guide to Writing JavaScript in Atom