@lego/eslint-config-typescript

LEGO shareable eslint config for js projects

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@lego/eslint-config-typescript
9.4.12 years ago3 years agoMinified + gzip package size for @lego/eslint-config-typescript in KB

Readme

@lego/eslint-config-typescript

Installation

Install this config package:
$ npm i -D @lego/eslint-config-typescript

Important Note

If your editor supports automatic import sorting and culling of unused imports, prettier might clash with that, especially in vscode.
read more on: - https://github.com/prettier/prettier-vscode/issues/716 - even though explicit ordering for code actions in vscode is a feature, it doesn't work fully: https://code.visualstudio.com/updates/v144#explicit-ordering-for-code-actions-on-save
therefore ensure that your vscode has the following combination of flags enabled:
{
  ...
  // Editor
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
    "source.organizeImports": false
  },
  "editor.formatOnSave": false,
  ...
}

Usage

Extend your eslint.json, and make sure @lego/eslint-config-typescript has been added.
{
  "extends": ["@lego/eslint-config-typescript"]
}

with TypeScript & React & Prettier:
{
  "extends": [
    "@lego/eslint-config-typescript",
    "@lego/eslint-config-react",
    "@lego/eslint-config-prettier"
  ]
}

Overriding Rules

With the above eslint.json configuration example, you can still use or override already defined rules as such:
{
  "extends": [
    "@lego/eslint-config-typescript",
    "@lego/eslint-config-react",
    "@lego/eslint-config-prettier"
  ],
  "rules": {
    // eslint-config rules
    "camelcase": "warn",

    // @typescript-eslint/eslint-plugin rules
    "@typescript-eslint/no-useless-constructor": "error",

    // eslint-plugin-react rules
    "react/jsx-child-element-spacing": "error",

    // eslint-plugin-react-hooks rules
    "react-hooks/exhaustive-deps": "warn",

    // eslint-plugin-prettier rules
    "prettier/prettier": [
      "error",
      {
        "singleQuote": false
      }
    ]
  }
}

It's recommended to inspect the defined rule's configurations where the reasoning for the configuration lives. If a configuration could benefit more than just the project you're working on, feel free to create a pull request.