更漂亮/VSCode Eslint格式/语法中断错误

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代码中使用ESLint和更漂亮的代码也有类似的问题。在尝试了几十种方法之后，下面的配置对我来说是有效的。

ESLint和更漂亮的安装在我的机器上。

我正在使用这些扩展：

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更漂亮的或者更漂亮的，一切都对我来说很好。

重要:请确保您没有安装任何其他自动格式化程序(除了漂亮的)扩展。

Answer 2

当使用VSCode、更漂亮和ESLint的同时，您可能有不同的冲突规则。

在VSCode和ESLint中手动设置规则可能没有任何效果，但是尝试执行first。另外，更漂亮的设置可以保存在它自己的配置文件中-- .prettierrc或其他类似的设置。

如果没有效果，然后检查以下内容：

1. 在dev依赖项中，安装的[eslint-config-prettier][1]版本是正确的。 如果您使用了React/Vue/其他3D派对工具或源，则必须检查是否使用的不是@vue/eslint-config-prettier版本(请参阅package.json和lock文件)。
2. 在eslintrc文件中有extends: ['prettier']。与上一次检查一样，没有指定任何库依赖版本。

Answer 3

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