Не удается получить правильный автоформат при сохранении в коде Visual Studio с помощью ESLint и Prettier

в 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 будет сжиматься до одной строки, а затем переходить на две строки через полсекунды позже, все из одной операции сохранения. Я ожидаю, чтобы он разложил его на многие строки. Было бы хорошо, если бы потребовалось несколько сейвов, но вместо этого первое сохранение отображает это поведение, а также каждое последующее сохранение.

Ответы

  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx" ]
  },
  "eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "javascriptreact", "autoFix": true }
  ]

  "eslint.options": {
    "extensions": [".html", ".js", ".vue", ".jsx"]
  },
  "eslint.validate": [{
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ]