前端团队协作开发进阶

在团队开发过程中，可能团队成员有的用的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代码一些逻辑、语法、格式的错误

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

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

npm install husky --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操作符，所以需要添加引号，Mac或Linux则可以直接执行
工程目录会生成.husky文件夹，展开下面commit-msg就是我们刚才输出的内容
npm install -g @commitlint/cli @commitlint/config-conventional
新建commit.config.json，写入module.exports = { extends: ['@commitlint/config-conventional'] }

commitizen，简称cz，可以帮助规范代码提交信息

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

六、BrowsersList配置兼容浏览器

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

项目根目录新建.browserslistrc

# browserslistrc
> 1% # 支持市场份额大于1%的浏览器
last 1 version # 支持各类浏览器最近的一个版本
not dead # 不支持dead（*dead：最新两个版本市场份额低于5%，且24个月内没有官方的支持和更新）
not ie 11 #不支持ie11