@detra-lab/eslint-config NPM

ESLint Config

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

ESLint Config

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.

Why use our configuration?

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.

Installation and usage

Install the required dependencies:

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

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:

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

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

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

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"
  ]
}
```
Lint your code with ESLint:
```
pnpm run check:src
```

Extending the configuration

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

Integration with IDEs/editors

Add the following code to your .vscode/settings.json file:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
},
"eslint.validate": ["javascript"] // Add the types of files you want to validate (e.g. "typescript", "javascriptreact", "typescriptreact"])

Code of Conduct

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

Contributing

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.