@20i/eslint-config

eslint-config-20i

Usage

eslint.config.js

import baseConfig from "@20i/eslint-config"
import reactConfig from "@20i/eslint-config/react"
import pluginQuery from "@tanstack/eslint-plugin-query"
import tsEslint from "typescript-eslint"

export default tsEslint.config(
  {
    // global ignores
    ignores: ["**/generated/**/*"],
  },
  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    extends: [
      // 20i configs
      ...baseConfig,
      ...reactConfig,
      // other configs
      ...pluginQuery.configs["flat/recommended"],
    ],
    // for type aware linting
    languageOptions: {
      parserOptions: {
        projectService: true,
      },
    },
    // custom rules
    rules: {
      "react/prop-types": "off",
      "no-debugger": "warn",
    },
  },
  // scoped rules
  {
    files: ["./packages/app/src/**/*.{js,jsx,ts,tsx}"],
    rules: {
      "@typescript-eslint/switch-exhaustiveness-check": "error",
    },
  }
)

prettier.config.js

We can share prettier configs now! 🎉

import sharedConfig from "@20i/eslint-config/prettier.config"
/**
 * @see https://prettier.io/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  ...sharedConfig,
  // override any shared config here
  arrowParens: "avoid",
}

export default config

Configure VS Code

• Make sure these extensions are installed:

  • ESlint
  • Prettier - Code formatter
  • Install from the links above or via terminal:

  code --install-extension dbaeumer.vscode-eslint && \
  code --install-extension esbenp.prettier-vscode
  

• Add the following to your global ~/.vscode/settings.json file:

  {
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
    },
    // format on save for everything, but what prettier will handle through eslint
    "editor.formatOnSave": true,
    "[javascriptreact]": {
      "editor.formatOnSave": false,
    },
    "[javascript]": {
      "editor.formatOnSave": false,
    },
    "[typescript]": {
      "editor.formatOnSave": false,
    },
    "[typescriptreact]": {
      "editor.formatOnSave": false,
    },
  }
  

• Restart VS Code

References

Inspired heavily by eslint-config-wesbos

Legacy docs (config < 4, eslint < 9)

Auto Install

Use mrm to install all dependencies and add config files.

npx mrm eslint --preset @20i/mrm-preset

Manual Install

• Install dev dependencies:

  yarn add -D eslint prettier typescript @20i/eslint-config
  # or
  npm i -D eslint prettier typescript @20i/eslint-config
  

• Create a new file, .eslintrc.js, in the directory of your project.

• Add the following code to the file.

  module.exports = {
    extends: ["@20i/eslint-config"],
    parserOptions: {
      project: ["./tsconfig.eslint.json"],
    },
    ignorePatterns: [],
  }
  

  ⚠️ For React projects, set @20i/eslint-config/react instead.

• Add a special tsconfig.json file to your project: tsconfig.eslint.json

  {
    // extend your base config to share compilerOptions, etc
    "extends": "./tsconfig.json",
    "compilerOptions": {
      // ensure that nobody can accidentally use this config for a build
      "noEmit": true,
    },
    "include": ["**/*", "**/.*"],
  }
  

• Add the following to your .prettierrc file:

  {
    "endOfLine": "auto",
    "semi": false,
    "trailingComma": "es5",
    "plugins": ["prettier-plugin-organize-imports"]
  }