本文已参与「新人创作礼」活动，一起开启掘金创作之路。
关键词: 代码规范 eslint prettier stylelint husky lint-staged commitlint vite react
环境准备
用 vite 快速搭建一个 react 项目。
pnpm create vite react-app -- --template react-ts git init
vscode 和 prettier 会有很多默认配置，可以通过 CTRL + , 快捷键进入配置界面进行管理，所有修改后的结果会保存在 settings.json 文件里。在根目录新建 .vscode 文件夹，里面提供一个 settings.json，k可以为项目单独配置。
eslint: 对代码进行校验
- 在项目内安装
eslint及相关的包 - 给
vscode安装eslint插件
pnpm add -D eslint # 按照项目情况进行配置 pnpm create @eslint/config # eslint-plugin-react-hooks 用于检查 Hook 代码是否符合使用规则的插件。 pnpm add -D eslint-plugin-react-hooks # 测试 npx eslint ./src/App.tsx .eslintrc.cjs 添加配置。
"extends": [ // ... "plugin:react-hooks/recommended", ], "plugins": [ // ... "react-hooks" ], "rules": { // ... "react/prop-types": "off", }
prettier: 对代码进行格式化
# eslint-config-prettier 解决冲突，关掉与 `Prettier` 产生冲突的 `ESlint` 格式相关配置。 # eslint-plugin-prettier 解决冲突后希望通过 `Eslint` 自动保存。 pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier .eslintrc.cjs 中添加 prettier 相关配置
extends: [ "prettier", "plugin:prettier/recommended" ], plugins: [ "prettier"],
// .eslintrc.js 全量 module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", "prettier", "plugin:prettier/recommended", ], overrides: [], parser: "@typescript-eslint/parser", parserOptions: { ecmaVersion: "latest", sourceType: "module", }, plugins: ["react", "@typescript-eslint", "react-hooks", "prettier"], rules: { "react/prop-types": "off", }, };
配置 .prettierrc
json
// https://www.prettier.cn/docs/configuration.html { "semi": false, "tabWidth": 2, "trailingComma": "none", "singleQuote": true, "arrowParens": "avoid" }
配置 .eslintignore.prettierignore
bash
*.sh node_modules *.md *.woff *.ttf .vscode .idea dist /public /docs .husky .local /bin .eslintrc.js .prettierrc.js /src/mock/*
package.json 添加对应脚本
{ "scripts": { "lint:eslint": "eslint --fix --ext .js,.ts,.tsx ./src", "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,html,md}\"" } }
运行这两句脚本看看效果。
stylelint: 对样式书写规范进行校验
在进入正文之前，先处理浏览器兼容问题
vite 默认集成 postcss，所以直接安装其他依赖进行配置。webpack 需要单独安装一下。
sh
复制代码
pnpm add -D less autoprefixer postcss-less *.css 文件名改成 *.less。配置 vite.config.ts
import autoprefixer from "autoprefixer"; export default defineConfig({ css: { postcss: { plugins: [autoprefixer], }, }, });
进入正文，添加 stylelint 相关依赖。
- stylelint-less
- stylelint-config-prettier 关闭所有不必要的或可能与Prettier冲突的规则。确保将其放在 extends 队列最后，这样它将覆盖其他配置。
- stylelint-config-standard 官网提供的 css 标准
其他推荐安装插件：
- stylelint-config-recess-order 属性排列顺序
pnpm add -D stylelint stylelint-less stylelint-config-prettier stylelint-config-standard 配置 .stylelintignore .stylelintrc.cjs
// @see: https://stylelint.io module.exports = { extends: [ "stylelint-config-standard", // 配置stylelint拓展插件 "stylelint-config-prettier", // 配置stylelint和prettier兼容 ], "overrides": [ { "files": ["**/*.less"], "customSyntax": require("postcss-less"), "rules": { 'comment-empty-line-before': null, 'declaration-empty-line-before': null, 'function-name-case': 'lower', 'no-descending-specificity': null, 'no-invalid-double-slash-comments': null, 'rule-empty-line-before': 'always', } } ], plugins: ["stylelint-less"], // 配置stylelint less拓展插件 rules: {} };
# .stylelintignore node_modules dist
添加对应脚本
// package.json { "scripts": { "lint:stylelint": "stylelint --cache --fix \"**/*.{less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/", } }
lint-staged + husky: 代码提交进行校验
- lint-staged 本地暂存代码检查工具
- husky 操作 git 钩子的工具
pnpm add lint-staged husky -D # 在 package.json 中添加脚本 npm set-script prepare "husky install" # 初始化husky 将 git hooks 钩子交由 husky 执行 pnpm prepare npx husky add .husky/pre-commit "npx lint-staged" # package.json 添加 lint-staged 脚本 npm set-script lint-staged "lint-staged"
根目录创建 .lintstagedrc.json 进行配置，或者通过 lint-staged.config.js 进行配置。
{ "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"], "package.json": ["prettier --write"], "*.{scss,less,styl}": ["stylelint --fix", "prettier --write"], "*.md": ["prettier --write"] }
commit 阶段的消息模板
- commitlint commit 信息校验工具 (@commitlint/cli、@commitlint/config-conventional)
- commitizen 辅助 commit 信息 ,就像这样,通过选择输入,规范提交信息 commit 提交时，信息模板的依赖 cz-git 指南
pnpm add @commitlint/cli @commitlint/config-conventional -D npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' # 安装辅助提交依赖 pnpm i commitizen cz-git -D # 安装指令和命令行的展示信息 npm set-script commit "git-cz" # package.json 中添加 commit 指令, 执行 `git-cz` 指令 添加 commitlint.config.cjs 并且配置
module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ 2, 'always', [ 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'build', 'chore', 'revert', 'style', 'test' ] ], 'type-empty': [2, 'never'], // <type> 不能为空 'type-case': [0], 'scope-empty': [0], 'scope-case': [0], 'subject-empty': [2, 'never'], // <subject> 不能为空 (默认) 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'], 'header-max-length': [0, 'always', 72] } }
package.json 中,将原来 commit 配置,变更为自定义配置:
"config": { "commitizen": { "path": "node_modules/cz-git" } }
参考资料：
vite: vitejs.cn/config/#con…
husky + lint-staged + commitlint + eslint + prettier 统一前端代码规范及commit规范: juejin.cn/post/704768…
前端工程化：Prettier+ESLint+lint-staged+commitlint+Hooks+CI 自动化配置处理: juejin.cn/post/707489…
推荐阅读：
总是被嫌弃代码不规范？你可能需要这个工具： juejin.cn/post/712419…
