在vscode中配置vue项目的保存自动修复代码的一些问题

问题：Failed to load plugin ‘vue‘...Cannot find module ‘eslint-plugin-vue

一般出现这种问题，两个解决思路。

• 全局 eslint 和 eslint-plugin-vue和本地安装的出现版本问题

• vscode settings.json里没有使用正确的工作目录

• 解决版本问题
  npm list -g --depth 0 查看下全局依赖的包
  删除全局依赖的eslint 和 eslint-plugin-vue 用本地安装
  npm uninstall -g eslint
  npm uninstall -g eslint-plugin-vue
  为了保险一点，将node_modules删除重新安装依赖npm install

• 解决工作目录
  首先去seetings.json的配置里看下工作文件夹的设置eslint.workingDirectories
  如果你设置的不是"eslint.workingDirectories": [{"mode":"auto"}]
  那么就必须把设定的工作目录改成你现在的工作目录
  如："eslint.workingDirectories": ["vuetest"]; vuetest为项目名。

1. 我的settings.json

{
  "workbench.editor.enablePreview": false, //打开文件不覆盖
  "search.followSymlinks": false, //关闭rg.exe进程
  "editor.minimap.enabled": false, //关闭快速预览
  "liveServer.settings.donotShowInfoMsg": true, //关闭liveserver提示
  "files.autoSave": "afterDelay", //打开自动保存
  "editor.fontSize": 16, //设置文字大小
  "editor.lineHeight": 24, //设置文字行高
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": { //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0, // 调整窗口的缩放级别
  "editor.tabSize": 2, //制表符符号eslint
  "prettier.semi": false, //去掉代码结尾的分号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  // jsx自动修复有问题，取消js的format
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "breadcrumbs.enabled": true,
  "editor.renderControlCharacters": false,
  "vetur.validation.template": false,
  "vetur.grammar.customBlocks": {

    "docs": "md",
    "i18n": "json"
  },
  // 点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    "javascript",  //  用eslint的规则检测js文件
    {
        "language": "vue",   // 检测vue文件
        "autoFix": true   //  为vue文件开启保存自动修复的功能
    },
    {
        "language": "html",
        "autoFix": true
    }
  ], 
  "eslint.workingDirectories": ["vue_base4"],
  // jsx自动修复有问题，取消js的format
  "editor.formatOnSave": false,
  // Enable/disable default JavaScript formatter (For Prettier)
  "javascript.format.enable": false,
  "prettier.singleQuote": true,
  "editor.wordWrapColumn": 220,
  // 保存自动修复
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.autoFixOnSave": true
}

2. 我的 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 添加，分号必须
    semi: ['error', 'always'],
    'no-unexpected-multiline': 'off',
    'space-before-function-paren': ['error', 'never'],
    // 'quotes': ["error", "double", { "avoidEscape": true }]
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true
      }
    ]
  }
};