The most strict (yet practical) ESLint config.
Aims to include as many plugins and rules as possible to make your code extremely consistent and robust.
53 plugins. 1341 rules.
npm install eslint-config-hardcore --save-dev
Available configs:
hardcore
- base framework-agnostic confighardcore/ts
- additional config for TypeScripthardcore/node
- additional config for Node.jshardcore/react
- additional config for Reacthardcore/react-performance
- additional React config with performance ruleshardcore/vue
- additional config for Vue 3/Nuxt 3hardcore/react-testing-library
- additional config for React Testing Libraryhardcore/jest
- additional config for Jesthardcore/fp
- additional config for functional programminghardcore/ts-for-js
- additional config for linting JavaScript with
typescript-eslintExample .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
}
}
hardcore
Base framework-agnostic config.
¹ 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-sonar | 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-sonar | 53 |
eslint-plugin-n | 34 |
eslint-plugin-sdl | 1 |
Total: | 88 |
hardcore/react
Config for React.
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 | 168 |
eslint-plugin-vuejs-accessibility | 20 |
eslint-plugin-vue-scoped-css | 12 |
eslint-plugin-sonar | 1 |
Total: | 201 |
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 | 50 |
eslint-plugin-jest-dom | 11 |
eslint-plugin-jest-formatting | 7 |
Total: | 68 |
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.
tsconfig.json
in the root of your project. You
don't have to specify any options, just {}
should do it.hardcore/ts-for-js
to the overrides
section in your .eslintrc
like this:{
"extends": ["hardcore"],
"env": {
"browser": true
},
"overrides": [
{
"files": ["*.js"],
"extends": ["hardcore/ts-for-js"],
"parserOptions": {
"project": true
}
}
]
}