规范化标准—ESLint的使用

介绍

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

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

使用

安装

yarn add eslint --dev

初始化配置文件

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

yarn eslint --init

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

运行eslint

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

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

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

文件配置解析

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

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 11
  },
  rules: {
  }
}

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

配置注释

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

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

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

webpack中使用eslint

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

yarn add eslint-loader eslint --dev

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

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

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

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

---

以上内容仅供学习参考