eslint-config-hardcore

npm install eslint-config-hardcore --save-dev

Example .eslintrc.json for a React project:

{
  "root": true,
"extends": [
    "hardcore",
    "hardcore/react",
    "hardcore/react-performance",
    "hardcore/react-testing-library",
    "hardcore/jest",
    "hardcore/fp"
  ],
"env": {
    "browser": true
  },
"overrides": [
    {
      "files": ["server/*/.js"],
"extends": ["hardcore/node"],
"env": {
        "browser": false
      }
    }
  ]
}

Example .eslintrc.json for a TypeScript React project:

{
  "root": true,
"extends": [
    "hardcore",
    "hardcore/react",
    "hardcore/react-performance",
    "hardcore/react-testing-library",
    "hardcore/jest",
    "hardcore/fp",
    "hardcore/ts"
  ],
"parserOptions": {
    "project": true
  },
"env": {
    "browser": true
  },
"overrides": [
    {
      "files": ["server/*/.ts"],
"extends": ["hardcore/node"],
"env": {
        "browser": false
      }
    }
  ]
}

Example .eslintrc.json for a Vue 3 project:

{
  "root": true,
"extends": ["hardcore", "hardcore/vue"],
"settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src/"]],
        "extensions": [".js", ".vue"]
      }
    }
  }
}

Example .eslintrc.json for a Nuxt 3 project:

{
  "root": true,
"extends": ["hardcore", "hardcore/vue"],
"settings": {
    "import/resolver": {
      "alias": {
        "map": [
          ["@", "./"],
          ["#imports", ".nuxt/imports.d.ts"]
        ],
"extensions": [".js", ".vue"]
      }
    }
  }
}

Example .eslintrc.json for a TypeScript Vue 3 project (depending on project configuration, you might want to change "project": true to "project": "tsconfig.app.json"):

{
  "root": true,
"extends": ["hardcore", "hardcore/ts", "hardcore/vue"],
"parserOptions": {
    "project": true
  },
"overrides": [
    {
      "files": [
        "vite.config.*",
        "vitest.config.*",
        "cypress.config.*",
        "playwright.config.*"
      ],
"parserOptions": {
        "project": "tsconfig.node.json"
      }
    },
{
      "files": ["src/*/__tests__/"],
"parserOptions": {
        "project": "tsconfig.vitest.json"
      }
    }
  ]
}

Example .eslintrc.json for a TypeScript Nuxt 3 project:

{
  "root": true,
"extends": ["hardcore", "hardcore/ts", "hardcore/vue"],
"parserOptions": {
    "project": true
  }
}

Configs

hardcore

Base framework-agnostic config.

| Plugin | Enabled rules | | ------------------------------------------------------------------------------------------------------------------- | ------------: | | ESLint core rules | 173 | | eslint-plugin-unicorn | 105 | | eslint-plugin-regexp | 80 | | eslint-plugin-putout | 76 | | eslint-plugin-import | 34 | | eslint-plugin-sonarjs | 86 | | HTML ESLint | 34 | | eslint-plugin-promise | 15 | | eslint-plugin-security | 12 | | eslint-plugin-secure-coding | 8 | | eslint-plugin-perfectionist | 12 | | @stylistic/eslint-plugin | 7 | | eslint-plugin-eslint-comments | 6 | | eslint-plugin-sdl | 5 | | eslint-plugin-array-func | 3 | | eslint-plugin-unused-imports | 2 | | eslint-plugin-simple-import-sort | 2 | | eslint-plugin-no-constructor-bind | 1 | | eslint-plugin-no-unsanitized | 2 | | eslint-plugin-no-use-extend-native | 1 | | eslint-plugin-ext | 1 | | eslint-plugin-no-only-tests | 1 | | eslint-plugin-compat | 1 | | eslint-plugin-json¹ | 1 | | eslint-plugin-yml¹ | 1 | | eslint-plugin-toml¹ | 1 | | Total: | 679 |

¹ json/yml/toml plugins actually include several rules, but I consider each plugin as a single "no-invalid" rule.

hardcore/ts

Config for TypeScript.

| Plugin | Enabled rules | | ---------------------------------------------------------------------------------------------------------- | ------------: | | typescript-eslint | 105 | | eslint-plugin-etc | 10 | | eslint-plugin-total-functions | 8 | | @shopify/eslint-plugin | 3 | | eslint-plugin-sonarjs | 1 | | eslint-plugin-sort-class-members | 1 | | eslint-plugin-decorator-position | 1 | | eslint-plugin-no-explicit-type-exports | 1 | | eslint-plugin-typescript-compat | 1 | | Total: | 131 |

hardcore/node

Config for Node.js.

| Plugin | Enabled rules | | ------------------------------------------------------------------------------------------------------------------- | ------------: | | eslint-plugin-sonarjs | 53 | | eslint-plugin-n | 34 | | eslint-plugin-node-security | 20 | | eslint-plugin-sdl | 1 | | Total: | 108 |

hardcore/react

Config for React.

| Plugin | Enabled rules | | ------------------------------------------------------------------------------------------------------------------------------ | ------------: | | eslint-plugin-react | 76 | | eslint-plugin-styled-components-a11y | 33 | | eslint-plugin-jsx-a11y | 34 | | eslint-plugin-storybook | 15 | | eslint-plugin-react-form-fields | 4 | | eslint-plugin-ssr-friendly | 4 | | @shopify/eslint-plugin | 3 | | eslint-plugin-react-hook-form | 3 | | eslint-plugin-react-hooks | 2 | | eslint-plugin-sonarjs | 2 | | eslint-plugin-validate-jsx-nesting | 1 | | eslint-plugin-react-prefer-function-component | 1 | | Total: | 178 |

hardcore/react-performance

Config with performance rules for React.

| Plugin | Enabled rules | | ----------------------------------------------------------------------------------------- | ------------: | | eslint-plugin-react | 4 | | eslint-plugin-react-perf | 4 | | eslint-plugin-react-usememo | 1 | | Total: | 9 |

hardcore/vue

Config for Vue 3/Nuxt 3.

| Plugin | Enabled rules | | --------------------------------------------------------------------------------------------------- | ------------: | | eslint-plugin-vue | 173 | | eslint-plugin-vuejs-accessibility | 20 | | eslint-plugin-vue-scoped-css | 12 | | eslint-plugin-sonarjs | 1 | | Total: | 206 |

hardcore/react-testing-library

Config for React Testing Library.

| Plugin | Enabled rules | | ------------------------------------------------------------------------------------------------- | ------------: | | eslint-plugin-testing-library | 24 | | Total: | 24 |

hardcore/jest

Config for Jest.

| Plugin | Enabled rules | | ----------------------------------------------------------------------------------- | ------------: | | eslint-plugin-jest | 51 | | eslint-plugin-jest-dom | 19 | | Total: | 70 |

hardcore/fp

Config for functional programming.

| Plugin | Enabled rules | | ----------------------------------------------------------------------------------------- | ------------: | | eslint-plugin-functional | 9 | | Total: | 9 |

hardcore/ts-for-js

Config for linting JavaScript with typescript-eslint.

| Plugin | Enabled rules | | ----------------------------------------------------------------------------------------------------- | ------------: | | typescript-eslint | 28 | | eslint-plugin-etc | 4 | | @shopify/eslint-plugin | 2 | | eslint-plugin-sort-class-members | 1 | | eslint-plugin-decorator-position | 1 | | eslint-plugin-typescript-compat | 1 | | Total: | 37 |

Did you know you can lint JavaScript code with typescript-eslint?

Use this config to take advantage of typescript-eslint's advanced type-aware rules (like @typescript-eslint/naming-convention and @typescript-eslint/prefer-optional-chain) without the need to switch to writing TypeScript.

1. First, you'll need to create tsconfig.json in the root of your project. You

1. Then add hardcore/ts-for-js to the overrides section in your .eslintrc

{
  "extends": ["hardcore"],
"env": {
    "browser": true
  },
"overrides": [
    {
      "files": ["*.js"],
      "extends": ["hardcore/ts-for-js"],
      "parserOptions": {
        "project": true
      }
    }
  ]
}

Changelog

License

MIT