в коде Visual Studio с ESLint и Prettier при работе с файлами .vue кажется, что я не могу получить vue / max-attribute-per-line для правильного автоматического исправления.
Например, если для vue / max-attribute-per-line установлено значение «off», и я пытаюсь добавить разрывы строк вручную, это исправляет его, чтобы каждый элемент всегда содержался не более чем на одной строке, независимо от того, 81, 120, 200 или более символов шириной. Как я могу понять, что заставляет мои элементы разметки ровно в одну строку?
Я использую 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: сначала он переформатирует, чтобы поместить все это в одну строку, а затем через полсекунды форматирование, приведенное выше. Есть идеи ? В чем причина этой странности - работает ли несколько переформаторов? Как мне выяснить, что первым нужно отключить?
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 сворачивается в одну строку, а затем разбивается на две строки через полсекунды, все из одной операции сохранения. Я ожидаю, что вместо этого он будет разбит на несколько строк. Было бы хорошо, если бы потребовалось несколько сохранений, но вместо этого первое сохранение показывает это поведение, а также каждое последующее сохранение.