12

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

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

4

6 回答 6

8

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

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

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

"beautify.ignore": [
    "**/*.js"
]
于 2018-05-11T20:18:37.780 回答
5

我在 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 除外）扩展。

于 2018-04-10T15:24:59.543 回答
1

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

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

如果没有效果，然后检查这些：

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

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

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

于 2019-09-05T21:44:30.947 回答
0

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

于 2018-05-09T05:16:01.343 回答
0

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

于 2020-10-05T01:16:16.513 回答
0

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

于 2020-03-24T02:46:21.140 回答