在使用 ESLint 和 Prettier 的 Visual Studio Code 中处理 .vue 文件时,似乎我无法正确自动修复 vue/max-attributes-per-line。
例如,将 vue/max-attributes-per-line 设置为“关闭”,我尝试手动添加换行符,它会更正它以始终让每个元素不超过一行,无论它是 81、120 , 200 或更多字符宽。 我怎样才能弄清楚是什么迫使我的标记元素恰好排在一行上?
我正在使用 ESLint 5.1.0 版和 Visual Studio Code(没有 Prettier 扩展)和 Prettier 1.14.2。
这是 .vue 文件中的示例——无论我做什么,当 'vue/max-attributes-per-line': 'off'
时,我都不能让它在多行上运行。每次我保存时,它都会强制将一长串标记全部放在一行上。
<template>
<font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>
如果我设置 'vue/max-attributes-per-line': 2
,它的格式就像这样,有一个换行符(这也是完全错误的)。
<font-awesome-icon
v-if="statusOptions.icon"
:icon="statusOptions.icon"
:spin="statusOptions.isIconSpin"
:class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>
如果我尝试手动重新格式化它,它只会在我保存时恢复到上面的状态。
此外,当我按下 Ctrl+S 时,它似乎重新格式化了两次:首先它重新格式化以将所有内容放在一行中,然后半秒后上面的格式结果。有什么 想法 吗?是什么导致了这种怪异——是否有多个重新格式化程序在运行?我如何弄清楚第一个禁用它的是什么?
VS 代码工作区设置:
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"[vue]": {
"editor.tabSize": 2
},
"[csharp]": {
"editor.tabSize": 4
},
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.referencesCodeLens.enabled": true,
"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"vue-html",
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.rulers": [
80,
100
]
}
.eslintrc.js:
module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
jest: true
},
globals: {
expect: true
},
extends: [
'prettier',
'plugin:vue/recommended', // /base, /essential, /strongly-recommended, /recommended
'plugin:prettier/recommended', // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier.
'eslint:recommended'
],
plugins: ['vue', 'prettier'],
rules: {
'vue/max-attributes-per-line': 'off',
'prettier/prettier': [ // customizing prettier rules (not many of them are customizable)
'error',
{
singleQuote: true,
semi: false,
tabWidth: 2
},
],
'no-console': 'off'
}
}
在不更改任何设置的情况下, ESLint --fix
确实格式正确——将我所有的 .vue 模板元素正确地分成多行。 那么我有什么想法可以让 VS Code 成形吗? 上面的设置没有帮助,但我什至不知道是什么在干扰。有任何想法吗?
需要强调的是,当我在 VS Code 中保存时,一个长的 HTML 元素将折叠成一行,然后在半秒后分成两行,所有这些都来自一次保存操作。我期待它而不是将它分成多行。如果需要多次保存就没问题,但第一次保存以及随后的每次保存都会显示此行为。
原文由 Patrick Szalapski 发布,翻译遵循 CC BY-SA 4.0 许可协议
简短回答:我需要:
"editor.formatOnSave": false, "javascript.format.enable": false
。多亏 Wes Bos 在 Twitter 上的这个帖子,我终于找到了神奇的设置组合。我怀疑似乎有多个相互冲突的格式化程序是正确的。虽然我不确定它们到底是什么,但我能够关闭除 eslint 以外的所有功能,如下所示:
在 VS Code 设置中,我需要:
在 .eslintrc.js 中,我可以使用原始帖子中的设置,然后还可以根据需要更改“vue/max-attributes-per-line”。然后 VS Code 的 ESLint 插件将在每次保存时一次一步地格式化代码,就像 kenjiru 写的那样。最后一个障碍:HMR 不会接受这些更改,所以从头开始重建。