当前位置: 首页 > Web前端 > JavaScript

Vue3解决各类ESLint错误

时间:2023-03-27 12:42:58 JavaScript

早期项目忽略了eslint检查,导致运行npmrunlint时出现2000多错误(?д?;)。花了两三天时间补全,对错误做了总结。环境和配置项目,使用vue@3.2+vite+ant-design@6.0。eslint配置的使用可以参考:ESLint中文eslint有个专门应用于vue的插件:eslint-plugin-vue大致贴一下版本依赖devDependencies:{"@babel/eslint-parser":"^7.18.2","eslint":"^8.7.0","eslint-config-prettier":"^8.3.0","eslint-import-resolver-alias":"^1.1.2","eslint-plugin-import":"^2.25.4","eslint-plugin-jest":"^25.7.0","eslint-plugin-vue":"^8.3.0",}eslint的配置采用js文件格式。几经修改,原来的内容都忘记了。我只贴基本配置如下://.eslintrc.jsmodule.exports={//只适用于当前目录root:true,//运行环境env:{node:true,es6:true,},//解析器parser:'@babel/eslint-parser',//解析器选项parserOptions:{sourceType:'module',},//插件plugins:['import'],//扩展配置extends:['plugin:vue/vue3-推荐','插件:导入/推荐','漂亮r',],//启用规则rules:{},//全局变量globals:{h:true,},//为指定文件指定处理器overrides:[{files:['*.vue','*.jsx'],parser:'vue-eslint-parser',parserOptions:{ecmaVersion:2018,},rules:{}}],}ERROR:Parsingerror:Unexpectedtoken.错误代码:constisOpen=data?.form?.isOpen||错误的;原来optionalchainoperator(?.)无法识别,但是expansionoperator没问题。看了eslint的配置,发现ECMAScript的版本设置为2018(ES9),可选的chainoperator为ES2020(如果我没记错的话),修改配置即可//.eslintrc.jsmodule.exports={parserOptions:{//ES版本,latest可以设置为2022或者“latest”,如果有必要,在overrides中配置修改ecmaVersion:2020,sourceType:'module',}}ERROR:Unabletoresolvepathtomodule错误代码:importUploadfrom'@/components/upload/index.vue'路径引用错误??似乎并没有什么不妥。shortchainresolve在vite.config.js中明确配置了:{alias:{'@':pathResolve('src'),}}但是eslint不会自动读取vite的配置,所以eslint也要添加相应的配置://.eslintrc.jsmodule.exports={settings:{'import/resolver':{alias:{map:['@':'./src']}}}}另外,导入vue文件需要后缀.vue,否则会报同样的错误被报错:'ref'isnotdefined错误代码:setup(){constisOpen=ref(false);return{isOpen,}}运行不报错,怎么突然undefined了??等等,因为懒,vue的语法糖被unplugin-auto-import的每个文件自动引入了://vite.config.jsimportautoImportfrom'unplugin-auto-import/vite';autoImport({imports:['vue','vue-router',]})所以让eslint知道,首先生成一个包含所有变量的文件://vite.config.jsautoImport({...last,eslintrc:{//filealreadyexistsSetthedefault为false,需要更新的时候打开,防止每次更新都重新生成:true,}})上面的enabled建议生成文件后关闭,否则每次更新都会重新生成。扩展到eslint://.eslintrc.jsmodule.exports={extends:['plugin:vue/vue3-recommended','plugin:import/recommended','prettier','./.eslintrc-auto-import.json'],}错误:vue/no-mutating-props错误代码:这是一个低级错误,vue3支持多参数双向绑定,但是子组件不能直接修改props,你需要转换它:方法1:使用computed而不是方法二:使用watch监听错误:无控制台错误代码:console.log(data);eslint的规则设置是没有console的,当然你可以改配置://.eslintrc.jsrules:{'no-console':'off',//or:'no-console':[2,{允许:['警告','error']}],//or:'no-console':process.env.NODE_ENV==='production'?[2,{allow:['warn','error']}]:'off'}提到这个错误是为了引入下面的问题。有些地方需要打印但是不想让eslint报错。你可以让它忽略检查://忽略整个文件并添加/*eslint-disable*///忽略第一行中的一段Codeinspection/*eslint-disable*/...thisourcodes;/*eslint-enable*///忽略一行代码检查console.log(data);//eslint-disable-line//忽略下一行代码检查//eslint-disable-next-lineconsole.log(data);在