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

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

对我来说问题是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 Code 中，请转到首选项 > 设置 > 用户设置并添加以下几行：

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

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

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