webpack 配置react脚手架（三）：eslint 及优化

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

首先谨记 eslint的官网： http://eslint.cn/

1 安装eslint npm i eslint -D

2.在根目录下新建文件 .eslintrc

{
"extends":"standard" //是一个json文件，整个项目的格式，标准格式
}

3.由于是限制前端格式，所以在 client文件夹下新建文件 .eslintrc

{
"parser":"babel-eslint",//默认用哪种工具去解析 eslint代码
"env":{ //定义执行在哪些环境
"browser":true,//告诉eslint 执行环境是包含浏览器的，否则一些 window 等变量会报错，认为没有定义过
"es6":true,
"node":true
},
"parserOptions":{
"ecmaVersion":6, // 规定使用es6版本
"sourceType":"module"//使用module方式
},
"extends":"airbnb", //继承哪种格式，airbnb是react的一种很好的格式
"rules":{ //自定义规则
"semi":[0]， //不检测分号，如果为false 则不允许写
"react/prefer-stateless-funciton":0
}
}

4.每次在编译代码之前，都去检查eslint：

//对于 js和jsx文件，使用eslint-loader进行编译，并且要在 babel-loader前
//进行编译 enforce:'pre',放在 webpack.config.client.js 和 webpack.config.server.js
{
module:{
rules:[
{
enforce: 'pre',
test: /.(js|jsx)$/,
loader: 'eslint-loader',
exclude: [
path.resolve(__dirname, '../node_modules')
]
}
]
}
}

首先我们要安装下面的依赖： babel-eslint 、eslint-config-airbnb 、eslint-config-standard 、eslint-loader；

其中eslint-config-airbnb 在npm上可以看到有很多其他的依赖，此外空格+/ 可以换行：

npm i babel-eslint \
eslint-config-airbnb eslint-config-standard \
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-ally \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-react \
eslint-plugin-standard -D

执行 npm run dev:cient 启动本地服务，发现报警告：

wins下是 CRLF， mac和linux 下是 LF 行末

在根目录新建文件 .editorconfig 文件：

root = true[*]
charset = utf-8
indent_style = space //使用tab 表示空格
indent_size = 2 //
end_of_line = lf //结尾使用lf
insert_final_newline = true //如果末尾么有空行自动加空行
trim_trailing_whitespace = true //一行结束了末尾有空格换行后被删除该空格

然后在编辑器中集成进去。

如果编译后在控制台报警了，但是又不想改动，可以在出问题的代码旁加注释

import { AppContainer } from 'react-hot-loader' //eslint-disable-line

2. 在git commit 的时候，检测代码是否符合 eslint：

安装 npm i husky -D

在 package.json 中：

{
"scripts": {
"lint": "eslint --ext .jsx --ext .js client/",
"precommit":"npm run lint", //则每次commit 代码时会执行这里钩子，如果正确才会提交
}
}

PS：网站左上角的小图标设置：

安装npm

npm i serve-favicon -D

server.js

const favicon = require('serve-favicon')
app.use(favicon(path.join(__dirname, '../favicon.ico')))

4. 每次修改sever.js 之后都要重启服务： npm run dev:server

使用该插件，解决每次重启问题： npm i nodemon -D

//nodemon.json 文件{
"restartable":"rs",//使用了配置文件
"ignore":[ //配置修改下面的代码，不需要重新启动服务
".git",
"node_modules/**/node_modules",//mode_modules 包含该文件夹下包含的 node_modules
".eslintrc",
"client",
"build"
],
"env":{
"NODE_ENV":"development",
},
"verbose":true, //输出的报错信息要详细
"ext":"js" //配置包含哪些文件修改要重启}

对应的命令行：

{
"script":{
"dev:server":"nodemon server/server.js"
}
}

上述 Eslint 方法太麻烦，推荐使用 vscode的 ESLint插件。会根据eslintrc配置文件做检查;

或者cllient端，使用的 webpack-dev-server配置：

1 安装eslint。

2 设置 eslintrc文件

3 新增eslint-loader

{
rules:[{
test:/\.js$/,
exclude:/node_modules/,
use:['babel-loader','eslint-loader']//从右向左执行先执行 eslint
}]
}

4 修改devServer 配置

devServer:{
overlay:true
}

在浏览器中出现弹层