Prettier/VSCode Eslint 怪异 format/syntax 破坏 bug

Question

有时当我启动 VSCode 并保存一个 JS 文件时，一切都变得一团糟。

例子

来自：到：保存时

我发现了什么：

当我更改 VSCode 用户设置时（与更漂亮的插件相关的东西 | 任何东西（我通常会更改 prettier.eslintIntegration 但可能是设置中的任何更改都会解决它））保存时停止中断。

可能的相关环境详细信息

// Part of .eslintrc
{
    parser: 'babel-eslint',
    extends: ['airbnb', 'prettier'],
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': 'error'
    }
    ...
}

// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always

// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false

// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",

VSCode 扩展嫌疑人：

dbaeumer.vscode-eslint
esbenp.prettier-vscode

如需提供其他（调试）信息，请拍

Answer 1

我在 VS Code 中同时使用 ESLint 和 Prettier 时遇到了类似的问题。在尝试了几十种方法后，以下配置对我来说是可行的。

我的机器上全局安装了 ESLint 和 Prettier。

我正在使用这些扩展程序：

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

我的 .eslintrc.json 文件如下所示：

{
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
    "sourceType": "module"
},
"rules": {
    "indent": ["error", 4],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-console": "off"
}

}

在您的 VS 代码中，请转至 首选项 > 设置 > 用户设置 并添加以下行：

"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true

我不使用eslint-config-prettier或eslint-plugin-prettier，一切正常。

重要提示：请确保您没有安装任何其他自动格式化程序（除了 Prettier）扩展。

Answer 2

我在 VSCode 更新后遇到了这个问题。我降级到以前的版本，Prettier 又正常工作了。

Answer 3

对我来说，问题是 Beautify 扩展在 .js 文件中执行格式化，它不知道如何处理 JSX 语法。

解决方案是阻止 Beautify 格式化 Javascript 个文件。

为此，您需要将以下设置添加到 VSCode 中的用户设置（可使用 ctrl+shift+p 并选择 Preferences: Open User Settings):

"beautify.ignore": [
    "**/*.js"
]

Answer 4

同时使用 VSCode、Prettier 和 ESLint 时，您可能会有不同的冲突规则。

在 VSCode 和 ESLint 中手动设置规则可能没有效果，但请先尝试。此外，Prettier 设置可能会保存在其自己的配置文件中 - .prettierrc 或类似的文件。

如果没有效果，那么检查这些：

在开发依赖中是否安装了正确的版本[eslint-config-prettier][1]

如果您使用了 React/Vue/other-3d-party 工具或源，您必须检查您使用的不是 @vue/eslint-config-prettier 版本（参见 package.json 和 lock 文件）
在 eslintrc 文件中有 extends: ['prettier']。与之前的检查相同，没有指定库依赖版本。

Answer 5

我的问题是我在 VS Code 中同时安装了 Prettier 和 JS-CSS-HTML-formatter。一旦我卸载了 JS-CSS-HTML-formatter，问题就消失了。

Answer 6

我遇到了同样的问题。我卸载了扩展，它解决了问题。

Prettier/VSCode Eslint 怪异 format/syntax 破坏 bug

Prettier/VSCode Eslint weird format/syntax breaking bug

eslint

visual-studio-code

prettier

例子

我发现了什么：

可能的相关环境详细信息