Skip to content

Commit

Permalink
feat: ✨ 新增react hooks规则检查
Browse files Browse the repository at this point in the history
  • Loading branch information
guokaigdg committed Mar 2, 2023
1 parent 3532e2e commit 15346c0
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 87 deletions.
12 changes: 8 additions & 4 deletions .eslintrc.js
Expand Up @@ -13,7 +13,8 @@ module.exports = {
extends: [
'eslint:recommended', // 使用eslint中recommened的规则
'plugin:react/recommended', // 推荐的react lint配置
'plugin:@typescript-eslint/recommended' // 需额外手动安装 @typescript-eslint/eslint-plugin
'plugin:@typescript-eslint/recommended', // 可开启针对 ts 语法推荐的规则定义, 需额外手动安装 @typescript-eslint/eslint-plugin
'plugin:react-hooks/recommended' // react hook当依赖项指定不正确时,会发出警告并建议修复。
],
overrides: [],
// ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器
Expand All @@ -33,17 +34,20 @@ module.exports = {
},
// ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。
// 在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
plugins: ['react', '@typescript-eslint'],
plugins: ['react', '@typescript-eslint', 'react-hooks'],
// ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:
rules: {
'import/extensions': [
ERROR,
OFF,
'ignorePackages',
{
ts: 'never',
tsx: 'never',
js: 'never'
}
]
],
'@typescript-eslint/no-var-requires': OFF, // 忽略没有导入声明模块
'react-hooks/rules-of-hooks': ERROR, // 检查 Hook 的规则
'react-hooks/exhaustive-deps': WARN // 检查 Effect 的依赖
}
};
19 changes: 11 additions & 8 deletions .stylelintrc.js
@@ -1,10 +1,14 @@
module.exports = {
// stylelint-config-standard: stylelint配置标准, 如需修改请在rules添加配置
// stylelint-config-rational-order: 将相关属性声明进行排序, 按照(1.Positioning 2.Box Model 3.Typography 4.Visual 5.Animation 6.Misc)
// stylelint-config-prettier: 关闭所有不必要的或者可能与prettier相冲突的规则。(放到后面)
extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
// stylelint-declaration-block-no-ignored-properties: 提示样式矛盾情况, 禁止由于同一规则中的另一个属性值而忽略的属性值。
plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties', 'stylelint-scss'],
extends: [
'stylelint-config-standard', // stylelint配置标准, 如需修改请在rules添加配置
'stylelint-config-rational-order', // 将相关属性声明进行排序, 按照(1.Positioning 2.Box Model 3.Typography 4.Visual 5.Animation 6.Misc)
'stylelint-config-prettier' // 关闭所有不必要的或者可能与prettier相冲突的规则。(放到后面)
],

plugins: [
'stylelint-order', // 提示样式矛盾情况, 禁止由于同一规则中的另一个属性值而忽略的属性值。
'stylelint-declaration-block-no-ignored-properties' // 提示样式矛盾情况, 禁止由于同一规则中的另一个属性值而忽略的属性值。
],
// rules: 其中添加重写和添加内容。可以通过将规则的值设置为 null 来关闭规则
rules: {
'plugin/declaration-block-no-ignored-properties': true,
Expand All @@ -16,8 +20,7 @@ module.exports = {
'block-no-empty': null,
'value-keyword-case': null,
'rule-empty-line-before': ['always', {except: ['after-single-line-comment', 'first-nested']}],
'at-rule-no-unknown': null,
'scss/at-rule-no-unknown': true
'at-rule-no-unknown': null
},
// 忽略检测文件
ignoreFiles: ['node_modules/**/*', 'build/**/*', 'dist/**/*', 'src/assets/font/*']
Expand Down
26 changes: 18 additions & 8 deletions README.md
Expand Up @@ -4,8 +4,10 @@
<div align="center">
<img src='./docs/images/home.png' style='width: 75%'/>
</div>

<!-- 简体中文 | [English](https://github.com/xxx.md) -->
<br>
<p align="center">
简体中文 | <a href="./docs/README.en.md">English</a>
</p>

## 👨🏻‍💻 项目说明

Expand All @@ -18,8 +20,7 @@
- 📦 开箱即用,无需配置
- 📝 全面注释说明,学习低成本
- 🚀 启动编译迅速
- ⭐️ 1.0 版本(2023/2/21 日)已经全部完成
- 📬 有问题直接 issues 或者留言
- 🌱 极易定制, 拓展容易

## 🚀 技术栈

Expand All @@ -46,20 +47,20 @@
## ⌛️ 安装项目依赖

```
if you prefer npm
npm
$ npm install
if you prefer yarn
yarn
$ yarn
```

## 🚀 运行项目

```
if you prefer npm
npm
$ npm run start
if you prefer yarn
yarn
$ yarn dev
```

Expand Down Expand Up @@ -149,3 +150,12 @@ merge 🔀 合并分支
└── yarn.lock # yarn安装包锁定管理
```

## 🤝 如何贡献

- 📬 有问题直接 issues 或者留言
- 欢迎所有的贡献者,在成为贡献者之前,请先阅读贡献指南。如果您已经了解,快来 Issus 或 Pull requests 成为贡献者吧,让我们和小蝴蝶一起成长,一起变得更好、更棒!

## 开源协议

该项目的代码和文档基于  MIT License  开源协议。
161 changes: 161 additions & 0 deletions docs/README.en.md
@@ -0,0 +1,161 @@
<h1 align="center">react 模板</h1>
<br/>

<div align="center">
<img src='./images/home.png' style='width: 75%'/>
</div>
<br>
<p align="center">
<a href="../README.md">简体中文</a> | English
</p>

## 👨🏻‍💻 项目说明

- react 模板, 一个比 CRA 更丰富的模板

- 开发配置文档说明 [React18 + webpack5 + TypeScript4 + react-router-dom](https://juejin.cn/post/7197790401495121977)

## 📱 特点

- 📦 开箱即用,无需配置
- 📝 全面注释说明,学习低成本
- 🚀 启动编译迅速
- 🌱 极易定制, 拓展容易

## 🚀 技术栈

[![react](https://img.shields.io/badge/react-18.2.0-brightgreen.svg)](https://github.com/facebook/react/) [![TypeScript](https://img.shields.io/badge/TypeScript-4.9.4-brightgreen.svg)](https://github.com/microsoft/TypeScript)[![webpack](https://img.shields.io/badge/webpack-5.75.0-brightgreen.svg)](https://github.com/facebook/react/) [![axios](https://img.shields.io/badge/axios-0.18.0-brightgreen.svg)](https://github.com/axios/axios) [![mobx](https://img.shields.io/badge/mobx-6.8.0-brightgreen.svg)](https://github.com/mobx) [![react-router-dom](https://img.shields.io/badge/react--router--dom-6.8.1-brightgreen.svg)](https://github.com/remix-run/react-router) [![MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)]()

- React v18
- react-dom v18
- React Hook
- TypeScript v4
- webpack v5
- axios v1
- mobx v6
- mobx-react-lite v3
- react-router-dom v6

## 🎄 陆续新增内容:

- ① 样式 ✅ 2023/2/6 日提交 [config: 🔧  新增样式文件(css/less/sass/postCss)处理](https://github.com/guokaigdg/react-enterprise-template/commit/11fb415bac609dfa7474a1ee2db93ccb4a350a51)
- ② 代码规范 ✅ 2023/2/7 日提交 [config: 🔧  新增 Prettier/ESlint/StyleLint/EditorConfig 代码规范](https://github.com/guokaigdg/react-enterprise-template/commit/87dd1ca333f81203dd245a6eb40479a0745f096f)
- ③ 路由 ✅ 2023/2/8 日提交 [config: 🔧 新增路由管理 react-router-dom v6](https://github.com/guokaigdg/react-enterprise-template/commit/239446d0709eb52bad2b48af4983eef91c49f60d)
- ④ 网络请求 ✅ 2023/2/21 日提交 [feat: ✨  新增网络请求 Axios v1](https://github.com/guokaigdg/react-enterprise-template/commit/27cd67f641d5ecf53b89770195f75bd32bccce46)
- ⑤ 数据共享 ✅ 2023/2/13 日提交 [feature: ✨  新增状态管理 Mobx v6](https://github.com/guokaigdg/react-enterprise-template/commit/992e1884943d4f8bda836f48c60df473418397d7)

## ⌛️ 安装项目依赖

```
npm
$ npm install
yarn
$ yarn
```

## 🚀 运行项目

```
npm
$ npm run start
yarn
$ yarn dev
```

## 📦 打包编译

```
npm run build:qa // 测试环境
npm run build:prod // 线上环境
```

## 💡 分支说明

| 分支 | 说明 |
| ---- | -------- |
| main | 主分支 |
| dev | 开发分支 |

## 代码提交规范

```
git <type>: <subject>
git commit -m “feat: 项目初始化”
```

### type 参考:

```
fix 🐛 Bug修复
feature ✨ 引入新特性
docs 📝 文档书写改动
prune 🔥 移除代码或文件
ui 💄 更新UI和样式文件
perf ⚡ 性能相关优化
rocket 🚀 部署功能
style 🎨 style修改
init 🎉 初始化提交
release 🔖 发布版本
wip 🚧 正在进行中, 且有可能出现不稳定运行的提交
config 🔧 修改配置文件
refactot 🔨 重构(既不增加新功能, 也不修改bug的代码改动)
merge 🔀 合并分支
```

## 📂 目录结构

```
├── .vscode
│ └──setting.json # 先于vscode全局的settings.json配置
├── doc # 开发文档记录
├── webpack # 打包编译
│ └──config # webpack配置
│ ├── webpack.common.js # 基础配置
│ ├── webpack.dev.js # 开发环境配置
│ └──webpack.prod.js # 生产环境配置
├── pubilc
│ ├──favicon.ico # HTML图标
│ └──index.html # HTML入口模板
├── src
| ├── api # 接口配置
| ├── assets # 静态资源
│ ├── components # 项目通用通用组件
│ ├── http # 请求统一封装
│ ├── httpinterface # ts类型定义
│ ├── constData # 系统内的常量列表
│ ├── router # 统一路由入口
│ ├── store # 数据共享
│ ├── styles # 全局样式
│ ├── utils # 工具库
│ ├── view # 页面
│ ├── App.tsx # 主界面
│ └──index.tsx # 入口文件
├── .babelrc.js # babel配置
├── .editorconfig # 跨编辑器维护一致编码风格
├── .env.json # 环境变量配置
├── .eslintignore # ESLint忽略检测文件
├── .eslintrc.js # ESLint配置
├── .gitignore # git提交忽略文件
├── .npmrc
├── .prettierignore # prettierc忽略文件
├── .prettierrc # prettierc配置
├── .stylelintrc.js # 代码风格配置
├── LICENSE # 开源协议
├── package-lock.json # npm安装包锁定管理
├── package.json # 依赖包管理
├── README.md # 项目说明
├── tsconfig.json # ts配置文件
└── yarn.lock # yarn安装包锁定管理
```

## 🤝 如何贡献

- 📬 有问题直接 issues 或者留言
- 欢迎所有的贡献者,在成为贡献者之前,请先阅读贡献指南。如果您已经了解,快来 Issus 或 Pull requests 成为贡献者吧,让我们和小蝴蝶一起成长,一起变得更好、更棒!

## 开源协议

该项目的代码和文档基于  MIT License  开源协议。
48 changes: 24 additions & 24 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 15346c0

Please sign in to comment.