一、ESLint
协同开发过程中，经常感受到来自代码检视的恶意。代码习惯不一致，看半天；居然提交低级错误，我的天(╯‵□′)╯︵┻━┻！…研究了一番，决定使用ESLint来做代码规范检查。
二、配置方式
JavaScript注释：通过JavaScript注释把配置信息嵌入代码中。
package.json：在package.json文件中的eslintConfig字段中指定配置。
配置文件：通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息，ESlint会查找并且自动读取配置文件。
三、配置过程(配置文件)
安装相关npm包
yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev增加文件
.eslintignore 用来配置不需要检查的文件(类似git的.gitignore)。
.eslintrc.js 用来配置ESlint验证规则的配置文件。
修改webpack配置文件
module.exports = {
module: {
rules: [
test: /.(js|vue)$/,
loader: "eslint-loader",
enforce: "pre",
//指定检查的目录
include: [resolve(__dirname, 'src')],
//eslint检查报告的格式规范
options: {
formatter: require("eslint-friendly-formatter")
}
] }
}
四、配置文件详解
以.eslintrc.js为例
module.exports = {
//一旦配置了root，ESlint停止在父级目录中查找配置文件
root: true,
//解析器
parser: "babel-eslint",
//想要支持的JS语言选项
parserOptions: {
//启用ES6语法支持(如果支持es6的全局变量{env: {es6: true}}，则默认启用ES6语法支持)
//此处也可以使用年份命名的版本号：2015
ecmaVersion: 6,
//默认为script
sourceType: "module",
//支持其他的语言特性
ecmaFeatures: {
//...
}
},
//代码运行的环境，每个环境都会有一套预定义的全局对象，不同环境可以组合使用
env: {
es6: true,
browser: true,
jquery: true
},
//访问当前源文件中未定义的变量时，no-undef会报警告。
//如果这些全局变量是合规的，可以在globals中配置，避免这些全局变量发出警告
globals: {
//配置给全局变量的布尔值，是用来控制该全局变量是否允许被重写
test_param： true
},
//支持第三方插件的规则，插件以eslint-plugin-作为前缀，配置时该前缀可省略
//检查vue文件需要eslint-plugin-vue插件
plugins: ["vue"],
//集成推荐的规则
extends: ["eslint:recommended", "plugin:vue/essential"],
//启用额外的规则或者覆盖默认的规则
