问题：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为项目名。
- 我的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
}
- 我的 .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
}
]
}
};
