详解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 动态调整图片尺寸实现代码
Dec 28 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
js微信分享接口调用详解
Jul 23 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
详解JavaScript中分解数字的三种方法
Jan 05 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
跟我学Laravel之路由
2014/10/15 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python excel转换csv代码实例
2019/08/26 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
聚美优品陈欧广告词
2014/03/14 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
Redis如何一键部署脚本
2021/04/12 Redis