eslint在项目中并不是很陌生。通常，在使用脚手架时，它会让你默认安装并执行eslint。公司项目比较规范的时候，往往会在组内配置统一的eslint规则，eslint帮助我们在开发阶段检查代码是否符合标准规范，统一我们组内不同项目的代码风格，帮助我们养成良好的代码习惯。统一eslint对于项目的可维护性至关重要。如果您改进项目的规范，今天让我们一起学习。正文开始...首先，我们还是用之前搭建的一个工程，从0到1配置eslint，安装eslintnpmieslint--save-dev然后我们执行初始化eslint命令npminit@eslint/config这个时候我们就选择第三个，选择js模块，vue默认会生成一个文件.eslintrc.js。由于我添加了ts，@typescript-eslint也会默认添加，我们会发现package.json多了几个插件@typescript-eslint/eslint-plugin、@typescript-eslint/parser，安装npmitypescript--save-deveslint规则是你的默认配置module.exports={env:{browser:true,es2021:true},extends:['eslint:recommended','plugin:vue/essential','plugin:@typescript-eslint/recommended'],parserOptions:{ecmaVersion:'latest',解析器:'@typescript-eslint/parser',sourceType:'module'},插件:['vue','@typescript-eslint'],规则：{缩进：['error','tab'],'linebreak-style':['error','unix'],引号：['error','single'],semi:['error','绝不']}};默认生成的规则就是上面我们运行npxeslint./src/index.js执行命令会检测文件是否符合默认的eslint配置规则，在.eslintrc.js中添加eslint规则module.exports={env:{浏览器:true,es2021:true},扩展：['eslint:recommended','plugin:vue/essential','plugin:@typescript-eslint/recommended'],parserOptions:{ecmaVersion:'latest',parser:'@typescript-eslint/parser',sourceType:'module'},插件:['vue','@typescript-eslint'],规则:{缩进:['error','tab'],'linebreak-style':['error','unix'],引用:['error','single'],semi:['error','always']}};env支持的环境主要有以下5个部分，根据.browserslistrcbrowser预设的环境对应规则module.exports={env:{browser:true,es2021:true,es6:true}}extends继承第三方规则module.exports={extends:['eslint:recommended']}parserOptions指定解析器选项module.exports={parserOptions:{ecmaVersion:'latest',parser:'@typescript-eslint/parser',sourceType:'module'}}pluginspluginmodule.exports={plugins:['vue','@typescript-eslint'],}rules具体对应规则的设置module.exports={rules:{semi:0//0off,1warn,2error},}参考之前对业务有用的一个统一的eslint配置//eslint配置module.exports={root:true,env:{node:true,},parserOptions:{parser:'@typescript-eslint/parser',},extends:['plugin:vue/essential','plugin:prettier/recommended','@vue/airbnb','@vue/typescript',],rules:{'no-undef':0,//由于eslint无法律知识.d.ts声明文件中确定义的变化量，暂停时关闭'no-console':process.env.NODE_ENV==='生产'?2：0，“无调试器”：process.env.NODE_ENV===“生产”？2：0，缩进：0，'linebreak-style'：0，'no-trailing-spaces'：0，'class-methods-use-this'：0，'import/prefer-default-export'：0，'no-restricted-syntax':0,'no-tabs':0,'import/no-unresolved':0,'no-underscore-dangle':0,'comma-dangle':'off','max-len':'off',camelcase:'off','object-curly-newline':0,'operator-linebreak':0,'guard-for-in':0,'import/no-webpack-loader-syntax':0,//不安全'no-param-reassign':0,'no-dupe-class-members':0,'no-unused-vars':0,//ts中有验证，可以关闭eslint的验证//提示警告'no-return-await':1,'import/no-cycle':1,'no-嵌套-三元':1,'no-new-func':1,'vue/no-side-effects-in-computed-properties':1,'vue/no-multiple-template-root':'off',//vue3模板可以有多个根节点'vue/valid-template-root':'off','vue/no-v-for-template-key':'off',//在vue3v-for模板中可以设置键'vue/no-v-model-argument':0,'vue/no-use-v-if-with-v-for':0,'import/no-extraneous-dependencies':1,'no-continue':1,'operator-assignment':1,'no-bitwise':1,'prefer-destructuring':2,'array-callback-return':2,'func-names':2,'no-plusplus':2,'no-shadow':2,'no-mixed-operators':2,'no-fallthrough':2,'default-case':2,'no-useless-constructor':2,'no-unused-expressions':["error",{"allowShortCircuit":true}],//关闭iview输入组件，col组件个别标签报错'vue/no-parsing-error':[2,{'x-invalid-end-tag':false}],//保证js和ts项目的箭头样式一致'arrow-parens':[2,'always',{requireForBlockBody:false}],'implicit-arrow-linebreak':[0,'beside'],//ts任何枚举错误问题'no-shadow':'off','@typescript-eslint/no-shadow':['error'],},overrides:[{files:['**/__tests__/*.{j,t}s?(x)','**/tests/unit/**/*.spec.{j,t}s?(x)'],env:{jest:true,},},],};选择Airbnb风格自定义自己的规则，或者执行npminit@eslint/config配置社区比较流行的自定义风格。使用爱彼迎。当我们选择airbnb风格时，执行npxeslint./src/index.js提示index.jshasaruleerrorExpected1emptylineafterimportstatementnotfollowedbyanotherimportimport/newline-after-import我们将包裹第三个lineimport{createApp}from'vue';importAppfrom'./App.vue';createApp(App).mount('#app');看一下生成的.eslintrc.js一般是在你的项目中看到的，也可以是json类型module.exports={env:{browser:true,es2021:true,},extends:['plugin:vue/essential','airbnb-base',],parserOptions:{ecmaVersion:'latest',sourceType:'module',},plugins:['vue',],rules:{},};rules的配置比较多，可以参考eslint官方的Runtime检测，一般都是正常的。当我们启动服务的时候，如果我们的代码写的不规范，开发工具就会在终端给我们一个警告。这个时候我们就需要eslint-loader，我们只需要这样配置就可以了module.exports={module:{rules:[{test:/\.(js|jsx)$/,use:['babel-loader','eslint-loader']}]}}但是不推荐这样使用eslint-loader已经停止维护了，官方推荐在webpack.config.js中使用eslint-webpack-plugin我们可以这样constESLintPlugin=require('eslint-webpack-plugin');module.exports={plugins:[newESLintPlugin()]}当我们运行npmrunserver时，会检查代码错误，提示控制台无法使用工具/index.js。显然，这个规则不符合我们的初衷。我只需要在生产环境中不打印控制台当我们修改.eslintrc.js,module.exports={rules:{'no-console':0,'import/extensions':['error','always']}}我们将noconsole的规则规则：0允许使用控制台。等我修改完再运行，终端就不会报错了。我们加一个规则，max-params:2，函数参数不能超过三个，超过三个就会报错模块。exports={rules:{'no-console':0,'import/extensions':['error','always'],'max-params':2}}//utils/index.jsfunctiontest(a,b,c,d){console.log('hello',a,b,c,d);}测试(1,2,3,4);因为默认的max-params默认最多3个参数，所以运行时会提示错误，所以可以改成下面这样//utils/index.jsfunctiontest(a,...rest){console.log('你好',...休息);}测试(1,2,3,4);vscode的eslint插件除了eslint-webpack-plugin插件帮助我们在代码运行的时候检测代码中的一些不规范的地方。我们平时可以结合vscode插件给我更友好的提示。当我们写代码错误时，我们需要编辑器给我们提示。安装完成后，打开相应的文件，会有相应的提示，可以通过提示跳转到相应的eslint.prettierrc自动格式化代码。在vscode中安装插件Prettiercodeformatter，在根目录下创建.prettierrc.jsonFile{"singleQuote":true,"printWidth":150}设置编辑器的代码长度printWidth为150，设置singleQuote单引号。我们还需要设置vscode的settings.json。主要设置参考下面然后添加一行自动保存功能，这样我们保存的时候可以自动格式化自己的代码{"editor.codeActionsOnSave":{"source.fixAll.eslint":true},}因为eslint不仅可以检查代码还可以根据.eslintrc.js美化代码，但是prettierrc有时候会和eslint的配置格式冲突，所以此时vscode格式化的状态比较混乱，所以有时候会很奇怪，所以需要默认情况下将settings.json更改为eslint。具体可以参考这篇关于prettierrc的文章。是的，估计不同战队的大部分配置都是差不多的。//.prettierrc.json{"eslintIntegration":true,"printWidth":100,"tabWidth":2,"useTabs":false,"semi":true,"singleQuote":true,"proseWrap":"preserve","arrowParens":"avoid","bracketSpacing":true,"disableLanguages":["vue"],"endOfLine":"auto","htmlWhitespaceSensitivity":"ignore","ignorePath":".prettierignore","jsxBracketSameLine":false,"jsxSingleQuote":false,"requireConfig":false,"trailingComma":"es5"}总结一下项目中eslint的配置，主要使用npminit@eslint/config快速初始化一个eslint配置，在安装npmieslint--save-dev开发环境之前使用eslint-loader，现在更多的eslint-webpack-plugins使用Airbnb风格的格式来验证代码。prettierrc.json格式代码，但要注意eslint格式冲突。欢迎关注本文示例代码范例公众号：网络技术学院努力学习，天天向上！
