WittCodešŸ’»

ESLint Shareable Configuration

By

Learn how to create a shareable ESLint configuration that can published to npm and then installed from npm to be used in multiple projects.

Table of Contents šŸ“–

What is a Shareable ESLint Config?

A shareable ESLint configuration is an ESLint configuration that is available on npm for download. Therefore, it can be downloaded from npm and applied to different projects, allowing for a consistent ESLint configuration among multiple projects.

Project Initialization

To begin, lets create a directory to hold our shareable configuration. Lets name it eslint-shareable-configuration.

mkdir eslint-shareable-configuration
cd eslint-shareable-configuration

Now lets initialize this as an npm project with the command npm init -y.

npm init -y

To make this ESLint configuration shareable, the package name needs to begin with the string eslint-config. We can also create a scoped npm module that contains the name eslint-config. Here, we will be creating the npm package @wittcode/eslint-config, though I would recommend creating a package with your own scope. We can set the name of the package by using the name key inside package.json.

"name": "@wittcode/eslint-config"

To get this shareable configuration to work, we also have to export the ESLint configuration from the project's main entry point. This is the file index.js by default, but it can also be configured inside package.json with the main key.

"main": "index.js"

Configure ESLint

Now lets create the ESLint configuration index.js file.

touch index.js

Now lets export an ESLint configuration object from it.

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

This configuration requires an indentation of 2 spaces, single quotes, unix style line breaks, and semi colons at the end of statements. We also extend the recommended ESLint rules. After making these rules, we then need to install ESLint from npm.

npm i eslint

Publishing to npm

Now lets make this package accessible to the public by publishing it to npm. To publish the ESLint configuration to npm, first login to the console with npm login.

npm login

This may require a login on the npm website. Next, run the command npm publish with access set to public.

npm publish --access=public

Note that specifying the access as public is only necessary if you don't have a paid account. To publish private packages on npm, you must pay for it.

Installing Shareable ESLint Configuration

Now lets create a project and use this ESLint configuration inside it. Lets call this project eslint-test.

mkdir eslint-test
cd eslint-test

Next, initialize the project as an ES6 npm project with the command npm init es6 -y.

npm init es6 -y

Now lets install our shareable ESLint configuration from npm as a development package with npm i @wittcode/eslint-config -D.

npm i @wittcode/eslint-config -D

Now lets create an ESLint configuration file called .eslintrc.cjs.

touch .eslintrc.cjs

Note that we tag on the extension .cjs because this is an ES6 project but our ESLint configuration uses CommonJS require and module.exports. Inside this file, we simply need to export an object with an extends property and give it the name of our shareable ESLint configuration.

module.exports = {
  extends: '@wittcode/eslint-config'
};

Linting our Code

Now lets create some code to lint.

mkdir src
cd src
touch index.js

Inside this file, lets log something without a semi-colon at the end of it, indent a function declaration with 3 spaces, and use double quotes for a string.

console.log('hello!')

function hello() {
   console.log("Hello!")
}

Now lets create an npm script inside package.json that will lint our src folder.

"lint": "eslint ./src"

Now lets run this command with npm run lint and look for the output.

1:22  error  Missing semicolon                               semi
3:10  error  'hello' is defined but never used               no-unused-vars
4:1   error  Expected indentation of 2 spaces but found 4    indent
4:17  error  Strings must use singlequote                    quotes
4:26  error  Missing semicolon                               semi

āœ– 5 problems (5 errors, 0 warnings)

Here, we can see that the rules from our shareable ESLint configuration are enforced. If they don't appear right away I would recommend restarting the ESLint server. In VSCode this can be done with command + shift + p and then type in Restart ESLint Server.