Vue/TypeScript/ESLint/Prettier/Vetur格式化无法工作。

Question

尝试在VS Code中实现Vue/TypeScript/ESLint/Prettier/Vetur格式化是一场噩梦。虽然有许多GitHub问题和StackOverflow帖子，但我向您保证这不是重复的问题。我已经按照每个教程进行了尝试，但没有一个能够正常工作。其中一些可以解决一个问题，但会引入另一个问题。其中一些则无法解决任何问题。其中一些会导致VS Code崩溃。大多数建议存在冲突，并且包括多个官方来源。许多教程已过时，参考了已过时的配置属性。

我希望VS Code在保存时对我的.vue和.ts文件进行lint和格式化。

我已经花费了数小时并尝试了许多不同的配置，但以下配置是我最接近可行的配置。然而，使用以下配置时，每当保存.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
}

有人真的让这个工作了吗？

- Jeff

---

这个有更新了吗？ - Edwin

不，它只是一个坏掉的工具。 - Jeff

实际上，我昨天已经搞定了。我很快会写出答案！ - Edwin

Answer 1

为了在VSCode中使用Vue/TypeScript/ESLint/Prettier/Vetur，我按照以下步骤进行操作：

1. 运行命令 vue add @vue/cli-plugin-eslint 安装Vue eslint插件。注意：如果你有一个客户端文件夹和一个服务器文件夹，请在使用 vue add 命令之前先进入客户端目录。

2. 修改我的Vue项目中的.eslintrc.js文件。请查看此文章获取更多信息或替代方案。基本上，我创建了一个新的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",
}

3. 运行以下命令安装所需的依赖项

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

更多信息请查看此 Github 页面。注意：我不需要 eslint-plugin-promise（当我尝试安装它时会抛出错误，但它可能适用于您）。

4. 将我的 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了！每次保存时它都会完美地检查和格式化我的代码，我不必太担心代码中的细节问题。如果您仍然遇到困难，请告诉我，我会尽力帮助您解决。

- Edwin

---

我觉得eslint在html中将不再起作用，是吗？如果是这样的话，删除@vue/prettier可能更有趣，这就是解决我的问题的方法。在prettier或仅在typescript中工作的eslint之间，我更喜欢eslint。 - Mithsew

Answer 2

我一直在@vue/prettier和eslint之间遇到冲突问题。删除@vue/prettier后，问题消失了。在研究包时，我意识到它是一个临时解决方案，直到prettier原生支持Vue，而它已经支持了。

老实说，我不知道为什么安装vue-cli时仍然推荐此包，但我测试了将'prettier'放在'@vue/prettier'的位置，它可以工作。

- Mithsew