vue + eslint + prettier 代码检测（自动修复）

Posted 2023-03-28

参考技术A 安装以下几个包

安装后手动新建.eslintrc.js文件并编写为以下配置：

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

【中文标题】Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

【英文标题】：Vue/TypeScript/ESLint/Prettier/Vetur formatting doesn't work

【发布时间】：2021-10-07 09:30:41

【问题描述】：

试图在 VS Code 中获得 Vue/TypeScript/ESLint/Prettier/Vetur 格式是一场噩梦。在这方面有很多 GitHub 问题和 *** 帖子，但我向你保证这不是重复的。我遵循了每个教程，但它们都不起作用。其中一些解决了一个问题，但又引入了另一个问题。其中一些不能解决任何问题。其中一些会导致 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

有人真的有这个工作吗？

【问题讨论】：

这方面有什么更新吗？

没有。这只是一个坏掉的工具。

其实，我昨天就让它工作了。我会尽快写一个答案！

【参考方案1】：

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

通过运行vue add @vue/cli-plugin-eslint 安装了 Vue eslint 插件。注意：如果您有客户端文件夹目录和服务器文件夹目录，则必须先 cd 到客户端目录，然后才能使用 vue add。 在我的 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",

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

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