PCH1024

Appearance

前端开发规范 ​

PNPM + ESLint + Prettier + Husky + lint-staged + Commitizen

  • ESLint JS 代码检测工具，检测并提示错误或警告信息。
  • Prettier 代码自动化格式化工具，更好的代码风格效果。
  • Husky 一个支持所有客户端 GitHooks 的工具，在提交或推送时使用它来整理提交消息、运行测试、整理代码等。
  • lint-staged 是一个前端文件过滤工具, 它仅过滤 Git 代码暂存区文件。当 git commit 时, pre-commit 钩子会启动, 执行 lint-staged 命令。
  • Commitizen 使用一组标准化的规则流程来编写提交，使提交更易于阅读。

代码规范 ​

使用 prettier 进行格式化，使用 linters 来捕捉 bug！

bash
# 安装代码检测和格式化工具
pnpm i -wD eslint prettier eslint-config-prettier eslint-plugin-prettier

# 可选安装
pnpm i -wD @typescript-eslint/eslint-plugin
pnpm i -wD @typescript-eslint/parser
pnpm i -wD eslint-plugin-react
pnpm i -wD eslint-plugin-react-hooks
pnpm i -wD eslint-plugin-vue

# eslint 初始化配置，根据提示进行选择和配置，生成 .eslintrc.yaml
npx eslint --init
# 安装代码检测和格式化工具
pnpm i -wD eslint prettier eslint-config-prettier eslint-plugin-prettier

# 可选安装
pnpm i -wD @typescript-eslint/eslint-plugin
pnpm i -wD @typescript-eslint/parser
pnpm i -wD eslint-plugin-react
pnpm i -wD eslint-plugin-react-hooks
pnpm i -wD eslint-plugin-vue

# eslint 初始化配置，根据提示进行选择和配置，生成 .eslintrc.yaml
npx eslint --init
  • 配置文件
查看 .eslintrc.yaml 配置文件
yaml
# 配置参考文档 https://eslint.org/docs/latest/use/getting-started
# 配置运行环境
env:
    browser: true
    es2021: true
# FIX Warning: React version not specified in eslint-plugin-react settings.
settings:
    react:
        version: '18.2.0'
# 配置规则继承
extends:
    - eslint:recommended
    - plugin:@typescript-eslint/recommended
    - plugin:react/recommended
    - plugin:react/jsx-runtime
    - plugin:react-hooks/recommended
    - plugin:vue/vue3-essential
    - prettier # 关闭所有不必要或可能与 Prettier 冲突的规则。确保把它放在最后，这样它就有机会覆盖其他配置
# 配置解析器
parserOptions:
    ecmaVersion: latest
    parser: '@typescript-eslint/parser'
    sourceType: module
    ecmaFeatures:
        jsx: true
# 配置插件
plugins:
    - '@typescript-eslint'
    - vue
    - react
    - react-hooks
    - prettier
# 配置忽略
ignorePatterns:
    - .eslintrc.cjs
    - .eslintrc.yml
    - node_modules
    - dist
# 配置详细规则
rules:
    react/jsx-uses-react: error
    react/jsx-uses-vars: error
    react-hooks/rules-of-hooks: error
    react-hooks/exhaustive-deps: warn
    indent:
        - error
        - tab
    linebreak-style:
        - error
        - unix
    quotes:
        - error
        - single
    semi:
        - error
        - always
# 配置参考文档 https://eslint.org/docs/latest/use/getting-started
# 配置运行环境
env:
    browser: true
    es2021: true
# FIX Warning: React version not specified in eslint-plugin-react settings.
settings:
    react:
        version: '18.2.0'
# 配置规则继承
extends:
    - eslint:recommended
    - plugin:@typescript-eslint/recommended
    - plugin:react/recommended
    - plugin:react/jsx-runtime
    - plugin:react-hooks/recommended
    - plugin:vue/vue3-essential
    - prettier # 关闭所有不必要或可能与 Prettier 冲突的规则。确保把它放在最后，这样它就有机会覆盖其他配置
# 配置解析器
parserOptions:
    ecmaVersion: latest
    parser: '@typescript-eslint/parser'
    sourceType: module
    ecmaFeatures:
        jsx: true
# 配置插件
plugins:
    - '@typescript-eslint'
    - vue
    - react
    - react-hooks
    - prettier
# 配置忽略
ignorePatterns:
    - .eslintrc.cjs
    - .eslintrc.yml
    - node_modules
    - dist
# 配置详细规则
rules:
    react/jsx-uses-react: error
    react/jsx-uses-vars: error
    react-hooks/rules-of-hooks: error
    react-hooks/exhaustive-deps: warn
    indent:
        - error
        - tab
    linebreak-style:
        - error
        - unix
    quotes:
        - error
        - single
    semi:
        - error
        - always
查看 .prettierignore 配置文件
bash
# 配置参考 https://www.prettier.cn/docs/ignore.html
# 独立使用 prettier-ignore
# 全局配置

*.log
*.tgz

.DS_Store
.idea
.temp
.vite_opt_cache
.vscode

dist
cache
temp
node_modules
# 配置参考 https://www.prettier.cn/docs/ignore.html
# 独立使用 prettier-ignore
# 全局配置

*.log
*.tgz

.DS_Store
.idea
.temp
.vite_opt_cache
.vscode

dist
cache
temp
node_modules
查看 .prettierrc.yaml 配置文件
yaml
# 配置参考文档 https://prettier.io/docs/en/configuration.html
# 使用 prettier 进行格式化，使用 linters 来捕捉 bug！

useTabs: true # 采用 tab 缩进还是空白缩进
tabWidth: 4 # tab 键宽度
printWidth: 120 # 使用较大的打印宽度，因为 Prettier 的换行设置似乎是针对没有注释的 JavaScript.
singleQuote: true # 字符串是否使用单引号
semi: true # 行位是否使用分号
trailingComma: 'none' # 对于 ES5 而言, 尾逗号不能用于函数参数，因此使用它们只能用于数组
bracketSpacing: true # 是否保留括号中的空格 默认true
# 配置参考文档 https://prettier.io/docs/en/configuration.html
# 使用 prettier 进行格式化，使用 linters 来捕捉 bug！

useTabs: true # 采用 tab 缩进还是空白缩进
tabWidth: 4 # tab 键宽度
printWidth: 120 # 使用较大的打印宽度，因为 Prettier 的换行设置似乎是针对没有注释的 JavaScript.
singleQuote: true # 字符串是否使用单引号
semi: true # 行位是否使用分号
trailingComma: 'none' # 对于 ES5 而言, 尾逗号不能用于函数参数，因此使用它们只能用于数组
bracketSpacing: true # 是否保留括号中的空格 默认true

提交规范 ​

  • 使用 lint-staged 组织 eslint 和 prettier 两个任务
bash
# 安装 lint-staged
pnpm i -wD lint-staged
# package.json 添加 lint-staged 配置项
# "lint-staged": {
#     "*.{js,vue,jsx,ts,tsx,cjs}": "eslint --fix",
#     "*.{js,vue,jsx,ts,tsx,cjs,css,less,html,md,json}": "prettier --write"
# }
# 安装 lint-staged
pnpm i -wD lint-staged
# package.json 添加 lint-staged 配置项
# "lint-staged": {
#     "*.{js,vue,jsx,ts,tsx,cjs}": "eslint --fix",
#     "*.{js,vue,jsx,ts,tsx,cjs,css,less,html,md,json}": "prettier --write"
# }
  • 使用 husky 代理 GitHooks，commit 时执行 lint-staged 任务
bash
# 安装 husky
npx i -wD husky
# 初始化
npx husky install
# 安装后自动启用Git挂钩
pnpm pkg set scripts.prepare="husky install"
# 配置 pre-commit 挂钩, 执行 lint-staged 任务
npx husky add .husky/pre-commit "npx lint-staged"
# 安装 husky
npx i -wD husky
# 初始化
npx husky install
# 安装后自动启用Git挂钩
pnpm pkg set scripts.prepare="husky install"
# 配置 pre-commit 挂钩, 执行 lint-staged 任务
npx husky add .husky/pre-commit "npx lint-staged"
  • 使用 commitizen 完成提交信息的规范化
bash
# 安装 commitizen
pnpm i -wD commitizen cz-conventional-changelog
# package.json 添加 config.commitizen 配置项
# "config": {
#   "commitizen": {
#     "path": "cz-conventional-changelog"
#   }
# }
# 配置 prepare-commit-msg 挂钩，执行 commitizen 的任务
npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"
# 安装 commitizen
pnpm i -wD commitizen cz-conventional-changelog
# package.json 添加 config.commitizen 配置项
# "config": {
#   "commitizen": {
#     "path": "cz-conventional-changelog"
#   }
# }
# 配置 prepare-commit-msg 挂钩，执行 commitizen 的任务
npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"
  • 使用 commitlint
bash
# 安装
pnpm i -wD @commitlint/config-conventional @commitlint/cli
# 配置
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
# 挂载
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
# 安装
pnpm i -wD @commitlint/config-conventional @commitlint/cli
# 配置
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
# 挂载
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

测试规范提交流程 ​

bash
# 测试规范提交流程
git add .
git commit
# 执行命令后：
# 1）lint-staged 执行 eslint 和 prettier 任务；
# 2）commitizen 执行 提交信息 填写任务；
# 3）保存并提交（:wq）
# 测试规范提交流程
git add .
git commit
# 执行命令后：
# 1）lint-staged 执行 eslint 和 prettier 任务；
# 2）commitizen 执行 提交信息 填写任务；
# 3）保存并提交（:wq）

༼ つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿◕ _◕ ༽つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿

COPYRIGHT © 1992-PRESENT PCH1024-V1.0.64