WHY の 自留地

Appearance

作者:  WHY
字数统计:  字
阅读时长:  分钟
阅读量: 

Tools 工具合集 ​

前置 ​

安装 husky 和 lint-staged

bash
pnpm add -D husky lint-staged

pnpm husky install

常用的 git 钩子:

  • pre-commit, 提交代码信息之前
  • commit-msg, 提交代码信息时
  • post-commit, 提交代码信息之后
  • pre-push, 推送代码之前

TIP

如果在提交代码时因报错而终止提交代码, 此时可能会丢失代码, 可执行以下命令:

bash
# 查看 stash 命令帮助
# git stash --help

# 列出所有 stash
git stash list
# 预期输出示例
# 丢失的代码被 lint-staged 存储在 stash 中了
# stash@{0}: lint-staged automatic backup

# 恢复(栈顶)代码并删除 stash
git stash pop
# git stash pop 等价于以下两条命令
git stash apply
git stash drop

# 恢复到指定的 stash, 0 指向栈顶, 对应最新丢失的代码
git stash apply stash@{0}

# 清空所有 stash
git stash clear

Linters ​

eslint ​

安装:

bash
pnpm add -D eslint

prettier ​

bash
pnpm add -D prettier

安装 eslint-config-prettier 以避免 eslint 和 prettier 冲突:

bash
pnpm add -D eslint-config-prettier

并在 .eslintrc.js 中给 extends 增加 prettier

stylelint ​

bash
pnpm add -D stylelint stylelint-config-standard stylelint-config-standard-scss postcss-html stylelint-config-recommended-vue

markdownlint ​

bash
pnpm add -D markdownlint-cli

commitlint ​

使用 commitlint 包规范化代码提交信息

可参考信息:

安装:

bash
pnpm add -D @commitlint/cli @commitlint/config-conventional

代码提交规范如下:

  • build 打包构建相关
  • ci CI / CD 相关, 如 GitHub Actions/Jenkins/GitLab CI/Travis
  • docs 文档相关, 如 README.md
  • feat 功能相关
  • fix BUG 相关
  • perf 性能优化
  • refactor 重构代码， 推荐一本书 《Refactoring: Improving the Design of Existing Code》(重构: 改善既有代码的设计)
  • style 代码格式化等
  • test 测试相关, 如测试用例
  • revert 代码回滚, 须附上被撤销的 commit SHA 标识符
  • chore 不属于以上类型的其他类型

代码提交示例:

bash
# 注意, [type] 其后必须有空格
# [type] commit message
git commit -m 'feat: init'

cz-commitlint ​

bash
pnpm add -D @commitlint/cz-commitlint commitizen

# npx commitizen init cz-conventional-changelog --save-dev --save-exact
pnpm dlx commitizen init cz-conventional-changelog --save-dev --save-exact

package.json 配置:

json
{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
}

使用以下命令进入可交互式提交代码命令行:

bash
pnpm commit

也可使用传统的提交代码方式:

bash
git commit -m 'feat: init'

CHANGELOG ​

安装 conventional-changelog-cli:

bash
pnpm add -D conventional-changelog-cli

package.json 配置脚本命令:

json
{
  "scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
  }
}

type 为 feat/fix/perf/revert 会出现在 CHANGELOG.md 中, 其余类型的提交信息则不会出现在 CHANGELOG.md 中

EditorConfig ​

EditorConfig 用于记录编辑器配置, 以抹平编辑器差异。 VS Code 可在插件市场中搜索 EditorConfig 并下载。

nvm 和 nrm ​

nvm ​

nvm 用于 node 多版本管理, 可视化工具 nvm-desktop

nrm ​

nrm 用于 node 镜像源管理

bash
pnpm add nrm -g

查看当前可使用的镜像源:

bash
nrm ls

其输出结果为:

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

切换镜像源:

bash
nrm use tencent

版本控制 ​

埋点/监控 ​

文档 ​

测试 ​

性能优化 ​

  • Chrome DevTools Performance 调试面板 Performance
  • Lighthouse 可以在命令行、项目内或 Chrome Devtools 中使用
  • WebPageTest

插件 ​

VS Code 插件 ​

浏览器插件 ​

接口 ​

调试 ​

Mock ​

JSON ​

动画 ​

Echarts ​

TODO

正则 ​

Auth ​

UI 组件库 ​

Vue2 ​

Vue3 ​

Contributors

The avatar of contributor named as why why

Changelog

Released under the MIT License.

Copyright © 2024-PRESENT WHY