前端团队协作开发进阶

Selicens
1,582 阅读4分钟

在团队开发过程中，可能团队成员有的用的vscode，有的用webstorm，有的用atom、hbuildx等等；可能在你的电脑上tab是两个空格，在同事的电脑上tab是四个空格；引入文件有的用单引号，有的用双引号；一行末尾有的加分号有的不加分号；还有目录、文件、函数命名问题，有的用大驼峰，有的用小驼峰，有的用中划线，有的用下划线，这对于统一风格来说肯定是不合适的，但是并不是每一个公司都有完备的开发规范，而且完全遵循规范确实是比较费力的，所以工欲善其事必先利其器，一些必备的工具及配置在团队开发中可以起到事半功倍的作用，为我们省去很多麻烦;

一、EditorConfig编辑器配置

而editorconfig就可以为跨各种编辑器维护同一项目的的开发人员维护一致的编码风格 使用方法，新建一个.editorconfig的文件:

# https://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8
indent_style = space # 缩进风格(space|tab)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf|cr|crlf)
insert_final_newline = true # 去除行首任意空口字符
trim_trailing_whitespace = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅markdown文件适用
insert_final_newline = false
trim_trailing_whitespace = false
二、Prettier代码格式化程序

prettier在整个代码库中强制实施一致的代码样式，prettier官网的观点：

拥有一个共同的风格指南对项目和团队来说是有价值的

使用方法：

  • npm install prettier
  • 新建名为.prettierrc的文件
  • 新建名为.prettierignore的文件
  • 在package.json中的scripts里添加"prettier": "prettier --write ."

.prettierrc常用配置选项

{
  "semi": false, // 在语句末尾添加分号
  "singleQuote": true, // 使用单引号而不是双引号
  "printWidth": 80, // 需要换行的宽度
  "trailingComma": "none", // 尾部逗号
  "arrowParens": "avoid", // 箭头函数参数两侧使用/省略括号
  "useTabs": false, // 缩进用制表符而不是空格
  "tabWidth": 2 // 指定缩进空格数
}

.prettierignore从格式配置中忽略某些文件

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
三、EsLint/JsLint/TsLint等代码检测工具

这些比较常见，按照提示就成，可以静态检查js代码一些逻辑、语法、格式的错误，相对来说eslint已经涵盖后者

四、Husky+CommitLint和Commitizen规范代码提交

husky是一个githook工具，可以防止使用一些不好的commit或push，husky会帮助触发git提交的各个阶段
使用方法：

  • npm install husky @commitlint/cli @commitlint/config-conventional --save-dev
  • npx husky install
  • 在package.json中的scripts里添加"prepare": "husky install"
  • 在命令行执行npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  • 直接输出npx --no-install commitlint --edit 1可能会报错，这是因为Windows没有‘‘1可能会报错，这是因为Windows没有 ``1`` 操作符，所以需要添加引号，Mac或Linux则可以直接执行
  • 工程目录会生成.husky文件夹，展开下面commit-msg就是我们刚才输出的内容，这样子git commit时就会触发这个钩子，执行commitlint检查我们的commit信息是否符合规范
  • 新建commitlintrc，写入如下内容
{
 "extends": ["@commitlint/config-conventional"],
 "rules": {
   "type-enum": [
     2,
     "always",
     [
       "build",
       "ci",
       "chore",
       "docs",
       "feat",
       "fix",
       "perf",
       "refactor",
       "revert",
       "style",
       "test",
       "wip",
       "delete",
       "modify"
     ]
   ]
 }
}
}

commitizen，简称cz，可以帮助规范代码提交信息
与husky+commitlint不同,cz无需手动输入git commit -m "xx"，执行cz命令后会有交互式的选项来生成commit

image.png

  • npm install commitizen cz-conventional-changelog -D
  • 在package.json中的config里添加"commitizen": { "path": "./node_modules/cz-conventional-changelog" }
  • 在package.json中的scripts里添加"commit": "cz"

cz可以作为一个可选项，因为它生成完以后也会触发husky的commit-msg钩子，取决于使用者愿意手动输入或者交互式选择

六、BrowsersList配置兼容浏览器

团队开发比较重要的一项就是确定兼容到浏览器的某一个版本，如ie已经关闭了，除了一些特殊的、老旧的项目维护，已经没必要特意去兼容它，使用方法：

  • 项目根目录新建.browserslistrc
# browserslistrc
> 1% # 支持市场份额大于1%的浏览器
last 1 version # 支持各类浏览器最近的一个版本
not dead # 不支持dead（*dead：最新两个版本市场份额低于5%，且24个月内没有官方的支持和更新）
not ie 11 #不支持ie11
  • 或者在package.json中写入
"browserslist": [
    "> 1%",
    "last 1 versions",
    "not ie 11"
],
avatar
文章
阅读
粉丝