ESLint to Check Code Quality

Checking code quality with ESLint

A linter is a program that uses a set of rules to detect code that, though syntactically valid, is likely to contain mistakes. A classic example is using = (assignment) instead of == or === (equality) in an if statement:

if (savings = 0) {
  // This "condition" would empty your account!
}

Linting JavaScript is especially valuable because of its relatively freewheel nature. If you mistype window as wimdow, your program won’t refuse to run. it just won’t run the way you’d hoped. Of course, one way to avoid such bugs is to have extensive test coverage. But a linter can often identify such problems sooner and give you more helpful information for fixing them. Enter ESLint.

Although other JavaScript linters have been tried before, ESLint is the first to really take off, thanks to its pluggable architecture. There are plugins for React, Angular, and every other popular JavaScript framework to warn developers against the most common gotchas. And what do you know? There’s a Jest plugin, too.

You’ll find that linting is an invaluable addition to your TDD toolbelt. One that you’ll continue to use throughout this course. In this section, you’ll learn how to run ESLint, how to configure it, and how to integrate it with the VS Code for fast, automatic feedback.

Installing and configuring ESLint

Here are the steps to install and configure ESLint in VS Code:

• Let’s add ESLint to our project. First, open the VS Code Terminal. If Jest is running in watch mode, press Q to quit. Then install the eslint package:

  $ npm install --save-dev eslint@5.10.0
  + eslint@5.10.0
  

• You can try running ESLint with npx eslint ., but it won’t do anything yet. The project needs an ESLint configuration first. Create a new file and save it as .eslintrc.js:

  // .eslintrc.js
  module.exports = {
    extends: ['eslint:recommended'],
  };
  

  This tells ESLint to use its recommended rule set as the base for our configuration. For a complete list of the included rules, check the ESLint docs. We’ll tweak those rules in the next section.

• Now try linting palindromes.js using the npm lint script:

  $ npx eslint palindromes.js
  
  /Users/tburnham/code/test-driven-palindromes/palindromes.js
    1:25  error  Parsing error: Unexpected token >
  
  ✖ 1 problem (1 error, 0 warnings)
  

  ESLint refused to parse the arrow function syntax, (expression) => { ... }. By default, ESLint makes the conservative assumption that all code must conform to the ECMAScript 5 standard. Arrow functions were added in ECMAScript 6. functions were added in ECMAScript 6.

• To change that assumption, add a new entry called parseOptions to the ESLint configuration:

  // .eslintrc.js
  module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
      ecmaVersion: 6,
    },
  };
  

• Rerun the linter, and you’ll see a different error:

  $ npx eslint palindromes.js
  
  /Users/tburnham/code/test-driven-palindromes/palindromes.js
    1:1  error  'module' is not defined  no-undef
  
  ✖ 1 problem (1 error, 0 warnings)
  

  Once again, ESLint is erring on the side of caution. The module global isn’t part of any ECMAScript standard, and would indeed be undefined in many environments.

• We expect it to be defined, however, because this code will run in a Node environment. To let ESLint know that, add an entry called env to its configuration:

  // .eslintrc.js
  module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
      ecmaVersion: 6,
    },
    env: {
      node: true,
    },
  };
  

• Now give the linter one more try:

  $ npx eslint palindromes.js
  

Now there’s no output. When it comes to linting, no news is good news.

Commit your work so far, using the recommended gitmoji for configuration changes:

:wrench: Initial ESLint setup

If you’d like more information on anything we’ve done so far, see the docs on configuring ESLint. Next up, we will build a slightly different set of linter rules for our test file.

Install ESLint in the widget below by running the commands that we just learned about, and then try running npx eslint palindromes.js. The .eslintrc.js file has already been configured for you.