零基础也能掌握！带你轻松上手Husky+Lint-Staged代码检查工作流，兼容Sourcetree！

2023-05-09 03:16:58

使用 Husky 和 Lint-Staged 升级代码检查流程

提升代码质量，告别编码困扰

作为前端开发人员，我们常常为代码质量低下而头疼，包括不一致的编码规范、语法错误和逻辑问题。这些问题不仅影响代码的可读性，也阻碍了维护工作的顺利进行。而 Husky 和 Lint-Staged 的出现，将彻底改变这一局面。

认识 Husky 和 Lint-Staged

Husky 和 Lint-Staged 是两大广受好评的代码检查工具，它们联手出击，在提交代码前自动检查代码，并根据预先定义的规则进行修复。有了它们，我们在代码审查方面如虎添翼，在提交代码前就能发现并解决问题，大大提高了代码的质量。

配置和使用

npm install husky lint-staged --save-dev

~/.huskyrc

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

~/.lintstagedrc

{
  "*.{js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

运行代码检查： 配置好后，在提交代码前，Husky 会自动运行 Lint-Staged，检查代码并修复问题。你也可以手动运行 npm run lint 来检查代码。

兼容 Sourcetree

使用 Sourcetree 作为 Git 客户端时，需要进行额外的配置：

启用钩子支持： 点击“工具”->“选项”->“钩子”，勾选“启用钩子支持”。
配置 Husky： 点击“工具”->“选项”->“Git”，在“提交”部分将“提交钩子”字段设置为项目根目录下的.husky/pre-commit文件。

Husky 和 Lint-Staged 的优势

常见问题解答

为什么使用 Husky + Lint-Staged？
- 自动化代码检查，提高代码质量。
- 统一代码风格，提高可读性和可维护性。
- 提高开发效率，减少回滚代码的情况。
如何兼容 Sourcetree？
- 启用钩子支持。
- 配置 Husky 的提交钩子。
Husky 和 Lint-Staged 之间有什么区别？
- Husky 是一个钩子管理工具，它调用 Lint-Staged 进行代码检查。
- Lint-Staged 根据预定义规则检查和修复代码问题。
可以自定义代码检查规则吗？
- 是的，可以在.lintstagedrc文件中定义自定义规则。
使用 Husky + Lint-Staged 有什么缺点吗？
- 可能增加提交代码的时间，尤其是代码库较大时。