|
如果您有参与团队合作型开发，那您对「代码统一风格的重要性」，一定深有体会。本文与大家下，在团队开发 快应用 中，如何统一代码风格。相比于口头约定、编辑器配置，在提交代码前，自动格式化代码，才是更为可取的方案。 
与前端开发一样，需借助 husky、lint-staged、prettier 这几款工具库；具原理为，在执行 Git 提交操作时，利用 Husky 配合 lint-staged 在代码提交前进行 Lint，防止将不规范的代码提交到远端。关于 Husky 和 lint-staged 的工作原理，网络上有很多资料，在此就不做过多说明。具体操作步骤如下： 安装依赖yarn add prettier prettier-plugin-ux husky lint-staged -D
# OR
npm i prettier prettier-plugin-ux husky lint-staged --save-dev 配置环境"scripts": {
"watcher": "onchange \"src/**/**/*.{js,ux,json,pcss,vue,css,scss,less}\" -- prettier --write {{changed}}",
"prettier": "node ./scripts/selfCloseInputTag.js && prettier --write \"src/**/*.{ux,js,json,less,scss,css,pcss,md,vue}\"",
"precommit-msg": "echo ' Start pre-commit checks...' && exit 0",
},
"prettier": {
"singleQuote": true,
"semi": false,
"printWidth": 80,
"proseWrap": "never",
"tabWidth": 2
},
"husky": {
"hooks": {
"pre-commit": "yarn run precommit-msg && lint-staged"
}
},
"lint-staged": {
"**/**.{ux,js,json,less,scss,css,pcss,md,vue}": [
"prettier --write",
"git add"
]
},在如上这段配置中，在 prettier 代码前，为何需要先执行一段 nodejs 脚本么？详情可参见文章：如何用 Prettier 美化您的快应用代码？。格式选项，可在 package.json 文件中的 prettier 中进行；如每行显示宽度（printWidth）、语句末尾是否添加分号（semi）、使用单引号代替双引号（singleQuote）等等，皆可定制，具体配置可参见 prettier options 文档说明。 开发阶段，如何更简单利用 Prettier 美化代码？假如，您在写代码时，也有强迫症——想要写出十分符合规范的代码，通常有两种方法（本质上，都是监听文件变化，然后借助 Prettier 来格式化）： 可以在本地运用 yarn watcher 命令（如上项目配置，需借助 onchange 工具库），时刻帮您美化代码； 为开发工具（快应用 IDE 或 VsCode 等编码工具），安装 Prettier 插件，并勾选 Format On Save 选项即可（可用 Ctrl , 快捷键，打开设置，在搜索栏，输入 Format，即可快速找到 ），如下图所示：
排除文件倘若说，有些文件或文件夹，您不想它被重新格式化，可建立并配置 .prettierignore 来完全忽略。 # .prettierignore
package.json
manifest.json
README.md
# assets/js
src/assets/js/*.js 当然，如果你想忽视其中一行，或者多行，不同文件类型，写法有些差异；具体可以参见 Prettier Ignoring Code 文档说明。 以上这些，都有融合于快应用脚手架：nicejade/quickapp-boilerplate-template（ 致力于构建更为优雅的「快应用」开发脚手架模板。），如果您相关诉求，可参考，或直接使用这款脚手架，来创建您的项目。 | 
