用 commitlint 和 prettier 美化 WePY 项目
2023-09-07 18:25:07
前端工程化是一门艺术，它能将杂乱无章的代码转化为整洁有序的杰作。WePY 框架以其简洁优雅而著称，但它也需要一定的工程化才能发挥其全部潜力。本文将介绍如何使用 commitlint 和 prettier 为 WePY 项目注入自动化和一致性。
前言
最近，我接手了一个使用 WePY 框架开发的微信小程序。由于之前的代码大多由外包团队编写，工程化方面存在诸多问题。本文将分享我为该项目配置 commitlint 和 prettier 的经验，助力打造更优雅高效的代码库。
commitlint：让提交信息井然有序
commitlint 是一款工具，用于检查和验证提交信息，确保其符合预定义的规范。它可以帮助我们保持提交信息的清晰一致，便于团队协作和代码管理。
配置 commitlint
- 安装 commitlint：
npm install --dev commitlint - 创建
.commitlintrc.js文件：
module.exports = {
extends: ['@commitlint/config-conventional'],
};
- 在
package.json中添加脚本：
{
"scripts": {
"commit": "commitlint -e $HUSKY_GIT_PARAMS",
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
}
使用 commitlint
每次提交代码时，commitlint 都会自动检查提交信息。如果提交信息不符合规范，commitlint 会提示并阻止提交。通过在提交信息中使用特定的前缀和格式，我们可以轻松地将代码更改与特定功能或修复相关联。
prettier：代码风格的守护者
prettier 是一款代码格式化工具，可以自动将代码格式化为一致的样式。它能处理空格、缩进、分号等各种代码风格问题，确保代码整洁美观，便于阅读和维护。
配置 prettier
- 安装 prettier：
npm install --dev prettier - 创建
.prettierrc.js文件：
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
arrowParens: 'avoid',
endOfLine: 'auto',
};
- 在
package.json中添加脚本：
{
"scripts": {
"format": "prettier --write ."
}
}
使用 prettier
运行 npm run format 命令，prettier 会自动格式化项目中的所有代码文件。它可以识别不同语言和代码风格，并将其转换为一致的格式。通过消除代码风格上的差异，prettier 提升了代码的可读性和可维护性。
收获成果
引入 commitlint 和 prettier 为 WePY 项目带来了显著的收益：
- 提高代码质量： 自动化代码格式化和提交信息检查，确保代码库保持高标准和一致性。
- 增强团队协作： 清晰一致的提交信息促进了团队沟通，使代码更改更容易理解和追踪。
- 提升开发效率： 自动化格式化和检查减少了手动工作，使开发人员可以专注于核心功能的开发。
- 加强代码可读性： 一致的代码风格和格式化增强了代码的可读性，使代码维护和重构更加容易。
总结
通过使用 commitlint 和 prettier ，我们为 WePY 项目注入了一层工程化，提升了代码质量、团队协作和开发效率。这些工具让代码库井然有序、美观整洁，助力我们打造更强大、更可维护的应用程序。
