详解React开发必不可少的eslint配置
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
Eslint介绍
Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能.
安装eslint
项目需要安装的插件
- "babel-eslint": "^8.0.3",
- "eslint": "^4.13.1",
- "eslint-plugin-react": "^7.5.1",
配置详情
下面的配置涵盖了开发者所需要的绝大部分信息,rules中的值0、1、2分别表示不开启检查、警告、错误。你可以看到下面有些是0,如果有需要开启检查,可以自己修改为1或者2。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 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的方式,只需要在该文件的最顶部加上一段注释。
给某一行js代码关闭eslint检查
关闭整个js文件的行为有点暴力,别担心,你还可以只给其中某段代码关闭eslint。
eslint配置文件类型
eslint配置文件类型不只有js和json,其实包括下面这些:
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- .eslintrc
- package.json
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
React中hook函数与useState及useEffect的使用
这篇文章主要介绍了React中hook函数与useState及useEffect的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-10-10React从react-router路由上做登陆验证控制的方法
本篇文章主要介绍了React从react-router路由上做登陆验证控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-05-05React教程之Props验证的具体用法(Props Validation)
这篇文章主要介绍了React教程之Props验证的具体用法(Props Validation),非常具有实用价值,需要的朋友可以参考下2017-09-09解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)
这篇文章主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
最新评论