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
• Manual installation
• Configs
• Config packs
• Integrating ESLint with IDEs/editors
• Advanced Usage
• Troubleshooting

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'
  ]
}