使用 prettier 统一 JS 代码格式

团队小，且分散办工，使用的格式化各不相同。想起 git hook 可以将 prettier 引入，在 commit 前做代码格式化或 eslint 的校验。于是有了本文。

影响： 只对本次提交的代码做格式化。原有代码如有改动，需要多做测试。

需用到的工具：

husky : 可以实现各种 Git Hook。这里主要用到 pre-commit，在执行 commit 之前，运行一些自定义操作
lint-staged : 用于对 Git 暂存区中的文件执行代码检测
prettier : 用来优化代码格式，比如缩进、分号、空格等

一、安装 install

npm install husky lint-staged prettier --save-dev

二、编写 package.json 配置

以下配置加入 devDependencies 同级即可

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,md,html,css}": [
      "prettier --write",
      "git add"
    ]
  }

更多参考：用 husky 和 lint-staged 构建超溜的代码检查工作流

三、编写 prettier 配置文件

配置文件命名可以有三种，一种为Json配置，另两种为Javascript文件

• .prettierrc

{
  printWidth: 120, // 每行代码最大长度
  tabWidth: 2, //一个tab代表几个空格数，默认为80
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  semi: true, // 声明后带分号
  singleQuote: true, // 使用单引号
  jsxSingleQuote: true, // 使用单引号
  jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
  trailingComma: 'all',
}

• prettier.config.js | .prettierrc.js

// prettier.config.js or .prettierrc.js
module.exports = {
  printWidth: 120, // 每行代码最大长度
  tabWidth: 2, //一个tab代表几个空格数，默认为80
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  semi: true, // 声明后带分号
  singleQuote: true, // 使用单引号
  jsxSingleQuote: true, // 使用单引号
  jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
  trailingComma: 'all',
}; 

refer:
prettier 指“北”
husky+lint-staged助力团队编码规范
使用 husky 和 lint-staged 来构建你的前端工作流