前端工程化-规范项目创建React+Vite+TS
前言
随着前端技术的快速发展,前端工程化已经成为现代化前端开发的必备技能。本篇文章。来带大家实现一个标准化前端项目。主要技术有技术栈为React + Vite + TS,用到规范工具有eslint+prettier+stylelint,规范化Git提交流程工具husky + commitlint + lint-staged,还有vite与tsconfig的配置。
项目安装前的准备
vscode先提前装好eslint,prettier,stylelint这三个插件。
后面统一使用pnpm包管理工具,pnpm是什么,先理解就是一个强大的包管理工具。
npm install -g pnpm
配置淘宝镜像源
pnpm config set registry https://registry.npm.taobao.org/
初始化项目
注意:这里加右划线转义,实际并不用输入
pnpm create vite react-starter --template react-swc-ts
pnpm i
pnpm i @types/node -D
- package.json 中配置 node 版本限制提示
“engines”: { “node”: “>=16.0.0” },
eslint、prettier、stylelint配置
配置 eslint 检查代码规范
pnpm i eslint -D
生成配置文件
pnpm eslint --init
在选项中按下面选择
- To check syntax and find problems //这个选项是eslint默认选项,这样就不会和pretter起风格冲突 |
配置eslintrc.json->rules里配置不用手动引入 react,和配置不可以使用 any
注意使用 React.FC 的时候如果报错说没有定义 props 类型,那需要引入一下 react
"rules": {
//不用手动引入react
"react/react-in-jsx-scope": "off",
//使用any报错
"@typescript-eslint/no-explicit-any": "error",
}工作区配置.vscode>settings.json,配置后 vscode 保存时自动格式化代码风格
比如写了一个 var a = 100,会被自动格式化为 const a = 100
{ |
- 新建.eslintignore,eslint 会自动过滤 node_modules、dist等。(先建好,之后根据需要再添加)
- 掌握eslint格式化命令,后面使用 lint-staged 提交代码的时候需要配置
为什么上面有 vscode 自动 eslint 格式化,还需要命令行: 因为命令行能一次性爆出所有警告问题,便于找到位置修复,这是使用eslint代码检查并修复的命令
npx eslint . –fix_//用npx使用项目里的eslint,没有的话也会去使用全局的eslint_
npx eslint . –fix //全部类型文件
npx eslint . –ext .ts,.tsx –fix //–ext可以指定文件后缀名s
eslintrc.json 里配置
"env": { |
配置 prettier 检查代码风格
pnpm i prettier -D
新建.prettierrc.json.下面注释要删掉,prettier 的配置文件 json 不支持注释
{
"singleQuote": true, // 单引号
"semi": false, // 分号
"trailingComma": "none", // 尾随逗号
"tabWidth": 2, // 两个空格缩进
"plugins": ["prettier-plugin-tailwindcss"] //tailwind插件
}配置.prettierignore
dist
pnpm-lock.yaml配置.vscode>settings.json,配置后 vscode 保存时自动格式化代码风格
{
"editor.codeActionsOnSave": {
// 每次保存的时候将代码按照 eslint 格式进行修复
"source.fixAll.eslint": true
},
//自动格式化
"editor.formatOnSave": true,
//风格用prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
}掌握prettier命令行
可以让之前没有格式化的错误一次性暴露出来npx prettier –write . //使用Prettier格式化所有文件
配置 stylelint 检查 CSS 规范
pnpm i -D stylelint stylelint-config-standard
配置.stylelintrc.json
{
"extends": "stylelint-config-standard"
}配置.vscode>settings.json,配置后 vscode 保存时自动格式化 css
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true //自动格式化stylelint
},
}掌握stylelint命令行
npx stylelint “**/*.css” –fix//格式化所有css,自动修复css
规范git提交流程
- husky是一个Git钩子工具,可以在Git操作前或后执行一些脚本,比如在提交代码前执行代码检查、格式化等操作。
- commitlint是一个用于规范化Git提交信息的工具,可以检查提交信息是否符合规范,以确保提交信息的一致性和可读性。
- lint-staged是一个用于在Git暂存区中对代码进行检查和格式化的工具,可以在提交代码前对修改的代码进行检查和格式化,以确保提交的代码质量。
配置 husky 使用 git hook
git init
pnpm i husky -D
pnpm husky install
// commit-msg 使用 commitlint
npx husky add .husky/commit-msg ‘npx --no -- commitlint --edit “$1”‘
// pre-commit 使用 lint-staged,
npx husky add .husky/pre-commit “npm run lint-staged”
配置 commitlint 检查提交信息
commitlint即是给git commit的信息检查的,提交规范参考
pnpm i @commitlint/cli @commitlint/config-conventional -D
@commitlint/config-conventional 这个预设规则集合。它定义了一组规则,用于检查 Git Commit Message 是否符合常用的约定。这些约定包括 Commit Message 的格式、类型、主题、正文等,以确保 Commit Message 的清晰和一致性。通过使用这个配置,你可以在提交代码时自动检查 Commit Message 是否符合规范,从而提高代码质量和可维护性。
- 根目录下新建文件
.commitlintrc.json
添加配置如下{
"extends": ["@commitlint/config-conventional"]
}
配置 lint-staged 增量式检查
lint-staged 是一个 Git Hook 工具,它可以在 git commit 命令执行之前,对暂存区(stage)中的文件进行检查和格式化。增量式检查是指,lint-staged 只会检查那些被修改或新增的文件,而不会检查整个代码库中的所有文件,这样可以大大提高检查的效率。
pnpm i -D lint-staged
配置package.json
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"prepare": "husky install",
"lint-staged": "npx lint-staged"//新增,对应上面的husky命令
},根目录下新建文件
.lintstagedrc.json
添加配置如下{
"*.{ts,tsx,json}": ["prettier --write", "eslint --fix"],
"*.css": ["stylelint --fix", "prettier --write"]
}
如何git commit
前面配置husky 、commitlint 和 lint-staged ,那如何使用这些规范呢。当我们输入git commit
命令后会弹出vim的文件编辑窗,需要如下规则提交。更多规则参考
符合规范的Commit Message的提交格式如下,包含了页眉(header)、正文(body)和页脚(footer)三部分。其中,header是必须的,body和footer可以忽略。
type([scope]): subject |
注意:这里有个空格
type([scope])必须是以后的类型之一
build: 改变了项目构建系统或外部依赖项。 |
配置vite与tsconfig
配置 vite(代理/别名/drop console 等)
如果有兼容性考虑,需要使用 legacy 插件,vite 也有 vscode 插件,也可以下载使用
一些方便开发的配置vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
esbuild: {
drop: ['console', 'debugger']
},
css: {
// 开css sourcemap方便找css
devSourcemap: true
},
plugins: [react()],
server: {
// 自动打开浏览器
open: true,
proxy: {
'/api': {
target: 'https://xxxxxx',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
resolve: {
// 配置别名
alias: { '@': path.resolve(__dirname, './src') }
},
//打包路径变为相对路径,用liveServer打开,便于本地测试打包后的文件
base: './'
})配置打包分析,用 legacy 处理兼容性
pnpm i rollup-plugin-visualizer -D
// 实际遇到了再看官网用
pnpm i @vitejs/plugin-legacy -D
在vite.config.ts添加如下配置
import { visualizer } from 'rollup-plugin-visualizer' |
- 如果想手机上看网页,可以pnpm dev --host
- 如果想删除 console,可以按h去 help 帮助,再按c就可以 clear console
配置 tsconfig
{ |
如果对您有帮助,麻烦点赞收藏,让更多踩坑的人看见,有任何疑问和想法,欢迎在评论区与我交流。