Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

Question

试图在 VS Code 中获得 Vue/TypeScript/ESLint/Prettier/Vetur 格式是一场噩梦。有很多关于这个的 GitHub 问题和 StackOverflow 帖子，但我向你保证这不是重复的。我遵循了每个教程，但没有一个起作用。其中一些解决了一个问题，但引入了另一个问题。其中一些不能解决任何问题。其中一些会导致 VS Code 崩溃。大多数在他们规定的建议中相互冲突，包括多个官方来源。许多已经过时，引用了过时的配置属性。

我希望 VS Code 在我保存时整理和格式化我的 .vue 和 .ts 文件。

我花了几个小时，尝试了很多不同的帖子和教程中的许多配置，但这是我最接近有效的配置。但是，使用以下配置，无论何时保存 .vue 文件，.vue 文件中的元素都会暂时换行到新行，然后立即恢复为单行元素：

然后 然后

以下是我当前的配置文件：

.eslintrc.js

const { resolve } = require('path');
module.exports = {
  root: true,
  parserOptions: {
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser',
    project: resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },

  env: {
    browser: true
  },

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

  plugins: ['@typescript-eslint', 'vue'],

  globals: {
    ga: true, // Google Analytics
    cordova: true,
    __statics: true,
    process: true,
    Capacitor: true,
    chrome: true
  },

  rules: {
    'prettier/prettier': ['error', { usePrettierrc: true }], 
    'prefer-promise-reject-errors': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-function': ['error', { allow: ['private-constructors'] }],
    'vue/no-v-html': 'off',
    'vue/no-template-shadow': 'off',
    'vue/max-attributes-per-line': 'off',
    quotes: ['warn', 'single', { avoidEscape: true }],

    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
};

.preettierrrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "printWidth": 150,
  "arrowParens": "avoid",
  "trailingComma": "none",
  "endOfLine": "auto"
}

settings.json

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "vue"
  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "vetur.experimental.templateInterpolationService": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.detectIndentation": false,
  "editor.tabSize": 2
}

外面有人真的有这个工作吗？