Prettier自动保存(esbenp.Prettier vscode)与更漂亮/更漂亮规则冲突

Question

我想将ESLint与Prettier一起使用。一切都很好，只是当我按Ctrl+S保存文件时，Prettier以与ESLint中的prettier/prettier规则不兼容的方式更改文件。

.vscode/settings.json:的内容

{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 70,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}

.eslint.json:的内容

{
"env": {
"browser": true,
"es2021": true
},
"extends": ["google", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": ["error"]
}
}

我知道如果我从settings.json中删除"editor.formatOnSave": true,，所有的问题都会得到解决，但我不喜欢保存的格式，因为代码行太长，我喜欢把长行分成多行。

Answer 1

问题是Prettier使用了70个字符的printWidth，但ESlint使用了80个字符的max-len
您应该修改其中一个以保持它们的同步，例如，您可以在settings.json中更改printWidth，使Prettier与ESlint("prettier.printWidth": 80(兼容
./vscode/settings.json:的内容

{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}