前端多人团队协作 prettier+ husky + lint-staged

在多人前端团队开发过程中，每个成员的编码习惯或多或少不一样，或者使用的代码编辑器不一致，以个人所在团队为例：有的使用vsCode，有的使用webStorm，编码有的缩进是2空格，有的是4空格，还有单双引号的使用问题，文件，组件命名等差异化习惯。诸多不同习惯混在一起，不利于团队协作开发，所以在多人团队开发中出现了一些工具，以及配置文件，使团队开发避免不必要的麻烦产生，更加有利于前端工程化。

Prettier代码格式化程序

安装

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

prettierrc常用配置选项

{
  "semi": false, // 在语句末尾添加分号
  "printWidth": 80, // 需要换行的宽度
  "singleQuote": true, // 使用单引号而不是双引号
  "trailingComma": "all",  // 结尾是否添加逗号
  "proseWrap": "never", // 强制所有代码块位于一行并依赖编辑器可以使用`"never"`
}

代码检查工作流 配合 prettier 使用

-   package.json里面加入一些配置:
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
需要安装`husky` 和`lint-staged`这两个依赖才能实现，其中husky是帮助我们添加git hooks的工具，而lint-staged则是筛选那些staged的git文件执行lint。

安装

npx husky-init && npm install

npm i lint-staged -D