@eslint-kit/configure

✨ All-in-one solution for configuring ESLint in all of your projects ✨

Navigation

• Why?
• Installation
• Presets
  • TypeScript
  • Prettier
  • Node
  • React
  • React New JSX Transform
  • Next.js
  • Alias

Why?

• Most configs contain too common rules inside, so you need to do a lot of things to finalize them for your project
• The other configs are bound to specific stack/technology, so it's hard to extend them in a way you're like
• Sometimes, configs use formatting rules. Formatting is not the ESLint's job, so it's a high chance to get the conflict someday
• Together, above means that most likely you'll need a different ESLint config for each of your project
• You may often need to install a lot of dependencies: eslint, plugins, configs, parser, etc.
• You may often face the problems with eslint/parser/plugin/config versions. It takes time to find the issue and solution.

ESLint Kit is solving all these problems by providing a many small presets, each performing a specific task.

You can select presets by using configure function in your .eslintrc.js file:

const { configure, presets } = require('@eslint-kit/configure')

module.exports = configure({
  presets: [
    presets.typescript(),
    presets.prettier(),
    presets.node(),
    presets.react({ version: '18.0' }),
    presets.alias({
      root: './src',
      paths: { '@app': './' }
    })
  ],
  extend: {
    rules: {
      'some-rule': 'off'
    }
  }
})

@eslint-kit/configure package contains all the dependencies you might need. It's ok - this is a development dependency, so you won't get any bundle size problems.

The ESLint Kit presets try to contain only the best-practice rules to make overwriting as rare as possible. But you can still easily override them by using extend property.

Installation

NPM:

npm install -D @eslint-kit/configure

Yarn:

yarn add -D @eslint-kit/configure

After installing, add the .eslintrc.js file in your project root:

const { configure, presets } = require('@eslint-kit/configure')

module.exports = configure({
  presets: [],
})

Now, just select the presets you need. The full information about them is located in Presets section.

Presets

TypeScript

• Changes parser to @typescript-eslint/parser
• Allows the usage of .ts and .tsx extensions
• Adds some TypeScript specific rules (for TS files)
• Replaces some default ESLint rules with their TypeScript analogues (for TS files)

configure({
  presets: [
    presets.typescript({
      root: './', // (optional) Defaults to './'
      tsconfig: 'tsconfig.json' // (optional) Defaults to 'tsconfig.json'
    })
  ]
})

Prettier

• Enables the rule prettier/prettier from Prettier ESLint plugin

configure({
  presets: [
    /*
     * Optionally, you can pass the Prettier config
     * Note: it will merge and override any options set with .prettierrc files
     */
    presets.prettier({
      semi: false,
      singleQuote: true
      // ...
    })
  ]
})

The recommended Prettier config:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "quoteProps": "consistent",
  "endOfLine": "lf",
  "importOrder": [
    "^(child_process|crypto|events|fs|http|https|os|path)(\\/(.*))?$",
    "<THIRD_PARTY_MODULES>",
    "^~(\\/(.*))?$",
    "^@(\\/(.*))?$",
    "^@app(\\/(.*))?$",
    "^[./]"
  ],
  "experimentalBabelParserPluginsList": [
    "jsx",
    "typescript"
  ]
}

As you see, we use @trivago/prettier-plugin-sort-imports. You can find the options on its README page.

Node

• Enables node environment

configure({
  presets: [presets.node()]
})

React

• Enables browser environment and jsx ecma feature
• Adds some React and React Hooks plugins

configure({
  presets: [
    presets.react({
      version: '16.0' // (optional) Defaults to 'detect'
    })
  ]
})

React New JSX Transform

• Allows using JSX without importing React

configure({
  presets: [presets.reactNewJSXTransform()]
})

Next.js

• Allows the usage of export default

configure({
  presets: [presets.nextJs()]
})

Alias

• Allows to set the aliases for import plugin

configure({
  presets: [
    presets.alias({
      root: './src', // (optional) Defaults to './'
      paths: { '@app': './' }, // (optional) Defaults to empty object
      jsconfig: 'jsconfig.json' // (optional)
    })
  ]
})