Can I make Eslint format upon my formatting rules while linting upon extensions?

Question

I want Eslint to format my codes not upon extensions(that I specified in extends property in .eslintrc) but my custom formatting rules, while it still lints and notifies me that there are some problematic codes according to the extensions(like unused variables rather than code formatting).

For it, I could use eslint-plugin-prettier. But as it was stubborn enough not to support breakBeforeElse rule, I'm using flexible prettier, but its dependencies are broken(like npm warnings), and that's why I want to make the same thing just by customizing .eslintrc or in some other way.

How can I do this?

Answer 1

From the version 2.2.3(prelease) of dbaeumer.vscode-eslint, you can opt-in what rules Eslint on VSCode will apply on formatting.

eslint.codeActionsOnSave.rules

controls the rules which are taken into consideration during code action on save execution. If not specified all rules specified via the normal ESLint configuration mechanism are consider. An empty array results in no rules being considered. If the array contains more than one entry the order matters and the first match determines the rule's on / off state. This setting is only honored under the following cases:

• eslint.codeActionsOnSave.mode has a different value than problems
• The ESLint version used is either version 8 or higher or the version is 7.x and the setting eslint.useESLintClass is set to true (version >= 8 || (version == 7.x && eslint.useESLintClass)).

Unfortunately there is an issue, and command editor.action.formatDocument won't follow this opt-in when you extends plugin:@typescript-eslint/recommended, so you need to make setting editor.formatOnSave false.

Your .vscode/settings.json should look like:

{
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  },
  // "editor.formatOnSave": true, // this will currently make "eslint.codeActionsOnSave.rules" setting not work
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.format.enable": true,
  "eslint.useESLintClass": true,
  "eslint.codeActionsOnSave.rules": [
    // any same key name in `.eslintrc.json` is valid here
    "quotes",
    "@typescript-eslint/no-extra-parens",
    ...,
  ],
}

(you can use regex-like grammars inside eslint.codeActionsOnSave.rules)

And your .eslintrc.json should look like:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    ...
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    // formatting rules
    "quotes": [
      "error",
      "double",
      {
        "allowTemplateLiterals": true
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "**/*.ts?(x)"
      ],
      "rules": {
        "@typescript-eslint/no-extra-parens": [
          2,
          "all",
          {
            "ignoreJSX": "all"
          }
        ]
      }
    }
  ]
}