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.
Now, let’s get started with the tutorial!
The quick answer is yes.
- Node.js atom package
- the Script package on Atom
Once you have downloaded the Node.js installer, double-click it to install Node.js onto your computer.
|Package||Package Description||Link To Package|
|Emmet||allows you to create custom code |
snippets for any language, including JS.
blocks that help you avoid writing the same
code again and again.
|Linter – JS – Standard||This plugin adds an interface that can show |
error/warning messages in all JS styles:
standard, semistandard, and happiness.
|Atom TernJS||The plugin enhances your code writing experience|
ES5, ES6, ES7, ES8, and many more.
|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.
|DocBlockr||While documenting a project, this plugin comes in handy |
since it helps you fasten that process.
|Atom Beautify||This plugin increases the code readability in your JS program |
by helping you add structure to your code.
|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.
|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. |
|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.
|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.
|Script||This package is perhaps the most crucial package that|
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.
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.
- 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.
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.