ESLint запускается красивее дважды, если конфигурация в .eslintrc и .prettierrc

Question

Я пытаюсь решить проблему с форматированием при сохранении в VSCode. У меня красивее не установлено как отдельное расширение. У меня установлен eslint. Я работаю с файлами машинописных текстов.

В моем редакторе я вижу предупреждение о конечных запятых, и когда я нажимаю "Сохранить", я вижу, что конечная запятая исчезает, а затем появляется снова. Я понял, что в моем файле.eslintrc.js для конечной запятой установлено значение "none", а в файле.prettierrc.js - значение "always". Они оба внизу.

У меня также установлен Vetur, но я думаю, что у меня работает только vetur при сохранении, потому что в моем файле vsconfig это указано:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

Но prettier определенно пробегают дважды. Есть ли другие настройки, которые мне следует искать? Или eslint запускается красивее один раз для каждого найденного набора конфигураций.

Вот мой файл eslintrc:

module.exports = {
  root: true,

  env: {
    node: true,
    browser: true
  },

  extends: [
    'plugin:vue/strongly-recommended',
    '@vue/airbnb',
    '@vue/typescript',
    'plugin:prettier/recommended'
  ],

  parserOptions: {
    ecmaVersion: 2020,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },

  rules: {
    'no-console': 'off',
    'no-debugger': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: true,
        trailingComma: 'none',
        printWidth: 100,
        tabWidth: 2,
        endOfLine: 'lf',
        arrowParens: 'always',
        bracketSpacing: true
      }
    ]
  },

  overrides: [
    {
      files: ['**/*.test.ts'],
      env: {
        jest: true
      }
    }
  ]
};

и вот мой файл.pretterrc.js:

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  endOfLine: 'lf',
  arrowParens: 'always',
  bracketSpacing: true
};

Я знаю, что могу просто согласовать два файла и получить правильный результат, но я не хочу, чтобы форматирование выполнялось дважды. Работа с файлами машинописного текста кажется достаточно медленной, так как без двойного форматирования все время.

Я думаю, что соответствующие части моего файла settings.json:

  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.formatOnSave": true,
  "vetur.experimental.templateInterpolationService": true,
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.ts": "prettier-tslint",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": true,
      "sortAttributes": true
    },
    "vetur.grammar.customBlocks": {
      "docs": "md",
      "i18n": "json"
    }
  },

Приветствуются любые указатели на то, на какие настройки смотреть.

Answer 1

Думаю, я нашел ответ.

Первый раунд красивого оформления выполняется eslint и использует более красивую конфигурацию, найденную в eslintrc. Второй раунд доводки выполняется vetur в разделе машинописного текста файла vue, и он использует более красивую конфигурацию, найденную в файле prettierrc.

Чтобы решить эту проблему, я сказал vetur не форматировать код машинописного текста, изменив эти две строки в файле settings.json для рабочей области:

  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",

Раньше они были красивее. Как только я изменил их на "Нет", часть файла с машинописным текстом удалила запятые в конце и оставила их удаленными. Часть файла с шаблоном html все еще была отформатирована правильно.

Я предполагаю, что это ускорит мое сохранение файла, поскольку теперь vetur может игнорировать часть файла с машинописным текстом при сохранении, поскольку она уже была обработана eslint.

Answer 2

Вам не нужно помещать более красивую конфигурацию в .eslintrc файл, как последняя версия ESLint-plugin-prettier загрузит это из .prettierrc