Learn the basics of ESLint, the most popular JavaScript linter that can help you adhere to syntax conventions, identify potential problems in your code, and enforce a set of standards defined by you or your team.

What is a Linter?

A linter is a tool that identifies issues in your code. When you run a linter against your code, it can tell you if your code follows specific syntax conventions, contains potential sources of problems, and matches a set of defined standards. It provides warnings that you can use to improve your code.

ESLint

ESLint is a linter for the JavaScript programming language, written in Node.js. It is particularly useful for JavaScript because it lacks a compilation step, and many errors are only identified at runtime. ESLint can catch errors such as infinite loops in for loop conditions, missing returns in getter methods, console.log statements, duplicate cases in switch statements, unreachable code, and invalid JSDoc, among many others. You can find the full list of rules at eslint.org/docs/rules.

ESLint is highly configurable, allowing you to choose which rules to check and which style to enforce. You can enable/disable rules in your .eslintrc configuration file, which can be global or specific to your project.

Installation

To install ESLint globally, use npm:

npm install -g eslint
eslint --init
eslint yourfile.js

To install ESLint locally, use npm:

npm install eslint --save-dev
./node_modules/.bin/eslint --init
./node_modules/.bin/eslint yourfile.js

Integration with Your Editor

ESLint is commonly used within text editors or Integrated Development Environments (IDEs). You can configure your editor to use ESLint, which will provide real-time feedback on code quality and adherence to rules.

Common ESLint Configurations

ESLint can be configured in various ways to match your coding style. Here are some commonly used configurations:

Airbnb Style Guide

You can use the Airbnb JavaScript coding style by installing the Airbnb configuration package and adding it to your .eslintrc file:

yarn add --dev eslint-config-airbnb

or

npm install --save-dev eslint-config-airbnb

{
 "extends": "airbnb"
}

React

For linting React code, install the React plugin and add it to your .eslintrc file:

yarn add --dev eslint-plugin-react

or

npm install --save-dev eslint-plugin-react

{
 "extends": "airbnb",
 "plugins": [
 "react"
 ],
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 }
 }
}

Using a Specific ECMAScript Version

Specify the ECMAScript version in your .eslintrc file:

{
  "parserOptions": {
    "ecmaVersion": 6
  }
}

Enabling Strict Mode

To enforce strict mode, add the following configuration in your .eslintrc file:

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

More Advanced Rules

ESLint provides a detailed guide on rules at eslint.org/docs/user-guide/configuring.

Disabling Rules on Specific Lines

In some cases, you may need to disable a rule temporarily or for specific lines. You can disable ESLint using the following syntax:

Disable ESLint on specific lines:

/* eslint-disable */
alert('test');
/* eslint-enable */

Disable ESLint on a single line:

alert('test'); // eslint-disable-line

Disable specific rules on multiple lines:

/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

Disable specific rules on a single line:

alert('test'); // eslint-disable-line no-alert, quotes, semi