漂亮/ VSCode Eslint奇怪的格式/语法破坏错误 [英] Prettier/VSCode Eslint weird format/syntax breaking bug

问题描述

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

Sometimes when I startup VSCode and I save an JS file, everything gets messed up.

来自：
< a href = https://i.stack.imgur.com/qw6vU.png rel = noreferrer>
收件人：

保存

From: To: On save

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

When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.

// 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扩展嫌疑人：

VSCode Extension suspects:

dbaeumer.vscode-eslint
esbenp.prettier-vscode

如果有其他（调试）信息

If any other (debugging) information needs to be provided, please shoot.

推荐答案

我在VS Code中一起使用ESLint和Prettier时遇到了类似的问题。在尝试了数十种方法之后，以下配置对我有用。

I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.

ESLint和Prettier已全局安装在我的计算机上。

ESLint and Prettier are installed globally on my machine.

我正在使用以下扩展名：

I am using these extensions:

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

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

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

My .eslintrc.json file looks like this:

{
"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代码中，请转到首选项>设置>用户设置，并添加以下几行：

In your VS Code, please go to Preference > Settings > User Settings and add the following lines:

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

我不是使用eslint-config-prettier或eslint-plugin-prettier，一切对我来说都很好。

I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.

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

Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.

这篇关于漂亮/ VSCode Eslint奇怪的格式/语法破坏错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！