lint-staged + prettier + gitHook

介绍

• lint-staged：对暂存的git文件运行linter，不要让💩 溜进你的代码库！
• prettier：按照规则解析代码来强制执行一致的样式，用来优化代码格式，比如缩进、空格、分号等。
• gitHooks： 在.git/hooks文件下，保存了一些 shell 脚本，Git Hooks就是那些在Git执行特定事件(如commit、push、receive等)后触发运行的脚本。

一. lint-staged

为什么使用 lint-staged ?

在commit代码之前运行Linting更有意义，这样可以确保没有错误格式的代码提交到仓库；但是在整个项目中运行一个lint校验的进程会很缓慢，而且lint的结果可能不相关，然而其实你只希望lint校验将要提交的文件。

lint-staged项目中有一个可以运行任意shell任务的脚本，并将暂存文件作为参数，通过指定的glob模式过滤。

package.json中配置

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

二. prettier

将Prettier与一个pre-commit的工具(例: gitHooks)一起使用，在commit代码之前通过git add重新格式化标记为“暂存”的文件。

 "scripts": {
    "format": "prettier --write ."  // your-cmd, 需手动添加额外的文件类型，默认为js,css,md
  },

三.gitHooks

git commit 时触发 pre-commit 钩子，运行 lint-staged 命令。

"gitHooks": {
    "pre-commit": "lint-staged --concurrent false" 
  }

示例

Installation

npm install lint-staged prettier --save-dev

例如：

 "scripts": {   
    "format": "prettier --write ."  // your-cmd
  },
  "lint-staged": {
    "*": [
      "prettier --write" 
    ]
  },
  "gitHooks": {
    "pre-commit": "lint-staged --concurrent false" 
  }

在根目录创建.prettierrc.json

创建Prettier的配置文件，让编辑器和其他工具知道项目正在使用Prettier
例如：

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "overrides": [
    {
      "files": ["*.json5"],
      "options": {
        "singleQuote": false,
        "quoteProps": "preserve"
      }
    },
    {
      "files": ["*.yml"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

在根目录创建.prettierignore文件

创建一个.prettierignore文件，让Prettier CLI和编辑器知道哪些文件不需要格式化。
例：

packages/plugin-vue/dist/
packages/*/CHANGELOG.md
LICENSE.md
.prettierignore
yarn.lock

命令行执行 npm run format

执行npm run format，就可以按照.prettierrc.json中的规则对代码进行格式化了。

小结

• 当在终端输入 git commit 提交代码时，linter 会自动检查本次提交所修改的文件是否符合本项目的代码规范，不符合规范的会提交失败。
• 使用 linter 最大的好处就是在团队协作中可以使代码风格统一。

参考资料

lint-staged - npm
prettier - npm
prettier - 规则选项
一文带你彻底学会 Git Hooks 配置