我的编程空间,编程开发者的网络收藏夹
学习永远不晚

详解React项目中eslint使用百度风格

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

详解React项目中eslint使用百度风格

1.安装百度Eslint Rule 插件


npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config

// react项目
npm i -D eslint-plugin-react eslint-plugin-react-hooks
 
// 如果需要支持typescript的话
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

2.配置.eslintrc文件


{
    "parser": "@typescript-eslint/parser", // typescript解析器
    "extends": [
        "@ecomfe/eslint-config", // 继承厂内EE-eslint规则配置
        "@ecomfe/eslint-config/react"
    ],
    "plugins": [
        "@typescript-eslint", // 增加一些typescript语法检查
        "react", // react语法检查
        "react-hooks" // hooks语法检查
    ],
    "rules": {
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1
            }
        ], // 强制4格风格
        "no-unused-vars": "off", // 关掉eslint no-unused-vars默认配置
        "@typescript-eslint/no-unused-vars": [
            "warn",
            {
                "vars": "all",
                "args": "after-used",
                "ignoreRestSiblings": false
            }
        ], // 使用@typescript-eslint/no-unused-vars配置
        "import/no-unresolved": "off",
        "react/jsx-uses-react": 2, // 屏蔽"React" is defined but never used错误
        "import/order": "off", // 不需要引入顺序验证
        "comma-dangle": [
            "off"
        ], // 不允许最后多余的逗号
        "@typescript-eslint/consistent-type-definitions": [
            "off"
        ], // 先off掉
        "react-hooks/rules-of-hooks": "error", // 检查Hook的规则
        "react-hooks/exhaustive-deps": "warn", // 检查effect的依赖
        "max-params": [
            "warn",
            8
        ], // 方法最多8个参数
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": [
            "error",
            {
                "functions": false,
                "variables": false
            }
        ], // 注意:方法和变量可以在使用之后定义!为了解决hooks中经常会出现的循环依赖的问题,不过要注意危险
        "react/jsx-no-bind": [
            "warn",
            {
                "allowArrowFunctions": true // 暂且允许箭头函数,来提升代码可读性
            }
        ],
        "max-nested-callbacks": [
            "warn",
            4
        ], // 循环最多4层,超过4层警告
        "react/require-default-props": "off", // 组件的非必填属性不要求一定有默认值
        "react/no-find-dom-node": "off", // 暂且允许使用react-dom的findDOMNode方法
        "@babel/object-curly-spacing": "off",
        "object-curly-spacing": [
            "off",
            "always",
            {
                "arraysInObjects": false
            }
        ], // 对象括号是否允许添加空格
        "brace-style": [
            "off",
            "1tbs"
        ],
        "react/no-string-refs": "warn", // string类型的refs报warn
        "no-unreachable-loop": "off",
        "eol-last": ["error", "always"] // 文件末尾需要多空一行
    }
}

在这里插入图片描述

3.安装Eslint, Prettier Eslint插件

在这里插入图片描述
在这里插入图片描述

4.如果不可以检查一下Prettier ESlint需要的包有没有安装

在这里插入图片描述

到此这篇关于React项目中eslint使用百度风格的文章就介绍到这了,更多相关React项目使用eslint内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

详解React项目中eslint使用百度风格

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue项目中使用百度地图api的详细步骤

在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-11-13

怎么在vue项目中使用百度地图API

小编给大家分享一下怎么在vue项目中使用百度地图API,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!为什么要使用VueVue是一款友好的、多用途且高性能的Java
2023-06-14

React项目搭建与Echars工具使用详解

这篇文章主要介绍了React项目搭建与Echars工具使用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-03-20

怎么Android项目中使用百度语音识别

这篇文章将为大家详细讲解有关怎么Android项目中使用百度语音识别,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。使用百度语音识别,先要申请APP ID,这个直接到百度网站上有说明文档,本文
2023-05-31

React项目使用ES6解决方案及JSX使用示例详解

这篇文章主要为大家介绍了React项目使用ES6解决方案及JSX使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-12-23

解决Vite-React项目中Js使用Jsx语法报错

在做存量项目接入Vite测试时发现,存量(老)项目中很多是直接在js中书写jsx语法,使用Vite启动时就会抛出一堆问题Failed to parse source。

项目中使用TypeScript的TodoList实例详解

这篇文章主要为大家介绍了项目中使用TypeScript的TodoList实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-04

Vue 项目中Echarts 5使用方法详解

这篇文章主要为大家介绍了Vue 项目中Echarts 5使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

Node ORM项目中使用Sequelize实例详解

这篇文章主要为大家介绍了Node ORM项目中使用Sequelize实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-05-16

在vue项目中使用Swiper插件详解

这篇文章主要介绍了在vue项目中使用Swiper插件详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-14

编程热搜

目录