前言

最新公司老产品要做技术革新, 前端终于要抛弃 JSP 那一套了…作为在后端中为数不多的几个有前端开发经验的, 加之, 公司前端资源极度匮乏, 不可避免的被抓来架构前端了.
自知是比不上专业的前端, 不过自己之前做的2个产品中有涉及前端的部分并且都是独立来架设并完成, 以全菜工程师为目标, 自然是欣然接受这个挑战的…
咨询了公司的前端大佬, 技术栈最终定为: nuxt, vue, ant-design-vue.
除了 nuxt 之外我都还算熟悉并有应用经验, 另此次架构打算严格按照前端工程规范来进行, 故记录下踩到的所有坑以及心得体会…

脚手架

vue, ant-design-vue, nuxt

首先安装脚手架程序, 如果按照官方所示直接安装, 可能由于网络等其他未知原因导致安装缓慢…所以, 先把脚手架程序安装到本地全局 (npm prefix -g):

npm install –g create-nuxt-app

接下来运行命令用脚手架来帮忙搭建项目:

npx create-nuxt-app <项目名>

这里用的组件库是 Ant Design Vue. ESLint 用于在保存时规范代码和执行错误检查. Prettier 的作用是在保存时格式化和美化代码.

代码提交规范

具备基本工程素养的同学都会注重编码规范，而代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段

husky, commitlint

commitlint

用于检测你的提交信息是否符合规范. 配合 husky 使得这一操作触发 git 钩子达到每次提交代码时自动检测 commit message 是否符合规范.

安装

npm install --save-dev @commitlint/{config-conventional,cli}
# windows 用下面这个命令
npm install --save-dev @commitlint/config-conventional @commitlint/cli

• Attention: windows 系统下, commitlint/cli 和 commitlint/config-conventional 需要全局安装, 才能正常响应 commitlint.

先继承默认规范:

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

• Attention: 在 windows 操作系统下, 这个命令生成的文件编码是 UTF-16 LE 的, 执行提交的时候会报错 (commitlint.config.js:1 … SyntaxError: Invalid or unexpected token), 需要手动创建该文件或者是把文件编码改成 UTF-8 (VS Code 内). ref: https://github.com/conventional-changelog/commitlint/issues/614

Conventional Commit

ref: https://www.conventionalcommits.org/en/v1.0.0/

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

header

常用的几个 type: commit 的类型, 可以在 commitlint.config.js 的 type-enum 指定.

• feat: 新特性 (feature);
• fix: bug 修复;
• style: 格式 (不影响代码运行的变动);
• docs: 文档;
• test: 测试用例新增;
• refactor: 重构;

description: 必须, 是 commit 目的的简短描述.
scope: 可选, 说明 commit 的影响范围.

body

可选, 对本次 commit 的描述.

footer

可选.

husky

1. husky 会去检测 .git/hooks/* 中对应命令的文件 (比如 pre-commit);
2. 文件不存在就执行 create, 其次如果文件存在就检测是否包含 # husky 字样以确认是否由 husky 创建;
3. 如果检测文件存在并且不包含 “#husky” 就会跳过 create 步骤, 提示 hook (existing user hook);

安装

npm install --save-dev husky

在工程根目录下新建文件: .huskyrc, 内容:

"hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}

commitlint -E: 官方说明翻译过来的意思大致是 “检查指定路径 (由环境变量的值确定) 文件中的信息”. 环境变量 HUSKY_GIT_PARAMS 指向 .git/COMMIT_EDITMSG.

自定义规范

所有规则参考: https://commitlint.js.org/#/reference-rules
在文件 commitlint.config.js 中, 新增 rules 属性, 选取其中几个有用的来试试:

如图可见每个规则配置分为三个主要部分: <规则名>: [{Level}, {Applicable}, {Value}].

• Level: 0 表示不启用; 1 表示启用但是会提示警告信息而不中断提交; 2 表示启用并以错误信息提示, 中断提交过程.
• Applicable: always | never
• Value: 值

再来, 限定 scope 提交一个带 body 的 message:

最后, 将 commit message 按照规则键入, 提交成功.

ESLint - 代码检测规范

ref: https://eslint.bootcss.com/docs/about/
在 .huskyrc 文件中新增 pre-commit 钩子, 调用 lint:

"hooks": {
    "pre-commit": "npm run lint",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}

package.json 中加入 npm run lint 验证规则:

"scripts": {
  ...
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
}

如下图所示, pre-commit 钩子已经触发.

自动格式化代码

在 package.json 的 script lint 中加入 --fix 参数, 让每次 pre-commit 时自动检查并格式化代码:

"scripts": {
    ...
    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

可以看到, pre-commit 和 commit-msg 钩子都起作用了.

下一篇