规范化标准—ESLint的使用

eslint是一种代码风格检测的工具

• 最主流的Javascript lint工具&＃xff0c;检测JS代码质量
• ESLint很容易统一开发者的编码风格
• ESLint可以帮助开发者提升编码能力

安装

yarn add eslint --dev


初始化配置文件

eslint的使用是需要有一个eslintrc.js的一个配置文件&＃xff0c;可以手动生成也可以使用eslint内置的命令来快捷生成&＃xff0c;这里先介绍内置命令生成配置文件

yarn eslint --init


根据对应的配置选项选择自己需要的配置&＃xff0c;然后等待安装完成

运行eslint

在安装完对应的配置后&＃xff0c;可以运行制定的命令来检测代码

yarn eslint <文件路径|统配符>


可以看到eslint已经正常的工作了

文件配置解析

下面来看看生成的eslintrc.js文件的内容

module.exports &＃61; {env: {browser: true,es2020: true},extends: [&＃39;standard&＃39;],parserOptions: {ecmaVersion: 11},rules: {}
}


• env 是用于指定当前运行环境&＃xff0c;是否允许某些全局变量的使用&＃xff0c;因为我们选择的是浏览器端&＃xff0c;所以browser: true&＃xff0c;它还有更多的配置&＃xff0c;可以参考下面的图片
  
• extends 用于指定继承多个共享配置&＃xff0c;用于定义一些公共的配置选项
• parserOptions 是语法解析器&＃xff0c;指定是否允许某个版本的ES语法&＃xff0c;这里仅是语法检测
• rules 每一项规则的状态&＃xff0c;开启或关闭&＃xff0c;一般有三个值warn|error|off

配置注释

除了通过文件配置来配置对应的参数选项&＃xff0c;也可以通过注释来配置对应的规则
比如我们使用配置注释来关闭上面的一个no-unused-vars错误&＃xff0c;就可以再代码后面通过注释的方式来关闭

// 语法 eslint-disable-line 需要禁用的规则(不填默认全部)
const a &＃61; &＃39;1&＃39; // eslint-disable-line no-unused-vars


可以看到已经可以正常通过了

webpack中使用eslint

webpack中使用eslint来检查代码风格是通过loader的方式来进行的&＃xff0c;而不是plugin。只需要在打包js代码的时候使用eslint-loader即可&＃xff0c;但这里需要注意&＃xff0c;如果有使用babel的&＃xff0c;那么在eslint操作需要在babel编译js代码前&＃xff0c;否则通过babel转化后的代码再使用eslint检查就没有意义了
安装模块

yarn add eslint-loader eslint --dev


方法1
指定eslint-loader和babel-loader的执行顺序

{... // 前面的省略module: {rules: [{test: /.js$/,use: [&＃39;babel-loader&＃39;, &＃39;eslint-loader&＃39;]}]}
}


方法2
分类打包&＃xff0c;但提升eslint-loader的执行优先级&＃xff0c;这也是我推荐的方法

{... // 前面的省略module: {rules: [{test: /.js$/,use: [&＃39;babel-loader&＃39;]}, {test: /.js$/,use: [&＃39;eslint-loader&＃39;],enforce: true // 提高执行优先级}]}
}


以上内容仅供学习参考