в Visual Studio Code с ESLint и Prettier при работе с файлами.vue кажется, что я не могу правильно получить правильные настройки vue/max-attributes-per-line.
Например, если vue/max-attributes-per-line настроено на "off", и я пытаюсь добавить разрывы строк вручную, он исправляет его, чтобы каждый элемент имел не более одной строки, независимо от того, является ли оно 81, 120, 200 или более символов. Как я могу выяснить, что заставляет мои элементы разметки на одну строку?
Я использую ESLint версии 5.1.0 и Visual Studio Code (без более подробного расширения) с Prettier 1.14.2.
Вот пример в.vue file--, я не могу сделать это на нескольких строках независимо от того, что я делаю, когда '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 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 на многие строки. Итак, любые идеи о том, как я вставляю VS Code в форму? Вышеуказанные настройки не помогли, но я не понимаю, как узнать, что мешает. Есть идеи?
Чтобы подчеркнуть, когда я сохраняю в VS Code, длинный элемент HTML будет сжиматься до одной строки, а затем переходить на две строки через полсекунды позже, все из одной операции сохранения. Я ожидаю, чтобы он разложил его на многие строки. Было бы хорошо, если бы потребовалось несколько сейвов, но вместо этого первое сохранение отображает это поведение, а также каждое последующее сохранение.