visual-studio-code - 更漂亮/VSCode Eslint 奇怪的格式/语法破坏错误

Question

有时当我启动 VSCode 并保存一个 JS 文件时，一切都会变得一团糟。
例子
来自:

至:

保存时
我发现了什么:
当我更改 VSCode 用户设置(与 prettier 插件相关的内容 | 任何内容(我通常会更改 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 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 中，请转到 首选项 > 设置 > 用户设置 并添加以下几行:

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

我是 不是 使用 eslint-config-prettier 或 eslint-plugin-prettier 对我来说一切正常。

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