Question

我在一个React项目中使用VS Code，并且已将VS Code配置为保存时格式化并需要“ prettierconfig”进行格式化。我还启用了ESLint插件。

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

下面的代码按格式显示在VS代码中的 eslint（indent）弯曲警告。保存后（ Ctrl + S ），有些解析，但有些解析。

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

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

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

有人知道什么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格式器，而只需使用eslint格式器并在eslintrc文件中添加漂亮的选项。 Here's an example

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

// .eslintrc.json

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

Answer 2

就像其他发布的建议一样，我使用eslint为我运行更漂亮的设置。我已经为我的js / ts文件禁用了更漂亮的功能，所以我知道这不是问题。事实证明，它是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"
  }
}

这是我的其余设置，仅供参考。

我的用户settings.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
      }
    ]
  }
}

使用ESLint

2 个答案: