zhangdizhangdi

开发规范

开发插件

VSCode插件

浏览器插件

ESLint 代码规范

bash
# 安装与配置
$ pnpm i -Dw eslint
$ npx eslint --init

Prettier 格式化

手动

在.eslintrc 的 extend 中添加 “prettier” 解决 eslint 和 prettier 的冲突

js
extends: [
  ...,  
  'prettier'
],

Vue3

配置

json
// .prettierrc
{
  "arrowParens": "avoid", //箭头函数只有一个参数的时候可以忽略括号
  "singleQuote": true, // 使用单引号
  "semi": false // 行结尾不使用分号
}

TypeScript

手动

Vue3

  • @vue/eslint-config-typescript - GitHub

    手动配置的@typescript-eslint/eslint-plugin @typescript-eslint/parse

  • @tsconfig/node22
  • @types/node
  • @vue/tsconfig
  • vue-tsc

Git提交规范

Husky

为 git 客户端增加 hook 的工具，比如pre-commit钩子就会在执行git commit的触发，所以可以在提交到暂缓区时，做一些lint检查、单元测试、代码美化等操作

::: code-group

bash
$ pnpm i -Dw husky
$ pnpm exec husky init
bash
$ npm i -D husky
$ npx husky init

:::

执行完 init 自动完成：

  1. package.json中增加了"prepare": "husky"的 script
  2. 根目录生成一个.husky目录
bash
# .husky/pre-commit 文件

# 1. pnpm多包管理，规范配置在根目录
pnpm lint-staged # pnpm

# 2
npx lint-staged # npm

# 3
1. npm run lint-staged # 替换 npx lint-staged
2. scripts 增加 "lint-staged": "lint-staged" # package.json

lint-staged

在 git 暂存文件上（也就是被 git add 的文件）运行已配置的 linter（或其他）任务。

::: code-group

bash
# 安装
$ pnpm i -Dw lint-staged
bash
# 安装
$ npm i -D lint-staged

:::

json
// package.json
"lint-staged": {
  "*.{js,ts,vue,json,html}": [
    "prettier --write",
    "eslint --fix"
  ],
  "*.{css,scss,sass,md}": [
    "prettier --write"
  ]
}

Commitlint

提交信息规范 git commit -m 'feat: xxxx'

bash
$ pnpm i @commitlint/{cli,config-conventional} -Dw
$ echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
$ echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  • feat：
    • 新增功能
  • fix
    • 修复 bug
  • docs
    • 文档更新
  • style
    • Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
    • 不影响程序逻辑的代码修改，例如去掉空格、改变缩进、增删分号
  • refactor
    • A code change that neither fixes a bug nor adds a feature
    • 重构代码，既没有新增功能，也没有修复 bug
  • perf
    • A code change that improves performance
    • 性能，体验优化
  • test
    • Adding missing tests or correcting existing tests
    • 添加或修改测试代码
  • build
    • Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
    • 构建工具或者外部依赖包的修改，(例如 glup，webpack，rollup 的配置等)
  • ci
    • Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
    • 持续集成的配置文件或者脚本的修改，(例如 Travis 等)
  • chore
    • Other changes that don’t modify src or test files
    • 杂项，其他不需要修改源代码或不需要修改测试代码的修改
  • revert
    • Reverts a previous commit
    • 回滚某个更早之前的提交

TODO

Stylelint

Git提交

  • 辅助提交：commitizen、 cz-conventional-changelog
  • 自定义提交：commitlint-config-cz、cz-customizable
  • 实现自定义git提交规范 - 掘金

EditorConfig

参考