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
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.
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
| Package | Package Description | Link To Package |
|---|---|---|
| Emmet | allows you to create custom code snippets for any language, including JS. | link |
| JavaScript – Snippets | This provides the most reused JS code blocks that help you avoid writing the same code again and again. | link |
| Linter – JS – Standard | This plugin adds an interface that can show error/warning messages in all JS styles: standard, semistandard, and happiness. | link |
| Atom TernJS | The plugin enhances your code writing experience by providing JavaScript intelligence and support for: ES5, ES6, ES7, ES8, and many more. | link |
| Ask Stack | Switching 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 |
| DocBlockr | While documenting a project, this plugin comes in handy since it helps you fasten that process. | link |
| Atom Beautify | This plugin increases the code readability in your JS program by helping you add structure to your code. | link |
| Autocomplete – Paths | As 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 Projects | This allows you to open your Git projects with quick keyboard shortcuts. | link |
| Git Plus | This 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 Blame | The 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 |
| React | For 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 |
| Script | This package is perhaps the most crucial package that allows you to run JavaScript programs within Atom itself. | link |
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:
- in the Main Menu, go to Atom -> Preferences.
- Click on the “Install” tab on the left as shown in the screenshot above to bring up the Install Packages screen
- 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.
- Find the package you want and click the “Install” button as shown above.
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:
- Go to File -> Settings -> Install on Windows or Atom -> Preferences -> Install on MacOS
- In the Install Packages window, type ‘Script’
- You should see the Script package as shown in the screenshot above. Click the ‘Install’ button to install the package in Atom
Wait for a few seconds, and your package will be downloaded and installed.
If you are looking to use VS Code for JavaScript, check out our Guide to JavaScript Development in VS Code.
My Goto Book for Learning JavaScript
[amazon box=”1593279507″]
How To Run JavaScript In Atom
- Open your JavaScript file in Atom
- Make any changes you need and then save the file
- To run this JS file, go to the menu bar, click Packages -> Script -> Run Script as shown in the screenshot above.
- 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.
