详解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 相关文章推荐
基于jquery的拖动布局插件
Nov 25 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 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和ACCESS写聊天室(七)
2006/10/09 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
自学考试自我鉴定范文
2013/09/26 职场文书
化学教师自荐信范文
2013/12/28 职场文书
教师党员一句话承诺
2014/03/28 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
教师年度考核个人总结
2015/02/12 职场文书
初中家长意见
2015/06/03 职场文书
安全教育培训心得体会
2016/01/15 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Python学习之包与模块详解
2022/03/19 Python
python缺失值填充方法示例代码
2022/12/24 Python