Configuring VS Code for Node/JavaScript Development

In this article, we will find out what Visual Studio Code is, how to install and configure it for Node/JavaScript development.

It was developed by Microsoft and is available for Windows, MacOS, and Linux operating systems.

This program is distributed free of charge, its source code is available on GitHub.

VS Code supports a wide variety of programming languages, includes a debugger, Git tools, syntax highlighting, IntelliSense auto-completion, refactoring tools, a terminal, and more.

VS Code is quite flexible and extensible with plugins available on the Visual Studio Marketplace. You can open the panel with extensions in the program using a key combination Ctrl+Shift+X.

There are a lot of plugins for Visual Studio Code, but in this article, we will consider only the most popular of them. VS Code already has a plugin like Emmet built-in. If you are not familiar with it, then it is intended for quick code typing. You do not need to install it additionally.

Visual Studio Code has a huge number of different plugins besides language packs. They are intended to expand the functionality of this editor. All plugins for this editor are hosted on the Marketplace.

General VS Code setup

VS Code contains a large number of settings with which you can customize this editor for yourself.

Changing settings in VS Code is done in the appropriate window. You can open it in several ways:

• via a key combination Ctrl+,;
• through the menu item “File -> Settings -> Options” (in the English version “File -> Preferences -> Settings”);
• click on the gear icon and select the “Settings” item in the menu that opens.

The list of parameters that users most often configure:

• editor.tabsize – the number of spaces for tabulation;
• editor.insertSpaces– whether to insert spaces when pressed Tab;
• editor.detectIndentation – whether the parameters “# editor.tabsize” and “editor.insertSpaces” should be determined automatically when opening a file based on its content;
• editor.wordWrap – controls how lines should be wrapped;
• editor.fontSize – font size in pixels;
• editor.mouseWheelZoom– whether it is necessary to enable changing the font size in the editor when the key is pressed Ctrland the mouse wheel is moving;
• editor.minimap.enabled – enables or disables the display of the mini-map;
• editor.formatOnSave – whether to perform automatic formatting of the file when it is saved;
• workbench.startupEditor – controls what will be displayed at startup if the editor content has not been restored from a previous session;
• files.insertFinalNewline – if this parameter is enabled, then an empty line is inserted at the end of the file when saving;
• files.trimFinalNewlines – if this parameter is active, then when saving the file, all empty lines following the last one at the end of the file will be deleted;
• files.trimTrailingWhitespace – if this parameter is enabled, then when saving the file, all whitespace characters at the ends of lines will be removed;
• files.autoSave – to enable autosave files;
• terminal.integrated.cwd – allows you to set the path of the explicit launch, which will be used to launch the terminal;
• telemetry.enableTelemetry – Enables or disables sending usage and error information to a Microsoft online service.
• telemetry.enableCrashReporter – Enables the submission of crash reports to a Microsoft online service.

You can change the settings both globally and specifically for the current project. Changing global settings is carried out in the “Options” window on the “User” tab. These settings are saved to the “settings.json” file. You can open it by clicking on the “Open Parameters (JSON)” icon.

Sample “settings.json” file:

{
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 120,
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.fontSize": 17,
  "editor.mouseWheelZoom": true,
  "workbench.startupEditor": "none",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 10000
}

By the way, you can also change the settings simply by editing this file.

Saving settings for the working directory is performed in a special file “settings.json”, which will be added to the “.vscode” folder. Setting parameters for the working directory (project) can also be done simply by editing this file.

Configuring VS Code for HTML and CSS

Visual Studio Code provides basic support for writing HTML and CSS out of the box. Includes syntax highlighting, smart add-ons with IntelliSense, and custom formatting. VS Code also has excellent Emmet support.

Why is Emmet needed? It allows you to write code very quickly.

For example, the Emmet abbreviation ul>li*3>span.item-$ upon pressing a key Tab will generate the following code:

<ul>
  <li> <span class = "item-1"> </span> </li>
  <li> <span class = "item-2"> </span> </li>
  <li> <span class = "item-3"> </span> </li>
</ul>

In CSS, the abbreviation Emmet dnwill generate the code display: none.

VS Code has built-in code formatting tools. You can customize the formatting options in the settings. They are located in the sections “Extensions -> HTML” and “Extensions -> CSS”.

The keyboard shortcut for performing formatting in VS Code is Shift+Alt+F.

The functionality of VS Code when working with HTML and CSS can be improved with extensions.

Here is a list of some of them:

• Auto Rename Tag – automatically changes the name of the closing tag when renaming the opening tag;
• Auto Close Tag – automatically adds a closing HTML / XML tag when you enter the closing parenthesis of the opening tag (except HTML, this add-on adds this feature to JavaScript and many other languages);
• HTMLHint – plugin for static analysis of HTML code;
• HTML CSS Support – CSS support for HTML documents;
• IntelliSense for CSS class names in HTML – a plugin for suggesting CSS class name completion suggestions in HTML based on the definitions it finds in your workspace.
• Autoprefixer – to automatically add CSS properties with prefixes;
• CSS Peek – allows you to view properties attached to a class or identifier without switching to the CSS file in which they are described;
• Prettier – Code formatter – for formatting code (HTML, CSS, JavaScript, etc.);

VS Code has a feature that allows you to collapse areas of CSS code between /*#region*/and /*#endregion*/:

/ * # region * /
...
/ * # endregion * /

Configuring VS Code for JavaScript Development

The development of a web project in Windows 10 can be entered not only using programs designed only for this operating system, but also through WSL (Linux). If you like Linux and want to use it, then Windows 10 allows you to do this out of the box (that is, directly from the distribution). The next section provides instructions on how to install WSL on Windows 10 and configure Visual Studio Code to use it as a development environment.

In addition, Linux OS in most cases is a system that you will then have installed in production. This means that you will get the environment as on the server or closer to it.

If you do not want to use WSL as a development environment or are working on a different operating system, then in this case you can immediately skip to the section “Installing and configuring ES Lint”.

How to install WSL on Windows 10 and use it in VS Code

Briefly about the Windows Subsystem for Linux (WSL). Windows 10 introduces the ability to do web development right in a Linux-based environment. To do this, you just need to enable the Windows 10 Windows Subsystem for Linux (WSL) component and install your “favorite” Linux distribution from the Microsoft Store (for example, Ubuntu 18.04). The WSL subsystem appeared in Windows 10 starting with the Anniversary Update (1607), and the 2004 version of this OS already includes WSL 2.

Installing the “Remote – WSL” extension in VS Code. To use WSL as a full development environment directly from VS Code, you need to install the “Remote – WSL” extension.

This will allow you to introduce web development right in a Linux-based environment, use its specific toolkits and utilities, and run and debug your applications on Linux without leaving Windows.

This extension will allow you to execute commands directly in WSL, as well as edit files located in WSL or Windows mounted file system (local drives are in /mnt) without worrying about compatibility issues.

After installing the extension and restarting the VS Code editor, you will have a WSL indicator in the lower-left corner of the program window.

Clicking on it will show you the Remote-WSL commands. Using them, you can open a new VS Code window that will use WSL as the environment. In this case, the command “Remote-WSL: New Window” will do it using the Linux distribution that you have assigned by default, and the command “Remote-WSL: New Window using Distro …” – using the specific Linux distribution from the installed ones.

The version of the Linux distribution that is currently used in WSL is displayed in the indicator as follows:

Installing and configuring ESLint

ESLint is a highly desirable tool to install on your system if you are developing JavaScript code. It will show you errors in your code and also guide you as you write it in a consistent way.

Before proceeding to the ESLint installation, we first install “Node.js v12.x” on the OS.

In Ubuntu, this is done as follows:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

We will enter these commands through the VS Code terminal. You can open it by means of a combination of keys Ctrl+Shift+`or by clicking in the main menu on the item “Terminal -> Create terminal”.

You can check the installed version number of “Node.js” like this:

node -v

After installing “Node.js”, let’s create a folder for the project in the OS file system, and then open it with VS Code.

Building a project usually starts with initializing it with npm. This process can be accomplished with the following command:

npm init -y

As a result of executing this command, you will have a file “package.json”. This file, in addition to information about the project and other things, will also contain a set of dependencies for this project. Having this file, we can if necessary, very quickly deploy the project on any other computer.

Now let’s move on to installing ESLint and some other npm packages into the project:

sudo npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

The key is --save-devused to record these packages in package.json. This key will add them to the section devDependencies.

Installation of npm packages is carried out in the “node_modules” folder of this project.

We’ll be using Airbnb as our coding style. This guide is used by many well-known organizations and has a very large number of stars on GitHub.

In order to be able to use Airbnb to extend the basic ESLint configuration, we installed packages eslint-config-airbnb-base(no React dependencies) and eslint-plugin-import(to support ES6 + import/export syntax and prevent problems with misspelling file paths and import names).

After finishing downloading the packages, let’s start integrating ESLint into Visual Studio Code. This is done by installing the extension with the same name.

In order for ESLint to work, you need to create a configuration file. This can be done both through a command ./node_modules/.bin/eslint --init(setting is carried out by answering the wizard’s questions), or independently.

The configuration file is required to set the settings according to which ESLint will perform JavaScript code validation.

To do this on our own, we need to create a file in the project root .eslintrcand add, for example, the following data to it:

{
  "env": {"browser": true, "es6": true},
  "extends": "airbnb-base",
  "parserOptions": {"ecmaVersion": 6}
}

This data will determine the following settings for ESLint:

• envis a property that defines the environments in which JavaScript should run. For the frontend, the environment is the browser, so let’s add to the envproperty "browser": true. The property is "es6": trueintended to automatically enable ES6 syntax.
• extends– is intended to indicate the configuration with which we want to extend the general ESLint configuration. extendsLet’s specify the configuration airbnb-base(without React) as the value . If necessary, you can specify not one, but several configurations. In this case, each subsequent configuration will expand the previous one. Those. if we specify some configuration after airbnb-base, then it will extend not the general ESLint configuration, but airbnb-base;
• parserOptions– allows you to set the parameters for the JavaScript language that we want to support. Currently, it is recommended to use ECMAScript 6 syntax when developing projects. Support for this version is ecmaVersionindicated by setting the value of the key to 6. If necessary, you can specify a different version instead.

If you need to additionally lint errors of the code placed in the <script> tag, then install the plugin eslint-plugin-html:

sudo npm install --save-dev eslint-plugin-html

We’ll be formatting JavaScript using Prettier. For correct collaboration between Prettier and ESLint, install the following npm packages:

sudo npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

In order for ESLint not to view certain folders and not give errors on them, you should create a file .eslintignoreand write them in it:

/.vscode
/.git
node_modules

If you have enabled standard code formatting in VS Code when saving, then in order to use ESLint as a plugin for formatting js files, add the following to the “settings.json” configuration file:

"editor.formatOnSave": true,
// add this
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.format.enable": true

If you want only js files to be formatted when saving files, then editor.formatOnSaveyou need to set the value false, and truethis key is only in the section "[javascript]":

"editor.formatOnSave": false,
"[javascript]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.format.enable": true

Now, ESlint will check JavaScript code and show errors and warnings in it. They will be labeled using wavy lines.

ESLint JavaScript code check result:

Additional VS Code customization

Here’s a list of VS Code plugins that can extend the capabilities of Visual Studio Code for front-end development and more:

• Project Manager – for convenient management of your projects, no matter where they are located;
• LiveServer – a local server with the ability to automatically update pages in the browser when they change (you can start the server by clicking on the “Go Live” icon in the status bar or selecting “Open with Live Server” in the context menu of the editor area);
• Debugger for Chrome – used to debug JavaScript code in the editor environment based on the Chrome browser or any other that supports the Chrome Debugger protocol;
• Settings Sync – plugin for synchronizing VS Code settings (settings are stored on GitHub);
• Visual Studio IntelliCode is a system designed to save you time by placing the most frequently used completion items for the current context at the top of the list.
• TODO HighLight – for highlighting TODO, FIXME and other annotations in the code;
• Version Lens – Shows package version information for npm, jspm, dub and dotnet cores.
• GitLens – expands the capabilities of Git built into this editor (it makes it very easy to understand why and when certain lines of code were changed, to study the history and development of the project code base, and much more).