/eslint-config-kit

A collection of useful eslint configs

Primary LanguageJavaScriptMIT LicenseMIT

ESLint Config Kit

ESLint Config Kit is a collection of useful ESLint configs for much more convenient project developing.
It uses only the necessary rules to provide error checking and readability improving. Nothing extra included.

Configs divided into base and technology-specific parts, which can be used in "modular" style.

  • It doesn't enforce any doubtful rules, like prefer-default-export in airbnb config.

  • It helps you to write a more readable code.
    Any use of implicit language mechanic will be warned.

  • It's designed to be a conflict-free.
    For example, @typescript/eslint:recommended config does not resolve conflicts with import plugin, but @eslint-kit/typescript does.

  • The main goal is to create a zero-override config, which can be used almost in any project.

Here is the example for TypeScript React project:

{
  "extends": [
    "@eslint-kit/base",
    "@eslint-kit/typescript",
    "@eslint-kit/react"
  ]
}

Overview

Installation using ESLint Kit CLI

Using npx (recommended):

npx @eslint-kit/cli

Installing globally (it's good in rare cases):

npm i -g @eslint-kit/cli
eslint-kit

Learn more on @eslint-kit/cli page.

Manual installation

  1. Install basic dependencies:

    npm i -D eslint @eslint-kit/eslint-config-base

  2. Create .eslintrc file in the root of your project.

  3. Extend from base config:

    {
  "extends": ["@eslint-kit/base"]
}

  4. Add any desired configs here.

  5. (optional) Integrate ESLint into your IDE/editor here.

Configs

Note: Base config does not include any formatting rules. It is strongly recommended to use prettier config for this purposes. Just open Prettier section right below.

Prettier

This config just enables the prettier plugin and adds prettier/prettier rule.

Installation:

  1. Install config:

    npm i -D @eslint-kit/eslint-config-prettier

  2. Extend from it:

    {
  "extends": [
    "@eslint-kit/base",
+   "@eslint-kit/prettier"
  ]
}

  3. Create .prettierrc file in the root of your project add specify your formatting settings.

  4. (optional) Use the recommended settings:

    {
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "endOfLine": "lf"
}
React

Installation:

  1. Install parser (skip if you already have it):

    Choose between babel-eslint and @typescript-eslint/parser, depends on what you use.

    Note: babel-eslint requires babel/core@>=7.2.0 and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.

  2. Install config:

    npm i -D @eslint-kit/eslint-config-react

  3. Extend from it and specify a parser:

    {
+ "parser": "babel-eslint",
  "extends": [
    "@eslint-kit/base",
+   "@eslint-kit/react"
  ]
}
Node

This config just enables the node env, it doesn't add any rules.

Installation:

  1. Install config:

    npm i -D @eslint-kit/eslint-config-node

  2. Extend from node config:

    {
  "extends": [
    "@eslint-kit/base",
+   "@eslint-kit/node"
  ]
}
TypeScript

Installation:

  1. Install @typescript-eslint/parser parser (skip if you already have it):

  2. Install config:

    npm i -D @eslint-kit/eslint-config-typescript

  3. Extend from typescript config and specify a parser:

    {
+ "parser": "@typescript-eslint/parser",
  "extends": [
    "@eslint-kit/base",
+   "@eslint-kit/typescript"
  ]
}

Integrating ESLint with IDEs/editors

VSCode

  1. Install ESLint plugin

  2. Choose any option you like:

    • Fix on save.
      Add the following to your settings.json:

      "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

    • Fix on keyboard shortcut.
      Add the following to your keybindings.json:

      {
  "key": "alt+f", // or any other keys
  "command": "eslint.executeAutofix"
}

Advanced Usage

Add aliases to import plugin (JavaScript)

Using CLI:

npx @eslint-kit/cli alias

Manually:

  1. Install dependencies:

    npm i -D eslint-import-resolver-alias

  2. Update .eslintrc with your aliases:

    {
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
          ["@folder-alias", "./src"],
          ["@file-alias", "./src/App.js"]
        ],
        "extensions": [".js", ".jsx", ".json"]
      }
    }
  },
  "rules": {
    "import/order": [
      "warn",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "@folder-alias/**",
            "group": "internal",
            "position": "before"
          },
          {
            "pattern": "@file-alias",
            "group": "internal",
            "position": "before"
          }
        ]
      }
    ]
  }
}
Add aliases to import plugin (TypeScript)

Using CLI:

npx @eslint-kit/cli alias

Manually:

  1. Install dependencies:

    npm i -D eslint-import-resolver-typescript

  2. Update .eslintrc:

    {
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": {
    "import/order": [
      "warn",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "@folder-alias/**",
            "group": "internal",
            "position": "before"
          },
          {
            "pattern": "@file-alias",
            "group": "internal",
            "position": "before"
          }
        ]
      }
    ]
  }
}

    Note: See eslint-import-resolver-typescript README for the details.

Troubleshooting

Common issues

Issue:

Difinition for rule '**/**' was not found.

This problem occurs when there are several plugins in the dependencies of your project that are also used by eslint-kit, but their versions from the dependencies of your project do not fit the requirements of the eslint-kit. Due to the eslint mechanics of loading plugins, eslint-kit configs get the wrong plugins versions in which some of the rules may either be removed or have other settings.

Read more here.

Solution:

Install rc version of base config:

npm i -D @eslint-kit/eslint-config-base@rc
TypeScript config issues

Issue:

  • Anything related to "parserOptions.project"

Solution:

You should specify your tsconfig location manually in parserOptions:

{
  "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+   "project": ["*/tsconfig.json"]
+ },
  "extends": [
    "@eslint-kit/base",
    "@eslint-kit/typescript"
  ]
}

If it doesn't work, try to rename eslint config file to .eslintrc.js and resolve tsconfig.json path:

const path = require('path')

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: [path.resolve(__dirname, './tsconfig.json')] // or your tsconfig location
  },
  extends: [
    '@eslint-kit/base',
    '@eslint-kit/typescript'
  ]
}