在处理.vue文件时使用ESLint和Prettier的Visual Studio代码中,我似乎无法正确地自动修复vue / max-attributes-per-line .
例如,将vue / max-attributes-per-line设置为'off',并尝试手动添加换行符,将其更正为始终使每个元素不超过一行,无论它是否为81,120,200或更多字符宽 . How can I figure out what is forcing my markup elements onto exactly one line?
我正在使用ESLint版本5.1.0和Visual Studio代码(没有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时,它似乎重新格式化了两次:首先它重新格式化以将其全部放在一行上,然后半秒后,上面的格式化结果 . Any ideas ?造成这种奇怪的原因是 - 有多个重组器正在运行吗?我怎么弄清楚第一个禁用它的是什么?
VS Code工作区设置:
{
"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模板元素分成多行 . So any ideas how I whip VS Code into shape? 以上设置没有帮助,但我不知道甚至知道什么是干扰 . 有任何想法吗?
要强调的是,当我在VS Code中保存时,一个长的HTML元素将折叠为一行,然后在半秒后分成两行,所有这些都来自一个保存操作 . 我期待它把它分解成许多行 . 如果它需要多次保存就可以,但是第一次保存会显示此行为以及每次后续保存 .
2 回答
简短的回答:我需要: "editor.formatOnSave": false, "javascript.format.enable": false .
我终于找到了神奇的设置组合,感谢this thread from Wes Bos on Twitter . 我怀疑我似乎有多个冲突的格式化程序 . 虽然我不确定它们到底是什么,但是我能够关闭所有的东西,但是如下所示:
在VS Code设置中,我需要:
在.eslintrc.js中,我可以使用原始帖子中的设置,然后根据需要更改“vue / max-attributes-per-line” . 然后VS Code的ESLint插件将在每次保存时一步一步地格式化代码,就像kenjiru写的那样 . 最后一个障碍:HMR不会接受这些更改,因此从头开始重建 .
使用
'vue/max-attributes-per-line': 'off'
时,规则被禁用,因此VSCode不会尝试在自动保存上修复长行 . 正如预期的那样,应用了其他拼写修复 .使用
'vue/max-attributes-per-line': 1
VSCode修复每个保存只有一个错误 . 这是vscode-eslint的已知限制vscode-eslint只进行一次传递,以便将插件生成的编辑量保持在最低限度 . 目标是尽可能多地保留文件中的标记(如断点) .
VSCode的所有插件的时间限制为1秒,以计算保存时的更改集 . 如果其中一个插件导致其他插件连续运行3次,则会被禁用 .
eslint --fix
在循环中运行所有规则,直到没有更多的linting错误 . 我认为它最多可以有10次迭代 .有关详细信息,请参阅以下链接
我已经创建了一个最小的设置来演示这个问题: