kieranpotts-eslint-config

kieranpotts-eslint-config

This is a shareable ESLint configuration for JavaScript and TypeScript projects.

I use this to enforce consistent coding styles and conventions across my JavaScript/TypeScript codebases. I'm sharing my ESLint configuration with the wider community for the benefit of other projects that may wish to adopt the similar constraints.

My preferred JavaScript coding style is loosely based on the Standard Style, which itself embraces the prevailing coding conventions in the JavaScript community. A terse, clean coding style is encouraged, free of unnecessary semi-colons to terminate statements, preferring lightweight arrow function expressions, and just two spaces for indentation.

I've designed the linting rules to flag stylistic preferences as warnings, while errors are reserved only for anti-patterns that are common sources of bugs. For example, ESLint will only warn about the use of yoda syntax – comparisons where the literal value is on the left and the variable is on the right of the operator – since this is primarily a stylistic preference. It's not wrong to write "if red is the color", but "if the color is red" is easier to read.

/* ⚡WARNING: "Expected literal to be on the right side of ===." */
if ('red' === color) {
  // …
}

A counter-argument in favor of using yoda syntax is that it protects against logical errors where the equals sign is accidentally used for assignment (=) instead of comparison (== or ===). But there are other checks in place for these mistakes, and they will be flagged as errors rather than warnings.

/* ❗ERROR: "Expected a conditional expression and instead saw an assignment." */
/* ❗ERROR: "Unexpected constant condition." */
if (color = 'red') {
  // …
}

To remove both the errors and warnings from the linter output, you would need to refactor this logic as follows:

/* ✅ */
if (color === 'red') {
  // …
}

Documentation

Requirements

• Node.js ^16.13.0 || ^18.12.0

Installation

npm install kieranpotts-eslint-config --save-dev

yarn add kieranpotts-eslint-config --dev

Dependencies

REQUIRED dependencies

ESLint ^8.21.0 is REQUIRED. Earlier versions of ESLint are not supported. That's because the configuration exported from this package is compatible with ESLint's new "flat file" configuration format, which uses the file name eslint.config.js.

npm install eslint@^8.21.0 --save-dev

yarn add eslint@^8.21.0 --dev

OPTIONAL dependencies

If your source code is transformed by Babel, you will need to install @babel/eslint-parser and plug this in to your ESLint config. This will transform your source code, for example polyfilling experimental ECMAScript features, before statically analyzing it.

It is also recommended to install the globals package, which will allow easy configuration of global identifiers enabled in your JavaScript runtime environment.

See the eslint.config.js examples below for instructions on using both these dependencies.

Usage

To use this ESLint configuration, you are REQUIRED to use ESLint's new "flat file" configuration format, which is enabled via a file called eslint.config.js.

If your project has an ESLint configuration file named .eslintrc.*, then you are using ESLint's old configuration file format. The "eslintrc" configuration system is still the default in ESLint v8, but it will be deprecated in ESLint v9 and removed entirely in ESLint v10. Therefore, it is RECOMMENDED you upgraded to the new "flat file" configuration format as early as possible. See the migration guide, and the ESLint blog for more background.

Use the following configuration as a template for your project's eslint.config.js. For more detailed instructions, see ESLint's own documentation on using predefined configurations.

import { rules } from "kieranpotts-eslint-config"

// OPTIONAL dependencies
import globals from 'globals'
import babelParser from '@babel/eslint-parser'

// OPTIONAL plugins
// import importPlugin from 'eslint-plugin-import'
// import nodePlugin from 'eslint-plugin-n'
// import promisePlugin from 'eslint-plugin-promise'
// import securityPlugin from 'eslint-plugin-security'

export default [
  {
    'files': [
      '**/*.js'
    ],

    /*
    Include the rest of your ESLint configuration here, including
    any custom parsers and language options. See:
    https://eslint.org/docs/latest/use/configure/configuration-files-new
    */

     /* Enable the plugins required for the extended rules you want to use. */
     plugins: {
      // 'import': importPlugin,
      // 'node': nodePlugin,
      // 'promise': promisePlugin,
      // 'security': securityPlugin,
    },

    'languageOptions': {
      'globals': {
        ...globals.node,
      },
      'parser': babelParser,
      'sourceType': 'module',
    },

    'rules': {
      ...rules.builtin,   // REQUIRED
      // ...rules.imports,   // OPTIONAL
      // ...rules.node,      // OPTIONAL
      // ...rules.promises,  // OPTIONAL
      // ...rules.security,  // OPTIONAL
    },

  },
]

Of course, you MAY override and extend the imported rules, which you can do like this:

{
  'rules': {
    ...rules.builtin,
    'no-unused-vars': 'warn',
  },
}

VS Code integration

If you have installed the ESLint extension in VS Code, the following settings are recommended. This will enable support for ESLint's new flat file configuration format (eslint.config.js) and enable ESLint as a code formatter for both JavaScript and TypeScript files.

For more usage instructions, see the documentation for the link:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint[ESLint extension for VS Code].

{
  "eslint.experimental.useFlatConfig": true,
  "eslint.format.enable": true,
  "eslint.validate": ["javascript", "typescript"],
}

---

Copyright 2020-present Kieran Potts and contributors, MIT license