Now, let’s get started with the tutorial!
Let us quickly go through each of them, their purpose, and their configuration (if any).
You can find the ES6 extension in the link below:
Alternatively, you can also click the Extensions button on the left pane, search the name and install it.
ESLint allows you to check syntax, format your code and even see problems with it. This extension is handy for writing codes since you’ll know the errors while you write the program.
First, you’ll need to download and install ESLint on your system. For this, open up the terminal in VSCode and use the following command:
npm install eslint
This will download and install ESLint on your system, and now you need to do the configuration. Use the command below:
This will ask you a set of questions to understand what your requirements from ESLint are. Based on that, it will create a configuration file and also install specific packages that you will need to fulfill your requirements.
Once those are done, you can install all the necessary packages, and your configuration file will be created.
Now you need to install the ESLint extension from VS Code. You can either go to the link below or use the Extensions tab on the left pane within VS Code.
Besides these, there are a few other extensions that can be useful while writing code.
Prettier is one of the most popular extensions that enable you to format your code and make it look legible for others to read and understand.
If you’re working on a repository or a project with more than one person, this extension allows you to collaborate and simultaneously write code. It has a series of features such as Code Authorship, Blame, Recent Changes, History, etc., to make working a simple process.
It allows you to send HTTP requests and receive an immediate response within the VS Code environment itself. This way, you can check and test your APIs without having to leave the VS Code editor.
This extension allows you to autocomplete npm import commands. It’s a good feature to have. However, please note that for this, you’ll need to have NodeJs installed on your system so that it reads and interprets these commands.
Although you can run your code files inside VS Code, it is better to have the Code Runner extension since it helps you run code files or active code text directly on the VS Code editor.
You can go to the link below, download and install the extension:
When running a program, the configuration needs to know where to look for the run-time executor. For this, you go to File -> Preferences -> Settings -> Workspace Settings
Here, ensure that you have the executor PATH entered into an environment variable by adding it in the code-runner.executorMap block.
- Create a new file and save it as a .js file
- Save the file
- Click the Play Button in the top right corner of the VSCode window
However, it doesn’t restrict you to those features alone. You can augment them with additional extensions and use the full power of the code editor.
Besides its user-friendly features, VS Code is also a lightweight program that consumes very little memory. As a result, its performance is fast, and the resource management is impeccable.
Comparing the two editors as an overall coding experience, VS Code is better than Atom for the following reasons.
- Electron applications, in general, are infamous for being slow, and Atom is no exception to this. Unfortunately, it’s not as fast as VS Code.
- While VS Code’s structure has a combination of built-in features + extensions, Atom is powered primarily by extensions. For small programs, Atom is perfect since you only need a few extensions and packages, but Atom will slow down for larger programs since you’ll have to install too many extensions.
- However, on the design front, Atom is definitely more appealing to the users. Its UI is clean, slick, and breaks the monotony of too much code on the screen.
As you see, when both editors are evaluated on a holistic level, VS Code comes out on top as the better editor for users. However, you should try both editors out for yourself and decide.
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.