配置 eslint
安装
安装 eslint；webpack 配置用到的 eslint-loader；eslint 用于解析 js 的解析器 babel-eslintnpm i eslint eslint-loader babel-eslint -D
以 airbnb 为 eslint 的配置规则 npm i eslint-config-airbnb - D 及其所需要的插件 npm i eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D
node 环境、es6 环境下的插件 npm i eslint-plugin-node eslint-plugin-promise -D
配置.eslintrc
在项目根目录下新建.eslintrc 文件，开始配置。
{
// 指定 js 解析器
“parser”: “babel-eslint”,
// 定义 ecma 版本；sourceType 定义为模块化的 js 编写模式
“parserOptions”: {
“ecmaVersion”: 6,
“sourceType”: “module”
},
// 定义运行环境，如不配置 browser 为 true 则会报出 window、document 变量未定义的错误。同时需要配置 node 为 true，因为项目基于 webpack 构建会用到 node 中的如 process 全局变量。
“env”: {
“browser”: true,
“node”: true,
“es6”: true
},
// 运用 airbnb 规则，标准规则为 standard
“extends”: “airbnb”,
// 自定义规则
“rules”: {
“semi”: [0] // 是否对结尾分号进行检测 — 0 为不检测
}
}
配置 webpack
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [‘babel-loader’, ‘eslint-loader’]
}]
}
注意 loader 的执行顺序为从右到左，eslint-loader 需在最右，先进行了 eslint 验证再进行 babel 的编译。
接着我们来走一波，然后发现了大量的报错，其中最为多的是这个东西????
Expected linebreaks to be ‘LF’ but found ‘CRLF’
这个就是不同系统下的换行符会有所不同，windows 的是 CRLF，解决这个问题就需要用到 editorconfig 了
配置 editorconfig
安装插件 — vscode 下
市场里直接搜索 EditorConfig for VS Code 安装。
配置.editorconfig 文件
项目根目录下创建.editorconfig 文件，并且配置
# 是否是顶级配置文件，设置为 true 的时候才会停止搜索.editorconfig 文件
root = true
[*]
charset = utf-8
# 末尾行去掉尾随的空格
trim_trailing_whitespace = true
# 末尾行后加多一行空行
insert_final_newline = true
# <“tab” | “space”> 制表符类型
indent_style = space
indent_size = 2
# <“lf” | “cr” | “crlf”> 换行符类型
end_of_line = lf
项目中使用 eslint
eslint 报错分析
如上，分别为：报错的行数 / 错误类型 / 错误描述 / 对应的 eslint 规则
忽略 eslint 检测
有时候我们不需要对某些代码进行 eslint 检测，这时我们可以加上 eslint 注释????
export default class App extends React.Component {// eslint-disable-line
render() {
return <div>Home</div>;
}
}
结合 git 使用 eslint
我们在代码提交前希望先用 eslint 检测一遍代码，如果不通过则禁止提交代码。实施方法如下????
1、安装工具 husky 来设置 git 钩子 npm i husky -D2、配置 package.json 文件
// husky 提供的钩子
“husky”: {
“hooks”: {
// 在执行 git commit 之前先执行 pre-commit，也就是执行 eslint 检测，若不成功不能进入 git commit
“pre-commit”: “npm run lint”
}
},
“scripts”: {
// eslint 检测 src 目录下的所有拓展名为 js 和 jsx 的文件
“lint”: “eslint –ext .js –ext .jsx src/”
}
结果就是这样????
eslint 报错了就直接不给 commit