EvgenyOrekhov / eslint-config-hardcore

The most strict (yet practical) ESLint config. 53 plugins. 1342 rules. React, Vue, Node, and pure JS/TS.
https://www.npmjs.com/package/eslint-config-hardcore
MIT License
423 stars 13 forks source link
code-quality config eslint eslint-config eslintconfig hardcore shareable-configs

eslint-config-hardcore

npm code style: prettier

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.

Usage

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

Available configs:

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 103
eslint-plugin-regexp 80
eslint-plugin-putout 76
eslint-plugin-sonar 51
eslint-plugin-import 33
eslint-plugin-sonarjs 31
HTML ESLint 22
eslint-plugin-promise 13
eslint-plugin-security 12
eslint-plugin-perfectionist 7
@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: 645

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

Plugin Enabled rules
eslint-plugin-react 74
eslint-plugin-styled-components-a11y 33
eslint-plugin-jsx-a11y 34
eslint-plugin-storybook 14
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-sonar 2
eslint-plugin-validate-jsx-nesting 1
eslint-plugin-react-prefer-function-component 1
Total: 175

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.

  1. First, you'll need to create tsconfig.json in the root of your project. You don't have to specify any options, just {} should do it.
  2. Then add 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
      }
    }
  ]
}

Changelog

License

MIT