详解React开发必不可少的eslint配置


Posted in Javascript onFebruary 05, 2018

Eslint介绍

Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能.

安装eslint

$ npm install eslint -g

项目需要安装的插件

  1. "babel-eslint": "^8.0.3",
  2. "eslint": "^4.13.1",
  3. "eslint-plugin-react": "^7.5.1",

配置详情

下面的配置涵盖了开发者所需要的绝大部分信息,rules中的值0、1、2分别表示不开启检查、警告、错误。你可以看到下面有些是0,如果有需要开启检查,可以自己修改为1或者2。

module.exports = {
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "$": true,
    "process": true,
    "__dirname": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module",
    "ecmaVersion": 7
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "quotes": [2, "single"], //单引号
    "no-console": 0, //不禁用console
    "no-debugger": 2, //禁用debugger
    "no-var": 0, //对var警告
    "semi": 0, //不强制使用分号
    "no-irregular-whitespace": 0, //不规则的空白不允许
    "no-trailing-spaces": 1, //一行结束后面有空格就发出警告
    "eol-last": 0, //文件以单一的换行符结束
    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //不能有声明后未被使用的变量或参数
    "no-underscore-dangle": 0, //标识符不能以_开头或结尾
    "no-alert": 2, //禁止使用alert confirm prompt
    "no-lone-blocks": 0, //禁止不必要的嵌套块
    "no-class-assign": 2, //禁止给类赋值
    "no-cond-assign": 2, //禁止在条件表达式中使用赋值语句
    "no-const-assign": 2, //禁止修改const声明的变量
    "no-delete-var": 2, //不能对var声明的变量使用delete操作符
    "no-dupe-keys": 2, //在创建对象字面量时不允许键重复
    "no-duplicate-case": 2, //switch中的case标签不能重复
    "no-dupe-args": 2, //函数参数不能重复
    "no-empty": 2, //块语句中的内容不能为空
    "no-func-assign": 2, //禁止重复的函数声明
    "no-invalid-this": 0, //禁止无效的this,只能用在构造器,类,对象字面量
    "no-redeclare": 2, //禁止重复声明变量
    "no-spaced-func": 2, //函数调用时 函数名与()之间不能有空格
    "no-this-before-super": 0, //在调用super()之前不能使用this或super
    "no-undef": 2, //不能有未定义的变量
    "no-use-before-define": 2, //未定义前不能使用
    "camelcase": 0, //强制驼峰法命名
    "jsx-quotes": [2, "prefer-double"], //强制在JSX属性(jsx-quotes)中一致使用双引号
    "react/display-name": 0, //防止在React组件定义中丢失displayName
    "react/forbid-prop-types": [2, {"forbid": ["any"]}], //禁止某些propTypes
    "react/jsx-boolean-value": 2, //在JSX中强制布尔属性符号
    "react/jsx-closing-bracket-location": 1, //在JSX中验证右括号位置
    "react/jsx-curly-spacing": [2, {"when": "never", "children": true}], //在JSX属性和表达式中加强或禁止大括号内的空格。
    "react/jsx-indent-props": [2, 4], //验证JSX中的props缩进
    "react/jsx-key": 2, //在数组或迭代器中验证JSX具有key属性
    "react/jsx-max-props-per-line": [1, {"maximum": 1}], // 限制JSX中单行上的props的最大数量
    "react/jsx-no-bind": 0, //JSX中不允许使用箭头函数和bind
    "react/jsx-no-duplicate-props": 2, //防止在JSX中重复的props
    "react/jsx-no-literals": 0, //防止使用未包装的JSX字符串
    "react/jsx-no-undef": 1, //在JSX中禁止未声明的变量
    "react/jsx-pascal-case": 0, //为用户定义的JSX组件强制使用PascalCase
    "react/jsx-sort-props": 2, //强化props按字母排序
    "react/jsx-uses-react": 1, //防止反应被错误地标记为未使用
    "react/jsx-uses-vars": 2, //防止在JSX中使用的变量被错误地标记为未使用
    "react/no-danger": 0, //防止使用危险的JSX属性
    "react/no-did-mount-set-state": 0, //防止在componentDidMount中使用setState
    "react/no-did-update-set-state": 1, //防止在componentDidUpdate中使用setState
    "react/no-direct-mutation-state": 2, //防止this.state的直接变异
    "react/no-multi-comp": 2, //防止每个文件有多个组件定义
    "react/no-set-state": 0, //防止使用setState
    "react/no-unknown-property": 2, //防止使用未知的DOM属性
    "react/prefer-es6-class": 2, //为React组件强制执行ES5或ES6类
    "react/prop-types": 0, //防止在React组件定义中丢失props验证
    "react/react-in-jsx-scope": 2, //使用JSX时防止丢失React
    "react/self-closing-comp": 0, //防止没有children的组件的额外结束标签
    "react/sort-comp": 2, //强制组件方法顺序
    "no-extra-boolean-cast": 0, //禁止不必要的bool转换
    "react/no-array-index-key": 0, //防止在数组中遍历中使用数组key做索引
    "react/no-deprecated": 1, //不使用弃用的方法
    "react/jsx-equals-spacing": 2, //在JSX属性中强制或禁止等号周围的空格
    "no-unreachable": 1, //不能有无法执行的代码
    "comma-dangle": 2, //对象字面量项尾不能有逗号
    "no-mixed-spaces-and-tabs": 0, //禁止混用tab和空格
    "prefer-arrow-callback": 0, //比较喜欢箭头回调
    "arrow-parens": 0, //箭头函数用小括号括起来
    "arrow-spacing": 0 //=>的前/后括号
  },
  "settings": {
    "import/ignore": [
      "node_modules"
    ]
  }
};

哦,老天,你还希望看到更多的react检查器,那就去 eslint-plugin-react 的github文档去慢慢翻译吧。

某些文件关闭eslint检查

你不总是希望所有的文件都开启eslint检查,那么,给单独的js文件关闭eslint的方式,只需要在该文件的最顶部加上一段注释。

/*eslint-disable*/
function test() {
  return true
}

给某一行js代码关闭eslint检查

关闭整个js文件的行为有点暴力,别担心,你还可以只给其中某段代码关闭eslint。

// eslint-disable-next-line
alert('foo')

eslint配置文件类型

eslint配置文件类型不只有js和json,其实包括下面这些:

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
详解js的作用域、预解析机制
Feb 05 #Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 #Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
详解vue静态资源打包中的坑与解决方案
Feb 05 #Javascript
理解Koa2中的async&await的用法
Feb 05 #Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 #Javascript
使用vue如何构建一个自动建站项目
Feb 05 #Javascript
You might like
PHP中常用的转义函数
2014/02/28 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
使用python Django做网页
2013/11/04 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python之Class&Object用法详解
2019/12/25 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python 批量将中文名转换为拼音
2021/02/07 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
什么是设计模式
2012/06/17 面试题
会计自我鉴定范文
2013/10/06 职场文书
写自荐信的注意事项
2014/03/09 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
分析并发编程之LongAdder原理
2021/06/29 Java/Android