Home - The Productive Engineer

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 packagethe Script package on Atom Installing Node.js 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 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.linkLinter - JS - StandardThis plugin adds an interface that can show error/warning messages in all JS styles: standard, semistandard, and happiness.linkAtom TernJSThe plugin enhances your code writing experienceby providing JavaScript intelligence and support for:ES5, ES6, ES7, ES8, and many more.linkAsk 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.linkDocBlockrWhile documenting a project, this plugin comes in handy since it helps you fasten that process.linkAtom 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. linkGIT ProjectsThis allows you to open your Git projects with quick keyboard shortcuts.linkGit 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!linkGit BlameThe plugin adds support for projects that multiple people workon at the same time. It notifies the changes or modifications madeby which member, where, and when. linkReactFor those who work on React JS, this plugin provides supportwhile coding using React JS. It has auto-complete,snippets, necessary formatting, and much more.linkScriptThis package is perhaps the most crucial package thatallows you to run JavaScript programs within Atom itself. linkBest 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 in the Main Menu, go to Atom -> Preferences. Atom.io install section of preferences on MacOS 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 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 Find the package you want and click the "Install" button as shown above. 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 Go to File -> Settings -> Install on Windows or Atom -> Preferences -> Install on MacOS searching for the script package in Atom In the Install Packages window, type ‘Script’ Click 'Install' to start installing the Script package in Atom 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 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. How To Run JavaScript In Atom A simple JavaScript file in Atom Open your JavaScript file in AtomMake any changes you need and then save the file the 'Run Script' option in the Script package for Atom.io 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 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. Enter your email address to subscribe Provide your email address to subscribe. For e.g abc@xyz.com SUBSCRIBE Terms & Privacy policy Check Out Our YouTube Channel! https://www.youtube.com/watch?v=3NiJEQCAFMc 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

How to be Productive When Working Remote

Recent Posts