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.
34 plugins. 1041 rules.
npm install eslint-config-hardcore --save-devAvailable configs:
hardcore- base framework-agnostic confighardcore/ts- additional config for TypeScripthardcore/node- additional config for Node.jshardcore/react- additional config for Reacthardcore/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-eslint
Example .eslintrc.json for a React project:
{
"extends": [
"hardcore",
"hardcore/react",
"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:
{
"extends": [
"hardcore",
"hardcore/react",
"hardcore/react-testing-library",
"hardcore/jest",
"hardcore/fp",
"hardcore/ts"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"env": {
"browser": true
},
"overrides": [
{
"files": ["server/**/*.ts"],
"extends": ["hardcore/node"],
"env": {
"browser": false
}
}
]
}Base framework-agnostic config.
¹ eslint-plugin-json actually includes 19 rules, but I consider them as one "no-invalid-json" rule.
Config for TypeScript.
| Plugin | Enabled rules |
|---|---|
| typescript-eslint | 102 |
| eslint-plugin-etc | 10 |
| @shopify/eslint-plugin | 3 |
| eslint-plugin-sort-class-members | 1 |
| eslint-plugin-no-explicit-type-exports | 1 |
| Total: | 117 |
Config for Node.js.
| Plugin | Enabled rules |
|---|---|
| eslint-plugin-node | 35 |
| Total: | 35 |
Config for React.
| Plugin | Enabled rules |
|---|---|
| eslint-plugin-react | 79 |
| eslint-plugin-jsx-a11y | 32 |
| eslint-plugin-react-perf | 4 |
| eslint-plugin-react-form-fields | 4 |
| @shopify/eslint-plugin | 3 |
| eslint-plugin-react-hook-form | 3 |
| eslint-plugin-react-hooks | 2 |
| Total: | 127 |
Config for React Testing Library.
| Plugin | Enabled rules |
|---|---|
| eslint-plugin-testing-library | 24 |
| Total: | 24 |
Config for Jest.
| Plugin | Enabled rules |
|---|---|
| eslint-plugin-jest | 46 |
| eslint-plugin-jest-dom | 11 |
| eslint-plugin-jest-formatting | 7 |
| Total: | 64 |
Config for functional programming.
| Plugin | Enabled rules |
|---|---|
| eslint-plugin-fp | 13 |
| eslint-plugin-ramda | 24 |
| Total: | 37 |
Config for linting JavaScript with typescript-eslint.
| Plugin | Enabled rules |
|---|---|
| typescript-eslint | 27 |
| @shopify/eslint-plugin | 2 |
| eslint-plugin-sort-class-members | 1 |
| Total: | 30 |
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.
- First, you'll need to create
tsconfig.jsonin the root of your project. You don't have to specify any options, just{}should do it. - Then add
hardcore/ts-for-jsto theoverridessection in your.eslintrclike this:
{
"extends": ["hardcore"],
"env": {
"browser": true
},
"overrides": [
{
"files": ["*.js"],
"extends": ["hardcore/ts-for-js"],
"parserOptions": {
"project": "./tsconfig.json"
}
}
]
}