详解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数组的使用
Jul 29 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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 $_ENV为空的原因分析
2009/06/01 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python多线程实现同步的四种方式
2017/05/02 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
Django实现网页分页功能
2019/10/31 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
计算机个人求职信范例
2014/01/24 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
php双向队列实例讲解
2021/11/17 PHP