详解create-react-app 自定义 eslint 配置


Posted in Javascript onJune 07, 2018

使用eslint和editorconfig规范代码

为什么要用这些:

  1. 代码规范有利于团队协作
  2. 纯手工规范耗时耗力而且不能保证准确性
  3. 能配合编辑器自动提醒错误,提高开发效率

eslint

随着ECMAScript版本一直更新的Js lint工具,插件丰富,并且能够套用规范,规则非常丰富,能够满足大部分团队的需求。

eslint 配合 git

为了最大程度控制每个人的规范,我们可以在git commit代码的时候,使用git hook调用eslint进行代码规范验证,不规范的代码无法提交到仓库。

editorconfig

不同编辑器对文本的格式会有一定的区别,如果不统一一些规范,可能你和别人合作的时候每次更新下来别人的代码就会出一大堆错误-webstorm自动支持editorconfig配置文件。

首先安装eslintnpm i eslint 因为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",

我们针对我们想要的自定义配置,我们再安装如下

npm i babel-eslint \
\ eslint-config-airbnb eslint-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 : off 1 : warning 2 : 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')]

在项目根目录下新建文件 .editorconfig webstom默认就有配置

  1. root = true 项目根目录
  2. [*] 所有文件都应用这个规则
  3. charset = utf-8 编码模式
  4. indent_style = space 使用 tab 的样式制表符和 space
  5. indent_size = 2
  6. end_of_line = lf 行尾结尾方式
  7. insert_final_newline = true 自动保存行尾最后一行是空行
  8. trim_trailing_whitespace = true 一行结束后面的空格自动去掉

eslint 不检测这行代码 // eslint-disable-line

eslint 不检测这个文件,在开头 /* eslint-disable */在文件结尾/* eslint-enable */

安装 npm i husky -D

然后在 package.json scripts中增加git 钩子,会在执行git commit之前会调用这个命令

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit 强制执行 eslint 通过的代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
Javascript 强制类型转换函数
May 17 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
vue实现简单loading进度条
Jun 06 #Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 #Javascript
You might like
php 无限分类的树类代码
2009/12/03 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python中subprocess模块用法实例详解
2015/05/20 Python
python爬取微信公众号文章
2018/08/31 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python如何删除列为空的行
2020/07/17 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
金融管理专业毕业生求职信
2014/03/12 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
2014公司年终工作总结
2014/12/19 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技