lint-staged + prettier + gitHooks自动格式化代码统一风格

·  阅读 374
lint-staged + prettier + gitHooks自动格式化代码统一风格

介绍

  • 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 配置

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改