本文已参与「新人创作礼」活动,一起开启掘金创作之路。
关键词: 代码规范 eslint prettier stylelint husky lint-staged commitlint vite react
环境设置
- 准备项目(用 vite 快速搭建一个 react 项目)
pnpm create vite react-app
或者从零开始配置npm init -y
- 准备 git 仓库并关联
git init
- 设置
package.json
。``
// ...
// 无法通过 npm publish 发布代码
"private": true,
// publishConfig 配置会在模块发布时生效,用于设置发布时一些配置项的集合。
"publishConfig": {
"tag": "1.1.0",
"registry": "https://registry.npmjs.org/",
"access": "public" // 表示当前项目发布到NPM的访问级别,它有 restricted和public两个选项
// restricted表示我们发布到NPM上的是私有包(收费),访问级别默认为restricted
}
- 配置ide。
vscode
和prettier
会有很多默认配置,可以通过左下角设置,-> settings 进入配置界面进行管理,所有修改后的结果会保存在settings.json
文件里。在根目录新建.vscode
文件夹,里面提供一个settings.json
,可以为项目单独配置。
eslint: 对代码进行校验
- 在项目内安装
eslint
及相关的包 - 给
vscode
安装eslint
插件
pnpm add -D eslint
# 按照项目情况进行配置
pnpm create @eslint/config
# 或者使用 eslint init
npx eslint --init
# 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
// https://www.prettier.cn/docs/configuration.html
{
"semi": false,
"tabWidth": 2,
"trailingComma": "none",
"singleQuote": true,
"arrowParens": "avoid"
}
配置 .eslintignore
.prettierignore
*.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
需要单独安装一下。
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"
}
}
推荐项目
- 总是被嫌弃代码不规范?你可能需要这个工具 | web-norm 本地安装
npm install web-norm -D | yarn add web-norm -D | pnpm install web-norm -D
package.json 中新增脚本"web-norm": "web-norm"
,使用的时候直接运行npm run web-norm
就行了,mac 电脑执行npm run postinstallmac
来设置 husky 的读写权限