关于 create-react-app 自定义 eslint文件配置解决方案
create-react-app项目自定义eslitn配置方式
方案一 eject 项目webpack配置进行自定义
这个方案比较low,不建议使用。这里不讲解了。
方案二 在 package.json 中的 script 命令 添加环境变量 EXTEND_ESLINT=treu 开启自定义
react-script4.x版本以下可用这个方案
我们可以打开react-script 源码看到 webpack.config.js 文件
当环境变量设定为true时候,react-script会认为我们自定义eslint配置,不启用 eslint-config-react-app 的配置。
但是开启这个变量我们只能在package.json中的 eslintConfig 字段进行配置自定义,无法通过根目录 .eslintrc 配置,所以不建议使用。我们使用第三方案
方案三 react-app-rewired 和 customize-cra
react-app-rewired 和 customize-cra 是用于对react-scripts手脚架包装一次进行使用,可不对react eject 就可以对项目自定义webpack,仅限于react-scriptr4.x以下。
1.先安装依赖
npm i react-app-rewired customize-cra -D
2.在项目跟目录创建 config-overrides.js 内容如下
const { override, addWebpackAlias, useEslintRc } = require('customize-cra')
const path = require('path')module.exports = override(// 注意,一定要用 path.resolve 引入eslint的配置文件,否则不生效useEslintRc(path.resolve(__dirname, './.eslintrc.json')),// 配置路径别名addWebpackAlias({'@': path.resolve(__dirname, './src'),'_c': path.resolve(__dirname, './src/components')})
)
3.修改 package.json 的命令
"start": "cross-env REACT_APP_API=development PORT=3005 react-app-rewired start",
4.然后在根目录创建 .eslintrc.json 进行自定义eslint配置即可。这里分享一下我们团队eslint配置,具体更多配置,大家可自己到eslint官网进行参考, 0 表示关闭,1 表示警告,2 表示严重错误
{"env": {"node": true,"mocha": true,"jest": true,"es6": true,"browser": true},"extends": ["eslint:recommended","plugin:react/recommended"],"parser": "babel-eslint","parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 6,"sourceType": "module"},"plugins": ["react","jsx-a11y","react-hooks"],"settings": {"react": {"version": "detect"}},"globals": {"JSX": true,"React": true,"NodeJS": true,"Promise": true},"rules": {"no-console": [1, { "allow": ["error"] }],"consistent-return": 2,"curly": [2, "multi-or-nest"],"dot-location": 0,"eqeqeq": 2,"no-alert": 2,"no-eq-null": 2,"no-lone-blocks": 2,"no-return-await": 2,"no-unused-expressions": 2,"no-label-var": 1,"array-bracket-spacing": 2,"brace-style": 0,"comma-spacing": 1,"consistent-this": 1,"eol-last": 0,"multiline-ternary": [1, "always-multiline"],"new-cap": [2, { "capIsNew": false }],"no-trailing-spaces": 0,"semi": ["error", "never"],"space-before-blocks": 2,"space-in-parens": 2,"spaced-comment": 2,"switch-colon-spacing": ["error", { "after": true, "before": false }],"arrow-spacing": 2,"quotes": [0, "single"],"key-spacing": 2,"comma-dangle": ["error", "never"],"react-hooks/exhaustive-deps": 0,"no-empty-function": 1,"react-native/no-inline-styles": 0,"react/forbid-prop-types": 0,"react/prop-types": 0,"react/display-name": 0,"prefer-promise-reject-errors": 0,"react/no-array-index-key": 2,"react/no-unused-state": 2,"react/jsx-indent-props": 1,"react/jsx-no-comment-textnodes": 1,"react/jsx-no-duplicate-props": 2,"react/jsx-no-target-blank": [1, { "enforceDynamicLinks": "always" }],"react/jsx-no-undef": 2,"react/jsx-props-no-multi-spaces": 1,"react/jsx-tag-spacing": 1,"react/jsx-uses-vars": 2,"react/jsx-wrap-multilines": 2,"react-hooks/rules-of-hooks": 2}
}
方案4 react-script 4.x 方案
react17 官方团队修改了脚手架允许直接在外部声明.eslintrc文件覆盖eslint配置。不需要对package和react-app-rewired 和 customize-cra就可用实现eslint 配置。
在根目录创建文件 .eslintrc.json,配置的extends 字段需要改一下
{"env": {"node": true,"mocha": true,"jest": true,"es6": true,"browser": true},"extends": ["eslint:recommended","plugin:react/recommended","plugin:react-hooks/recommended"],"parser": "babel-eslint","parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 6,"sourceType": "module"},"plugins": ["react","jsx-a11y","react-hooks"],"settings": {"react": {"version": "detect"}},"globals": {"JSX": true,"React": true,"NodeJS": true,"Promise": true},"rules": {"no-console": [1, { "allow": ["error"] }],"consistent-return": 2,"curly": [2, "multi-or-nest"],"dot-location": 0,"eqeqeq": 2,"no-alert": 2,"no-eq-null": 2,"no-lone-blocks": 2,"no-return-await": 2,"no-unused-expressions": 2,"no-label-var": 1,"array-bracket-spacing": 2,"brace-style": 0,"comma-spacing": 1,"consistent-this": 1,"eol-last": 0,"multiline-ternary": [1, "always-multiline"],"new-cap": [2, { "capIsNew": false }],"no-trailing-spaces": 0,"semi": ["error", "never"],"space-before-blocks": 2,"space-in-parens": 2,"spaced-comment": 2,"switch-colon-spacing": ["error", { "after": true, "before": false }],"arrow-spacing": 2,"quotes": [0, "single"],"key-spacing": 2,"comma-dangle": ["error", "never"],"react-hooks/exhaustive-deps": 0,"no-empty-function": 1,"react-native/no-inline-styles": 0,"react/forbid-prop-types": 0,"react/prop-types": 0,"react/display-name": 0,"prefer-promise-reject-errors": 0,"react/no-array-index-key": 2,"react/no-unused-state": 2,"react/jsx-indent-props": 2,"react/jsx-no-comment-textnodes": 1,"react/jsx-no-duplicate-props": 2,"react/jsx-no-target-blank": [1, { "enforceDynamicLinks": "always" }],"react/jsx-no-undef": 2,"react/jsx-props-no-multi-spaces": 1,"react/jsx-tag-spacing": 1,"react/jsx-uses-vars": 2,"react/jsx-wrap-multilines": 2,"react-hooks/rules-of-hooks": 2}
}
关于 create-react-app 自定义 eslint文件配置解决方案相关推荐
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
最新文章
- AI落地虽千万难,智能语音往矣 | CCF-GAIR 2020
- Flutter开发之官网的第一个例子实现(46)
- IP地址与子网掩码总结
- 如何监视ps/查询的性能和使用
- 简单易用的MongoDB
- LeetCode MySQL 1127. 用户购买平台 *
- twisted系列教程十七–用inlineCallbacks来管理callbacks
- MFC改变对话框背景颜色
- Bailian3708 1的个数【进制】
- 网络安全web渗透技术
- 中南大学毕业设计(论文)LaTeX模板
- Neo4j【有与无】【N6】Graph数据库内部
- irr java_Java版的IRR(内部收益率)实现
- 机器人定位误差标定模型
- 【Cousera】北京大学 | 计算导论与C语言基础习题_8:最长平台
- TECO状态的生产订单结算到在制品怎么办?
- linux酒吧消费,Handpick x HK I 深夜霓虹燈下的迷幻酒吧
- 立创开源|USB示波器+信号发生器+USB存储 三合一
- electron解决下载慢(亲测有效)
- python手机自动回复_用python itchat写一个微信机器人自动回复
热门文章
- python 输出纯音频_Python如何录制系统音频(扬声器的输出)?
- Win11提示无法安装程序怎么办 Win11提示无法安装程序的解决方法
- Win7系统账户被禁用的解决方法
- OneNote怎样显示或者隐藏网格线
- 查看表字段信息 sql,mysql,oracle
- qtabwidget放大_Qt自定义弹窗屏蔽父窗口(QWidget设置setWindowModality(Qt::ApplicationModal);以后再show)...
- Mysql 5.7 的‘虚拟列’是做什么?
- mysql查询单词出现的位置_在MySQL中从左侧获取一些单词
- mysql数据库栏目_MySQL的一些小技巧(持续更新) - mysql数据库栏目
- 巨一自动化工业机器人_工业机器人和自动化设备连接器