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

Question

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

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

我已经花费了数小时并尝试了许多来自不同帖子和教程的配置，但这是我所获得的最接近有效的配置。然而，使用以下配置，每当保存 .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 中工作，我按照以下步骤操作：

1. 通过运行vue add @vue/cli-plugin-eslint 安装了 Vue eslint 插件。注意：如果您有客户端文件夹目录和服务器文件夹目录，则必须先 cd 到客户端目录，然后才能使用 vue add。
2. 在我的 Vue 项目中更改了 .eslintrc.js。请查看this 帖子以获取更多信息/替代方案。基本上，我创建了一个新的 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",
}

1. 通过运行安装了以下依赖项

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

欲了解更多信息，请查看this 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！每次保存时，它都会完美地整理和格式化我的代码，我真的不必担心代码中的小东西。如果您仍然遇到问题，请告诉我，我会尝试看看我能做些什么。