JavaScript Static Code Analysis

Friday, November 12, 2021 • edited Friday, November 19, 2021 • 4 minutes to read

JavaScript is one of the most popular programming languages. Depending on the ranking we check, it could be 7th (TIOBE Index), 3rd (PYPL index), or even the 1st (JetBrains) most popular. It is a high-level and multi-paradigm language with dynamic typing. In my experience, it could be very poorly written with a lot of inconsistencies - take a look at some prevalent libraries and modules in the NPM repository.

Usually, a poor codebase leads to bugs and weird, not foreseen behaviors. As part of the code review and CI process, I use in my projects and recommend a static code analysis for others. I have already covered why use SAST (Static Analysis Software Testing) and how to use static code analysis for PHP and how looks static code analysis for CSS/SCSS/SASS.

JSlint vs JHint vs ESLint.

This article focuses on ESLint, but I feel that I need at least briefly introduce other possible solutions. I believe that ESLint, JSHint, and JSLint are equally easy to include in your project.

ESLint is the most customizable of all of them, but also the number of options and plugins could be intimidating. JSLint has almost no configuration at all, and you need to stick with whatever it has. It is very opinionated. JSHint lays somewhere in the middle between the above two.

I have used JSHint in the past, but as I gain more experience, I start gravitating more to ESLint.

How to install and use ESLint?

To add ESLint to your development dependencies and install it, we will, of course, use npm. So the command looks like that: npm i -D eslint. ESLint comes with an excellent first-time configuration wizard. Run it with the following command: npx eslint --init.

The configuration wizard will ask essential questions, like “How would you like to use ESLint?”. You should choose here “To check syntax, find problems, and enforce code style” for most cases. Next, you need to answer which type of modules and framework (ESLint supports some out of the box) you use.

After that, you need to decide if you use TypeScript (I will not cover that topic) and where your code is running. Next, the most critical question - “How would you like to define a style for your project?”. Unless you know what you do, please answer here “Answer questions about your style”.

This option will ask you a couple of questions about indentation, quotation, semicolons, etc. After that, your initial setup will look similar to the below one.

module.exports = {
    'env': {
        'browser': true,
        'es2021': true
    },
    'extends': 'eslint:recommended',
    'parserOptions': {
        'ecmaVersion': 12,
        'sourceType': 'module'
    },
    'rules': {
        'indent': [
            'error',
            4
        ],
        'linebreak-style': [
            'error',
            'unix'
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'always'
        ]
    }
};

To run ESLint and analyze your file or files, run npx eslint file.js or use wildcards like that npx eslint src/**/*.js.

How to modify ESLint rules?

After our initial configuration, ESLint will extend “recommend” rules. Which are those? You could check all possible ESLint rules. Those “recommend” are marked as such. To enable/disable or modify any of them, you need to alter the rules section in your configuration. For example, to disable “no-unused-vars” rule, add the following to the rules section.

'no-unused-vars': 'off',

How to use predefined rules?

While running the configuration wizard, you noticed that it asked to use some predefined rules sets. Those are typically a list of rules which you could extend. A lot of projects use some popular ones, open-sourced by big companies like Google, Facebook, or Airbnb.

For example, run the following command to install Google’s rules set: npm i -D eslint-config-google. Then, add another entry in the extends section.

'extends': [
    'eslint:recommended',
    'google'
],

ESLint and plugins.

Besides rules, ESLint also provides an option to extend its functionality by writing plugins. To provide some special rules, parse files other than *.js, etc. Using plugins in your project looks very simple to using predefined rules sets.

SonarSource, responsible for SonarQube, created the SonarJS plugin, which I find very useful. To install it, run the following command: npm i -D eslint-plugin-sonarjs. Then, to our example configuration, we need to add a plugins section and alter the extends section.

'plugins': [
    'sonarjs'
],
'extends': [
    'eslint:recommended',
    'google',
    'plugin:sonarjs/recommended'
],

How to integrate ESLint with Webpack?

ESLint, like all SAST tools, could be easily integrated with your Continuous Integration systems. So we need to start with adding eslint-webpack-plugin as our dependency. To install it, run npm i -D eslint-webpack-plugin.

After that, you need to load it as a module and add it to Webpack’s plugins list.

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    plugins: [
        new ESLintPlugin()
    ]
}