Question

背景

我刚开始学习react.js，发现很多人都在使用漂亮和雅致的代码格式。但是，当我根据在线指南设置好自己的设备后，事情就发生了。保存文件时，它可以正确格式化代码，但是当我手动触发格式化功能（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键盘的shorcut（Shift + option + F）与autoFixOnSave使用的配置不同（甚至使用的工具也不相同）。但是我也不明白这些工具是如何工作和集成在一起的，以及哪个工具会覆盖哪个工具。有人可以帮忙吗？

Answer 1

为什么要禁用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以验证反应。

Answer 2

我不是在查看VS代码的Mac版本，但我认为热键应该是Shift + Option + F

编辑：我通常会在vscode中禁用默认的JavaScript格式化程序，因为它可能与我的eslint规则冲突，这使eslint无法正确格式化我的代码。

ESLint有它自己的Fix命令，该命令在我的设置中没有热键，但是我有eslint.autoFixOnSave: true。

Prettier不会插入内部vscode格式命令。它还具有自己的命令设置。对于大多数可用的更漂亮的扩展名，运行更漂亮的格式的默认热键为CMD + Shift + P -> Format Document，但是如果editor.formatOnSave为true，则会在保存时触发。

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

2 个答案: