ESLint configurations for JavaScript, TypeScript, and React. Modular and opinionated.

• ESLint Config
  • Why use our configuration?
  • Installation and usage
  • Extending the configuration
  • Integration with IDEs/editors
  • Code of Conduct
  • Contributing
  • Acknowledgments
  • License

Please note that this ESLint configuration does not include code formatting rules, as those are handled by Prettier. To handle code formatting, you can use @detra-lab/prettier.

• Up-to-date: Our configurations are designed to incorporate the latest updates from the ESLint ecosystem.
• Modular: We support a variety of syntaxes beyond modern JavaScript, including TypeScript, and React.
• Separation of Concerns: We focus on linting rules and do not include formatting rules, as those are better handled by Prettier.

1. Install the required dependencies:

   pnpm add -D @detra-lab/eslint-config eslint

2. Create a .eslintrc.json file in the root of your project and extend it with our configuration:

   {
     "root": true,
     "extends": "@detra-lab/eslint-config"
   }

   If you need to support multiple environments and syntaxes, such as TypeScript or React, we provide pre-built configurations. You can extend them as shown below:

   JavaScript + React

   {
     "root": true,
     "extends": [
       "@detra-lab/eslint-config",
       "@detra-lab/eslint-config/react"
     ]
   }

   TypeScript

   {
     "root": true,
     "extends": [
       "@detra-lab/eslint-config",
       "@detra-lab/eslint-config/typescript"
     ],
     "parserOptions": {
       // Be sure to update the `project` value with the exact location of your `tsconfig.json` file.
       // For mono-repos, the location may be `./packages/*/tsconfig.json`.
       // Check https://typescript-eslint.io/packages/parser/#project for more guidance.
       "project": ["./tsconfig.json"]
     }
   }

   TypeScript + React

   {
     "root": true,
     "extends": [
       "@detra-lab/eslint-config",
       "@detra-lab/eslint-config/typescript"
       "@detra-lab/eslint-config/react"
     ],
     "parserOptions": {
       // Be sure to update the `project` value with the exact location of your `tsconfig.json` file.
       // For mono-repos, the location may be `./packages/*/tsconfig.json`.
       // Check https://typescript-eslint.io/packages/parser/#project for more guidance.
       "project": ["./tsconfig.json"]
     }
   }

3. Use the ESLint CLI to check supported files. Add the following line to your package.json under the scripts property:

   {
     "scripts": [
   +   "check:src": "eslint . --ignore-path .gitignore"
     ]
   }

   To support multiple file extensions, modify the script to match the correct files:

   {
     "scripts": [
   +   "check:src": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore"
     ]
   }

4. Lint your code with ESLint:

   pnpm run check:src

Extend and override specific rules by adding them to the rules property in the .eslintrc.json file.

{
  "extends": [
    "@detra-lab/eslint-config",
    "@detra-lab/eslint-config/typescript"
  ],
  "parserOptions": {
    "project": true
  },
  "env": [
    // Your environments (which contains several predefined global variables)
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  ],
  "globals": {
    // Your global variables (setting to `false` means it's not allowed to be reassigned)
    //
    // myGlobal: false
  },
  "rules": {
    // Standard rules customisation
  }
}

Help us keep the project open and inclusive. Please read and follow our Code of Conduct.

Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

Thanks to the following projects for their contributions:

• @typescript-eslint/eslint-plugin
• eslint-plugin-import
• eslint-plugin-jsdoc
• eslint-plugin-jsx-a11y
• eslint-plugin-n
• eslint-plugin-react

Apache License 2.0

Human-Made by Detra.
© 2023