详解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 日期时间函数(经典+完善+实用)
May 27 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
Sep 01 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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/28 PHP
19个Android常用工具类汇总
2014/12/30 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
详解Python如何生成词云的方法
2018/06/01 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
python实现高效的遗传算法
2021/04/07 Python
python基础之函数的定义和调用
2021/10/24 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android