javascript - 有人可以解释一下所有格式化工具在 VS Code 中是如何工作的吗？

Question

背景

我刚开始学习 react.js，发现很多人都在使用 prettier 和 eslint 来格式化他们的代码。但是在我根据在线指南设置自己的之后，有线的事情发生了。当我保存文件时它可以正确格式化代码，但当我手动触发格式化功能(Shift+option+F)时却不行。它将文件格式化为 eslint 会给我错误的有线方式。

这是我正在使用的 vscode 设置:

"editor.formatOnSave": true,
"[javascript]": {
    "editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": [
    "js"
],
"editor.detectIndentation": true,
"editor.tabSize": 2,

我还有一个 .eslintrc 文件

{
"extends": ["react-app", "plugin:prettier/recommended"],
}

和一个 .prettierrc 文件

{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxBracketSameLine": true
}

我在这里假设 vscode 键盘快捷键 (Shift+option+F) 没有使用与 autoFixOnSave 相同的配置(甚至不是相同的工具)。但我也不明白这些工具是如何工作和集成在一起的，以及哪个工具覆盖了哪个工具。有人可以帮忙吗？

Answer 1

为什么要为 prettier 禁用 js？

你知道 Prettier 可以与 ESLint 完美集成吗？

看看这篇文章:Prettier: Integrating with ESLint

在您的用户/工作区设置中，只需添加:

  "files.autoSave": "off",
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  },
  "eslint.options": {
    "extensions": [".js", ".jsx"]
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

此外，建议在您的根文件夹中有一个 .editorconfig:

# http://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

最后，在您的 .eslintrc 文件中，添加:

"extends": ["react-app", "plugin:prettier/recommended", "prettier/react"],

查看 eslint-plugin-react用于验证 react 。