详解create-react-app 自定义 eslint 配置
使用eslint和editorconfig规范代码
为什么要用这些：
- 代码规范有利于团队协作
- 纯手工规范耗时耗力而且不能保证准确性
- 能配合编辑器自动提醒错误，提高开发效率
eslint
随着ECMAScript版本一直更新的Jslint工具，插件丰富，并且能够套用规范，规则非常丰富，能够满足大部分团队的需求。
eslint配合git
为了最大程度控制每个人的规范，我们可以在gitcommit代码的时候，使用githook调用eslint进行代码规范验证，不规范的代码无法提交到仓库。
editorconfig
不同编辑器对文本的格式会有一定的区别，如果不统一一些规范，可能你和别人合作的时候每次更新下来别人的代码就会出一大堆错误-webstorm自动支持editorconfig配置文件。
首先安装eslintnpmieslint因为create-react-app默认已经安装了
"babel-eslint":"7.2.3", "eslint":"4.10.0", "eslint-config-react-app":"^2.1.0", "eslint-loader":"1.9.0", "eslint-plugin-flowtype":"2.39.1", "eslint-plugin-import":"2.8.0", "eslint-plugin-jsx-a11y":"5.1.1", "eslint-plugin-react":"7.4.0",
我们针对我们想要的自定义配置，我们再安装如下
npmibabel-eslint\ \eslint-config-airbnbeslint-config-standard\ \eslint-loader\ \eslint-plugin-import\ \eslint-plugin-jsx-a11y\ \eslint-plugin-node\ \eslint-plugin-promise\ \eslint-plugin-react\ \eslint-plugin-standard-D
我们在根目录下新建.eslintrc文件针对整个项目做一个标准的规范
{
"extends":"standard"
}
主要项目是前端工程，所以我们在前端文件夹下新建.eslintrc文件，在这里去规范客户端代码，客户端代码使用jsx，很多规则和nodejs是不同的，在这里使用更加严格的规范来要求客户端代码。
配置的value对应的值：0:off1:warning2:error
{
"parser":"babel-eslint",
"env":{
"browser":true,
"es6":true,
"node":true
},
"parserOptions":{
"ecmaVersion":6,
"sourceType":"module"
},
"extends":"airbnb",
"rules":{
"semi":[0],
"react/jsx-filename-extension":[0],
"jsx-a11y/anchor-is-valid":[0]
}
}
使用babel-eslint去解析代码，定义环境是浏览器和es6，会包含公共变量，webpack所以需要node一些环境变量，parserOptions定义版本，jsmodule模式方法书写。
因为需要在每次编译之前都要去检查一下代码，所以还需要配置webpack,这是create-react-app默认的
{
test:/\.(js|jsx|mjs)$/,
enforce:'pre',
use:[
{
options:{
formatter:eslintFormatter,
eslintPath:require.resolve('eslint'),
},
loader:require.resolve('eslint-loader'),
},
],
include:paths.appSrc,
},
我们希望屏蔽掉node_modules文件夹下的代码
exclude:[path.resolve(__dirname,'../node_modules')]
在项目根目录下新建文件.editorconfigwebstom默认就有配置
- root=true项目根目录
- [*]所有文件都应用这个规则
- charset=utf-8编码模式
- indent_style=space使用tab的样式制表符和space
- indent_size=2
- end_of_line=lf行尾结尾方式
- insert_final_newline=true自动保存行尾最后一行是空行
- trim_trailing_whitespace=true一行结束后面的空格自动去掉
eslint不检测这行代码//eslint-disable-line
eslint不检测这个文件，在开头/*eslint-disable*/在文件结尾/*eslint-enable*/
安装npmihusky-D
然后在package.jsonscripts中增加git钩子,会在执行gitcommit之前会调用这个命令
"lint":"eslint--ext.js--ext.jsxsrc/", "precommit":"npmrunlint"
gitcommit强制执行eslint通过的代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。