eslint-config-kit

    5.0.0 • Public • Published

    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 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": [
        "kit/base",
        "kit/packs/react-typescript"
      ]
    }

    Overview

    Installation using ESLint Kit CLI

    1. Install ESLint Kit CLI:

      npm i -g @eslint-kit/cli
    2. Run it:

      eslint-kit

    Learn more on @eslint-kit/cli page.

    Manual installation

    1. Install the base dependencies:

      npm i -D eslint eslint-config-kit eslint-plugin-import
    2. Create .eslintrc file in the root of your project.

    3. Extend from base config:

      {
        "extends": ["kit/base"]
      }
    4. Add any desired configs here or there.

    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 dependencies:

      npm i -D prettier eslint-plugin-prettier
    2. Extend from prettier config:

      {
        "extends": [
          "kit/base",
      +   "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 dependencies:

      npm i -D babel-eslint eslint-plugin-react eslint-plugin-react-hooks

      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. Extend from react config and specify a parser:

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

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

    Installation:

    1. Extend from node config:

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

    Installation:

    1. Install dependencies:

      npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
    2. Extend from typescript config and specify a parser:

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

    Config packs

    Config packs are just shortcuts for the most used config combinations.

    React-TypeScript

    Includes:

    • react
    • typescript

    Installation:

    1. Install dependencies:

      npm i -D eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
    2. Extend from packs/react-typescript config and specify a parser:

      {
      + "parser": "@typescript-eslint/parser",
        "extends": [
          "kit/base",
      +   "kit/packs/react-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 VSCode settings.json:

        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
        }
      • Fix on keyboard shortcut.
        Add the following to your VSCode keybindings.json:

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

    Advanced Usage

    Add aliases to import plugin (JavaScript)
    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)
    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

    TypeScript config issues

    Issue:

    You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

    Solution:

    You should specify your tsconfig location manually in parserOptions:

    {
      "parser": "@typescript-eslint/parser",
    + "parserOptions": {
    +   "project": "./tsconfig.json"
    + },
      "extends": [
        "kit/base",
        "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: [
        'kit/base',
        'kit/typescript'
      ]
    }

    Install

    npm i eslint-config-kit

    DownloadsWeekly Downloads

    2

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    24

    Last publish

    Collaborators

    • risenforces