eslint-kit / Eslint Config Kit

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"
   } 
   

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/[email protected]>=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"
     ]
   }
   

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

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

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"
     }
     

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

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.

Issue:

Definition 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/[email protected]

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