【问题标题】：Prettier/VSCode Eslint weird format/syntax breaking bugPrettier/VSCode Eslint 奇怪的格式/语法破坏错误
【发布时间】：2018-08-19 07:31:57
【问题描述】：

有时当我启动 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

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

【问题讨论】：

标签： visual-studio-code eslint prettier

【解决方案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 Code 中，请转到 Preference > Settings > User Settings 并添加以下行：

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

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

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

【讨论】：

谢谢。 VSCode 用户设置的更改为我解决了这个问题。

【解决方案2】：

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

【讨论】：

我尝试了数千种不同的设置，但 Prettier 仍然无法处理 scss 文件。但它与 ESLint 一起完美地适用于 JavaScript 文件。有时我认为那些认为 Prettier 正在处理 scss 文件的人忘记了他们也安装了 Beautify，这是格式化他们的 scss 文件的一个。

【解决方案3】：

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

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

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

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

【讨论】：

但是如果 Prettier 已经安装设置好了，我们不应该卸载 Beautify 吗？
@user1941537 Beautify 不仅可以格式化.js，因此通常我们希望保留它以处理所有其他文件类型
嗯，我们不是用 ESLint 处理 JS 文件，用 Prettier 处理其他文件吗？如果这是真的，为什么我们还需要 Beautify 插件？

【解决方案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']。与之前的检查相同，没有指定依赖库的版本。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：