加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React项目笔记之create-react-app自定义ESLint配置文件

发布时间:2020-12-15 07:28:00 所属栏目:百科 来源:网络整理
导读:原博客地址:https://yezihaohao.github.io 前言 了解eslint基础用法,若想更进一步了解其,请查阅官网以及相关资料(中文网) 若有问题请指出或加群264591039与我讨论。 初始化项目 使用create-react-app 创建项目(此过程不做详解),然后运行 npm run eject

原博客地址:https://yezihaohao.github.io

前言

了解eslint基础用法,若想更进一步了解其,请查阅官网以及相关资料(中文网)

若有问题请指出或加群264591039与我讨论。

初始化项目

使用create-react-app 创建项目(此过程不做详解),然后运行npm run eject使其暴露webpack等配置文件

自定义eslint

上述步骤并没有暴露react脚手架封装的eslint操作,为了使得项目统一规范化,添加jsx-eslint操作
是非常不错的选择(关于js其他的eslint操作,请参见官网,本文主要针对jsx限制规范配置)。

  • 在项目根目录下添加.eslintrc文件

  • 在根目录找到config文件夹,并找到文件夹下的webpack.config.dev.js文件

  • webpack.config.dev.js文件添加如下代码:

enforce: 'pre',use: [{
  // @remove-on-eject-begin
  // Point ESLint to our predefined config.
  options: {
    //configFile: path.join(__dirname,'../.eslintrc'),useEslintrc: true
  },// @remove-on-eject-end
  loader: 'eslint-loader'
}],

  • 运行npm start,此时,你编写的jsx文件都是经过.eslintrc的配置限制

.eslintrc文件基本规范配置

ps: 配置的value对应的值: 0 : off 1 : warning 2 : error
不满足以下的规范设置的,编译代码时将有黄色提示
具体配置规则可参见Github

{
  "extends": "react-app","rules": {
    "no-multi-spaces": 1,"react/jsx-space-before-closing": 1,// 总是在自动关闭的标签前加一个空格,正常情况下也不需要换行
    "jsx-quotes": 1,"react/jsx-closing-bracket-location": 1,// 遵循JSX语法缩进/格式
    "react/jsx-boolean-value": 1,// 如果属性值为 true,可以直接省略
    "react/no-string-refs": 1,// 总是在Refs里使用回调函数
    "react/self-closing-comp": 1,// 对于没有子元素的标签来说总是自己关闭标签
    "react/jsx-no-bind": 1,// 当在 render() 里使用事件处理方法时,提前在构造函数里把 this 绑定上去
    "react/sort-comp": 1,// 按照具体规范的React.createClass 的生命周期函数书写代码
    "react/jsx-pascal-case": 1        // React模块名使用帕斯卡命名,实例使用骆驼式命名
  }
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读