vite react app

react R18 执行两次

React 18会再Strict Mode中引入一个新的开发模式。React将会对每一个组件自动取消加载并重新加载。如果其干扰了你的应用，移除Strict Mode就能够修复组件重新加载的问题

项目搭建

规范

eslint

npm init @eslint/config@latest

vscode 保存自动修复（在vscoe settings 中配置如下）

"editor.codeActionsOnSave": {

    "source.fixAll.eslint": true
}

prettier

yarn add prettier -D

yarn add eslint-config-prettier eslint-plugin-prettier -D

Husky

yarn add husky -D

npm pkg set scripts.prepare="husky install"

npm run prepare

执行下边这个命令

npx husky add .husky/pre-commit "npm run lint"

报下边这个

所以手动在.husky目录下添加了 pre-commit文件

lint-staged

yarn add lint-staged -D

commitlint

yarn add @commitlint/cli @commitlint/config-conventional -D

创建 .commitlintrc.cjs

.husky目录添加 commit-msg 文件

stylelint

yarn add stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html stylelint-config-prettier -D

yarn add -D postcss-less

yarn add -D stylelint-order

对less的支持

Vite本身提供了对.scss/.sass/.less/.styl/.stylus文件的内置支持。无需再安装特定的Vite插件，但必须安装相应的预处理器依赖。

yarn add -D less

问题

eslint 安装的新版本(9.x) 配置较之前版本变化很大

eslint 安装的新版本(9.x) 配置较之前版本变化很大，需对照文档配置，避免错误

之前extends 配置项现在配置 prettier 的recommended 报错，带解决

配置 husky lint-staged 后测试提交

解决在eslint.config.js添加下边配置

settings: {
    "react": {
    "version": "detect" // 或者明确指定版本号，例如 "17.0"
    }
}

stylelint 配置文件添加了参考文档的一些规则，一直报错

查看了知乎 https://zhuanlan.zhihu.com/p/700412551 这个文档，感觉是因为stylelint版本太高，所以以前的规则都失效了

git 提交时 stylelint修复 stylus文件报错

待解决（只能先改为less文件）

参考链接

react router官方文档地址

项目搭建参考

eslint vscode保存自动格式化参考

Git工作流规范（husky + lint-staged

szwc/my-react-app