前端工程化-规范项目创建React+Vite+TS+eslint+prettier+stylelint+husky + commitlint + lint-staged

本文节选自我的博客：前端工程化 - 规范项目创建 React+Vite+TS

• 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
• CSDN主页：爱吃糖的猫
• 我的博客：爱吃糖的猫
• Github主页: MilesChen
• 支持我：点赞+收藏⭐️+留言
• 介绍：The mixture of WEB+DeepLearning+Iot+anything

前言

随着前端技术的快速发展，前端工程化已经成为现代化前端开发的必备技能。本篇文章。来带大家实现一个标准化前端项目。主要技术有技术栈为React + Vite + TS，用到规范工具有eslint+prettier+stylelint，规范化Git提交流程工具husky + commitlint + lint-staged，还有vite与tsconfig的配置。

项目安装前的准备

1. vscode先提前装好eslint，prettier，stylelint这三个插件。

2. 后面统一使用pnpm包管理工具,pnpm是什么，先理解就是一个强大的包管理工具。

npm install -g pnpm

3. 配置淘宝镜像源

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起风格冲突
- JavaScript modules (import/export)
- React
- YES
- Browser
- JSON
- Yes
- pnpm

• 配置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

{
 "editor.codeActionsOnSave": {
 // 每次保存的时候将代码按照 eslint 格式进行修复
 "source.fixAll.eslint": true,
 //自动格式化
 "editor.formatOnSave": true
 }
}

• 新建.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": {
 "browser": true,
 "es2021": true,
 "node": true // 因为比如配置vite的时候会使用到
},

配置 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
// 空一行
[body]
// 空一行
[footer]

注意:这里有个空格

type([scope])必须是以后的类型之一

build: 改变了项目构建系统或外部依赖项。
ci: 更改了CI配置或脚本。
docs: 只更改文档。
feat: 新功能。
fix: 修复了一个 bug。
perf: 改进了性能。
refactor: 代码重构，既没有增加新功能，也没有修复 bug。
style: 格式化、缺少分号等；对代码逻辑没有影响的更改。
test: 增加或修改了测试代码。

配置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'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
   plugins: [
    react(),
    visualizer({
      open: false // 打包完成后自动打开浏览器，显示产物体积报告
    }),
    //考虑兼容性，实际遇到了再看官网用
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],  // 使用 React 插件
})

• 如果想手机上看网页，可以pnpm dev --host
• 如果想删除 console，可以按h去 help 帮助，再按c就可以 clear console

配置 tsconfig

{
  "compilerOptions": {
    // 编译目标为最新版本的 ECMAScript 版本
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    // 使用了 Node.js 的模块解析方式
    "moduleResolution": "Node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,

    "allowJs": false,
    // 模块导入方式使用 CommonJS 还是  ES 模块规范 true表示为 ES 模块方式
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

---

如果对您有帮助，麻烦点赞收藏，让更多踩坑的人看见，有任何疑问和想法，欢迎在评论区与我交流。