使用 ESLint 进行 VS Code 项目代码格式化

Question

我正在将 VS Code 用于 React 项目，并将 VS Code 配置为保存时格式化并需要“prettierconfig”进行格式化（Prettier：需要来自 VSCode Prettier扩展的配置设置）。我还启用了 ESLint 插件。

这似乎意味着我的项目的.prettierrc配置文件驱动保存时的格式，而.eslintrc.json提供 linting 警告。但至少在一种情况下（如下），一些格式问题在保存时仍未解决。

下面的代码按格式显示VS Code 中的eslint(indent)波浪线警告。保存（Ctrl+ S）后，有些得到解决，但有些没有。

具体来说，第一个错误的缩进间距<div>在保存时得到修复，并且eslint(indent)警告消失。但是，后面的eslint(indent)警告在保存时不会得到解决。但是，当我（在 Windows 上）单击Ctrl+ Shift+ P，然后找到并单击“ESLint：修复所有可自动修复的问题”时，它们确实得到了解决。

当我再次保存文件时，这些更改将被恢复，并且警告再次出现。

因此，“保存时格式化”应用的格式与“ESLint：修复所有可自动修复的问题”不同。有没有办法调和这些？我希望所有eslint （缩进）问题都能在保存时解决。

有谁知道什么 ESLint 设置驱动“ESLint：修复所有可自动修复的问题”？

const MyModule = () => {
  ...   

  return (
    // "eslint(indent)" warning on next line gets resolved on save
  <div>
      {!menus.find(function(permission) {
        return permission.level === 'ADMIN';
      }) ? (
        // "eslint(indent)" warnings below DO NOT get resolved on save
        // ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
        // ... then they reappear on save
        <div>
          <Redirect to="/" />
        </div>
      ) : (
        <div>
          <Results />
        </div>
      )}
    </div>
  );
};

export default MyModule;

我的 .eslintrc.json 内容：

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "no-console": 1,
    "no-control-regex": 0,
    "indent": ["warn", 2],
    "quotes": ["warn", "single"],
    "space-in-parens": 1,
    "prefer-destructuring": 0,
    "prefer-const": 0
  },
  "parser": "babel-eslint",
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

我的.prettierrc：

{
  "useTabs": false,
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true
}

Answer 1

就像其他帖子建议的那样，我使用 eslint 对我来说运行得更漂亮的设置。我已经为我的 js/ts 文件禁用了 prettier，所以我知道这不是问题。事实证明，这是 vscode 的内置格式化程序，关闭它editor.formatOnSave解决了问题。

我的项目的settings.json。这仅禁用打字稿文件的格式化程序。只要您启用了 eslint 自动修复设置，Eslint 仍然会修复您的文件。

{
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}

您可以将默认格式化程序设置为 eslint，而不是关闭 formatOnSave：

{
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

以下是我的其余设置仅供参考。

我的用户设置.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "markdown"
  ]
}

.eslintrc

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "tsconfig.json",
    "warnOnUnsupportedTypeScriptVersion": false
  },
  "plugins": ["@typescript-eslint", "jest", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "tabWidth": 2,
        "useTabs": false,
        "semi": false,
        "singleQuote": true,
        "trailingComma": "all",
        "printWidth": 110
      }
    ]
  }
}

Answer 2

不要同时使用 prettier 和 eslint 格式化程序，只需使用 eslint 格式化程序并在 eslintrc 文件中添加 prettier 选项即可。这是一个例子

https://prettier.io/docs/en/integrating-with-linters.html

// .eslintrc.json

...
"rules": {
 "prettier/prettier": [
    1,
    {
      "useTabs": false,
      "printWidth": 120,
      "tabWidth": 2,
      "singleQuote": true
    }
  ]
}
...