Vue/TypeScript/ESLint/Prettier/Vetur 格式化无效

Question

试图在 VS Code 中进行 Vue/TypeScript/ESLint/Prettier/Vetur 格式化是一场噩梦。有很多 GitHub 问题和关于此的 Whosebug 帖子，但我向您保证这不是重复的。我遵循了每个教程，其中 none 有效。其中一些解决了一个问题，但引入了另一个问题。其中一些不能解决任何问题。其中一些使 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'
  }
};

.prettierrrc

{
  "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
}

真的有人在用这个吗？

Answer 1

为了让 Vue/TypeScript/ESLint/Prettier/Vetur 在 VSCode 中工作，我遵循了以下步骤：

运行vue add @vue/cli-plugin-eslint 安装了 Vue eslint 插件。注意：如果您有一个客户端文件夹目录和一个服务器文件夹目录，则在使用 vue add.
更改了我的 Vue 项目中的 .eslintrc.js。请检查 post 了解更多 information/alternatives。基本上，我创建了一个新的 Vue + Typescript 项目并将 eslint 配置复制到我的真实项目中。样板代码一开始不能完全工作所以我修改了一下：

module.exports = {
  root: true,
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  env: {
    browser: true,
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended",
    "@vue/prettier",
    "plugin:prettier/recommended",
    "@vue/typescript",
  ],
  // required to lint *.vue files
  plugins: [
    "vue",
    "@typescript-eslint"
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
}

通过运行

npm i -D eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

有关详细信息，请查看 this Github 页面。注意：我不需要 eslint-plugin-promise（当我尝试安装它时出现错误，但它可能对你有用）。

将我的 VSCode settings.json 更改为以下内容：

{
    "editor.defaultFormatter": "octref.vetur",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": [
        "source.organizeImports",
        "source.fixAll"
    ],
    "editor.formatOnSave": false,
    "javascript.format.enable": false,
    "eslint.alwaysShowStatus": true,
    "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx", ".ts" ]
    },
    "eslint.validate": [ "javascript", "vue", "html", "typescriptvue", "typescript" ],
    "eslint.workingDirectories": [
        "./client"
    ]
}

这样，我就可以使用 Vue/TypeScript/ESLint/Prettier/Vetur 了！它会在每次保存时完美地检查和格式化我的代码，我真的不必担心代码中的小问题。如果您仍然遇到问题，请告诉我，我会尝试看看我能做些什么。

Answer 2

我一直在@vue/prettier 和 eslint 之间遇到一些冲突问题。删除@vue/prettier 问题就消失了。在研究了包裹后，我意识到它是 temporary solution until prettier supported Vue natively, and it already does.

老实说，我不知道为什么仍然推荐安装 vue-cli 这个软件包，但我测试了用 'prettier' 代替 '@vue/prettier' 并且有效

Vue/TypeScript/ESLint/Prettier/Vetur 格式化无效

Vue/TypeScript/ESLint/Prettier/Vetur formatting doesn't work

typescript

eslint

vue.js

visual-studio-code

vetur