团队开发快应用,如何统一代码风格?

快应用 Aug 23, 2021

如果您有参与团队合作型开发,那您对「代码统一风格的重要性」,一定深有体会。本文与大家下,在团队开发快应用中,如何统一代码风格。相比于口头约定、编辑器配置,在提交代码前,自动格式化代码,才是更为可取的方案。

团队开发快应用,如何统一代码风格?

与前端开发一样,需借助 huskylint-stagedprettier 这几款工具库;具原理为,在执行 Git 提交操作时,利用 Husky 配合 lint-staged 在代码提交前进行 Lint,防止将不规范的代码提交到远端。关于 Huskylint-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 来格式化):

  1. 可以在本地运用 yarn watcher 命令(如上项目配置,需借助 onchange 工具库),时刻帮您美化代码;
  2. 为开发工具(快应用 IDE 或 VsCode 等编码工具),安装 Prettier 插件,并勾选 Format On Save 选项即可(可用 Ctrl , 快捷键,打开设置,在搜索栏,输入 Format,即可快速找到 ),如下图所示:

IDE - Format On Save

排除文件

倘若说,有些文件或文件夹,您不想它被重新格式化,可建立并配置 .prettierignore 来完全忽略。

# .prettierignore
package.json
manifest.json
README.md

# assets/js
src/assets/js/*.js

当然,如果你想忽视其中一行,或者多行,不同文件类型,写法有些差异;具体可以参见 Prettier Ignoring Code 文档说明。

以上这些,都有融合于快应用脚手架:nicejade/quickapp-boilerplate-template(🔨致力于构建更为优雅的「快应用」开发脚手架模板。),如果您相关诉求,可参考,或直接使用这款脚手架,来创建您的项目。

猜您可能感兴趣的文章

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.