【React.js 21】Eslint代码规范

Eslint作为插件化的对javascript代码检测工具,我们可以通过修改其规则定制符合自己想要的代码检测功能。

我们在开发React的过程中,如果使用==来判等的话,经常能看到如下图所示的警告:

警告

这就是Eslint的代码检测的功劳,那个eqeqeq就是对应检测的规则名称,在Package.json中,我们能看到Eslint的配置:

"eslintConfig": {
  "extends": "react-app"
}

因为我们是使用create-react-app脚手架创建的项目,所以是继承自配置中的"react-app"
现在我们来简单的写写自己的规则,我们先关闭这个烦人的警告:

"eslintConfig": {
  "extends": "react-app",
  "rules":{
    "eqeqeq":["off"]
  }
}

意思言简意赅,eqeqeq规则关闭off,但是其实它是按你设置的级别去执行对应的检测,级别分为:0 = off, 1 = warn, 2 = error
对应其他的规则你都能自己手动去关闭,规则名就在警告的末尾。

又例如,我们不希望项目中有分号,统一使用无分号的模式,我们就可以添上:

  "eslintConfig": {
    "extends": "react-app",
    "rules":{
      "eqeqeq":["off"],
      "semi":["error","never"]
    }
  },

"error"是级别,"never"是可选项之一,意思是不允许出现任何的分号。
具体规则的配置,还有更多详细的规则,可以参考官网

通过Eslint的配置,我们可以定制自己团队的代码规范,这里推荐一个Airbnb代码规范,里面包含了React的规范。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,708评论 3 14
  • 两个月之前在项目中就开始使用 Eslint ,当时直接 copy 别人的 .eslintrc.js 文件,感觉好复...
    dkvirus阅读 112,394评论 33 190
  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
    点柈阅读 26,129评论 3 42
  • 先要知道 Lint 是什么,Eslint 又是什么; > - 因为想要的太多(想把 Eslint 官方文档里每个字...
    神秘者007阅读 3,961评论 0 0
  • 前言 对于少量的代码,我们通常能够通过肉眼或者代码编辑器,甚至控制台出现的错误,找出对应有问题的代码行,可以进行排...
    itclanCoder阅读 5,289评论 1 2