eslint-config-mckelveygreg

Usage

eslint.config.js

import baseConfig from "@mckelveygreg/eslint-config"
import reactConfig from "@mckelveygreg/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: [
      // mckelveygreg 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 "@mckelveygreg/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

1. 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

2. 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,
     },
   }

3. Restart VS Code

References

Inspired heavily by eslint-config-wesbos

---