有人可以解释所有格式化工具在VS代码中的工作方式吗?

Question

背景

我只是开始学习react.js，发现很多人使用更漂亮和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键盘shorcut（Shift Option F）不使用与AutoFixonSave相同的配置（甚至不是同一工具）。但我也不了解这些工具如何工作和集成在一起，哪个工具覆盖了哪一个。一个人可以帮助吗？

Answer 1

为什么要为Prettier禁用js？

您知道Prettier可以与Eslint完美地集成吗？

看这篇文章：漂亮：与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

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

编辑：我通常在VSCODE中禁用默认的JavaScript格式化格式，因为它可能与我的ESLINT规则发生冲突，这使Eslint无法正确格式化我的代码。

eslint具有自己的修复命令，该命令在我的设置上没有热键，但我有eslint.autoFixOnSave: true。

Prettier不会将内部Vscode格式命令挂钩。它还具有自己的命令设置。为大多数可用的扩展程序运行更漂亮的格式的默认热键是CMD + Shift + P -> Format Document，但如果editor.formatOnSave是true。