制定规范

为了保持代码质量和一致性,我们将集成以下工具:

1. EditorConfig

作用: 跨编辑器和IDE维护一致的编码风格。

步骤:

在项目根目录创建 .editorconfig 文件
添加基本配置,例如:
属性说明:
- root: 表示这是最顶层的配置文件
- charset: 设置字符集
- indent_style: 缩进风格（空格或制表符）
- indent_size: 缩进大小
- end_of_line: 行尾字符类型
- insert_final_newline: 文件末尾是否插入新行
- trim_trailing_whitespace: 是否删除行尾的空白字符
  1
  2
  3
  4
  5
  6
  7
  8
  9
  root = true
  
  [*]
  charset = utf-8
  indent_style = space
  indent_size = 2
  end_of_line = lf
  insert_final_newline = true
  trim_trailing_whitespace = true

2. Prettier

作用: 自动格式化代码,确保代码风格一致。

步骤:

安装: npm install --save-dev prettier
创建配置文件 .prettierrc.js:
属性说明:
- semi: 是否在语句末尾添加分号
- singleQuote: 是否使用单引号
  1
  2
  3
  4
  5
  module.exports = {
  semi: true,
  singleQuote: true,
  // 其他配置...
  };

添加格式化脚本到 package.json:

"scripts": {
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
}

3. ESLint

作用: 静态代码分析工具,帮助识别和修复代码中的问题。

步骤:

安装: npm install --save-dev eslint
初始化配置: npx eslint --init
根据项目需求修改 .eslintrc.js

4. Husky

作用: 设置 Git hooks,在代码提交前运行脚本。

步骤:

安装: npm install --save-dev husky
启用 Git hooks: npx husky install
添加 pre-commit hook: npx husky add .husky/pre-commit "npm run lint-staged"

5. lint-staged

作用: 只对暂存的 Git 文件运行 linters。

步骤:

安装: npm install --save-dev lint-staged
配置 package.json:
属性说明:
- *.{js,jsx,ts,tsx}: 指定要检查的文件类型
- eslint --fix: 运行 ESLint 并自动修复问题
- prettier --write: 运行 Prettier 并自动格式化代码
  1
  2
  3
  4
  5
  6
  "lint-staged": {
  "*.{js,jsx,ts,tsx}": [
  "eslint --fix",
  "prettier --write"
  ]
  }

6. commitlint

作用: 检查提交信息是否符合约定式提交规范。

步骤:

安装: npm install --save-dev @commitlint/cli @commitlint/config-conventional
创建配置文件 commitlint.config.js:
属性说明:
- extends: 指定要继承的配置
  1
  module.exports = { extends: ['@commitlint/config-conventional'] };
添加 Husky hook: npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'

7. Commitizen

作用: 引导开发者填写规范的提交信息。

步骤:

安装: npm install --save-dev commitizen
初始化: npx commitizen init cz-conventional-changelog --save-dev --save-exact
添加脚本到 package.json:
属性说明:
- commit: 运行 Commitizen 的命令
  1
  2
  3
  "scripts": {
  "commit": "cz"
  }

8. cz-conventional-changelog

作用: 为 Commitizen 提供约定式提交规范的适配器。

步骤:
已在 Commitizen 初始化时安装和配置。

通过集成这些工具,我们可以确保项目代码的质量、一致性和可维护性。每个开发者都应遵循这些规范,使用提供的工具来维护代码库的健康。

配置别名
搭建目录
…

Git 贡献提交规范

参考 vue 规范 (Angular )

feat 增加新功能
fix 修复问题/BUG
style 代码风格相关无影响运行结果的
perf 优化/性能提升
refactor 重构
revert 撤销修改
test 测试相关
docs 文档/注释
chore 依赖更新/脚手架配置修改等
ci 持续集成
types 类型定义文件更改
wip 开发中

UI 走查

前端跟UI设计稿保持完美一致是每个前端的基本素养。
推荐一个浏览器工具 copixel 可以将蓝湖等设计稿进行上传，在页面进行透明度贴图，对照每个元素的位置。
这个过程也就是 UI 走查

菇太帷iのBlog

项目基建