Prettier / VSCode Eslint奇怪的格式/语法破解bug

Question

有时当我启动VSCode并保存一个JS文件时，一切都搞砸了。

例如

自： here 至： 保存

我发现了什么：

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

可能的相关环境细节

dbaeumer.vscode-eslint
esbenp.prettier-vscode

VSCode Extension怀疑：

char *phrase_info(rep_info info) {
      return info.phrase; //since info is not a pointer, use the '.' accessor
}

如果需要提供任何其他（调试）信息，请拍摄。

Answer 1

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

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

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

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

Answer 2

我在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代码中，请转到偏好＆gt;设置＆gt;用户设置并添加以下行：

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

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

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

Answer 3

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

Answer 4

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

在VSCode和ESLint中手动设置规则可能没有效果，但是请先先完成。另外，漂亮的设置可能保存在自己的配置文件中-.prettierrc或类似的文件中。

如果无效，请然后检查以下内容：

1. 在开发人员依赖项中安装了正确的版本[eslint-config-prettier][1]

   如果您使用过React / Vue / other-3d-party工具或源，则必须检查您使用的不是@vue/eslint-config-prettier版本（请参阅package.json和lock文件）

2. 在eslintrc文件中有extends: ['prettier']。与之前的检查相同，没有指定依赖库的版本。

Answer 5

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

Answer 6

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