Travis Horn
Travis Horn

Travis Horn

Setting up ESLint on VS Code with JavaScript Standard Style

Setting up ESLint on VS Code with JavaScript Standard Style

Travis Horn's photo
Travis Horn

Published on Nov 8, 2018

3 min read

JavaScript Standard Style is an attempt to standardize the way developers write JavaScript. Following this style guide will ensure your code has a level of clarity that makes reading and maintaining your code easier for anyone who has to work on it.

I posted two very similar tutorials on how to set up ESLint on VS Code with Airbnb JavaScript Style Guide and with Prettier. Many people found them useful. I figured I’d do the same thing for Standard.

ESLint is a tool for “linting” your code. It can analyze your code and warn you of potential errors. In order for it to work, you need to configure it with specific rules. Luckily, Standard provides an ESLint configuration that anyone can use.

VS Code is a popular code editor created by Microsoft. One of the nice features is that you can enable extensions that make your life as a developer easier. There is an extension for ESLint which will integrate it’s linting features right in your editor. You will be warned of potential problems on the fly as you write code.

Many developers consider setting up linting in this way essential. In this post, I’ll show you how to set it all up.

The concise version

  1. cd coding-directory

  2. npm init -y

  3. npm i -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

  4. Create .eslintrc.js: module.exports = { "extends": "standard" };

  5. In VS Code, Ctrl + Shift + X

  6. Search ESLint

  7. Install ESLint

  8. Restart VS Code

Follow along with the detailed version below if you are new to any of the concepts above or just want to get a better understanding of what these steps do.

The detailed version

First, download and install Node.js. Its package manager, npm, is included with the installation.

Once Node and npm are installed, open up a terminal (or command prompt). Change directories into the root directory for any coding you do. I call my directory “code”.

> cd C:\users\travis\code

This is the directory in which I want to configure ESLint. Any subdirectories within this one will also use the configuration we are about to set up. This works because, when you run ESLint, it looks in the current directory for a configuration; If it can’t find one, it moves up to the parent directory, checks there, and the process repeats until a configuration is found.

Now initialize a new npm configuration.

> npm init -y

Install and save the necessary packages for ESLint and the Standard configuration.

> npm i -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

In case you are wondering, eslint-plugin-import, eslint-plugin-node eslint-plugin-promise, andeslint-plugin-standard are peer dependencies for eslint-config-standard. They enable support for linting common JavaScript features.

Now create .eslintrc.js with the following contents:

module.exports = {
  "extends": "standard"
};

ESLint is installed and configured for the Standard JavaScript Style. Now we need to get it working in VS Code.

Download and install VS Code.

Open it and press Ctrl + Shift + X to open the Extensions panel.

Type ESLint in the search bar. Find the ESLint extension in the search results and click the green Install button next to it.

Go ahead and close VS Code and then re-open it.

Congratulations! ESLint is enabled in your User Settings by default. If you open up any .js file in any sub-directory of C:\users\travis\code (or wherever you installed the configuration), ESLint will check your code against the Standard JavaScript Style and warn you of any conflicts.

ESLint at work in VS CodeESLint at work in VS Code

 
Share this