详解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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JavaScript中的null和undefined用法解析
Sep 30 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php strcmp使用说明
2010/04/22 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
php中and 和 &&出坑指南
2018/07/13 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
新闻发布会主持词
2014/03/28 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
公司承诺书范文
2014/05/19 职场文书
正风肃纪剖析材料
2014/09/30 职场文书