Pre-commit：如何使用 husky、lint-staged和prettier优化你的项目

2024-05-07 17:08:09

在软件开发过程中，代码风格检查（Code Linting）是保障代码规范和一致性的有效手段。过去，Lint 的工作一般在 Code Review 或者 CI 的时候进行，但这样会导致问题的反馈链，浪费不必要的时间。因此，我们需要利用 Git 的 Pre Commit 钩子，将 Lint 过程放到开发者提交代码之前。

简介

简单介绍一下这三个工具：

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

安装

首先，我们使用下面的命令把 husky 和 lint-staged 安装到package.json的 devDependencies中：

npm install husky lint-staged prettier --save-dev
或者
yarn add husky lint-staged prettier --dev

配置package.json

将下面的代码追加到 package.json文件中：

{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"*.{js,vue}": ["prettier --write","vue-cli-service lint","git add"]}
}

上面示例中lint-staged下的选项是vue项目中常用的配置，你可以根据你项目的技术栈配置相应的代码检查。

prettier --write会自动美化你的代码格式

vue-cli-service lint是vue项目中语法检查

git add将更改后到文件添加到暂存区

.prettierrc文件

新建一个.prettierrc文件，将以下内容复制进去：

{"trailingComma": "es5", // 尾随逗号"tabWidth": 4, // 缩进"semi": true, // 句尾分号"singleQuote": true, // 单引号"end-of-line": "lf" // 换行符
}

这样，当在终端输入 git commit命令提交代码的时候，Lint 程序便会自动检查本次提交所修改的文件是否符合本项目的代码规范。如果代码不符合规范，便会拒绝提交代码。

如果想要跳过 Lint 程序，可以使用 git commit -no-verify 进行提交。

参看文献

husky: https://www.npmjs.com/package/husky
lint-staged: https://www.npmjs.com/package/lint-staged
prettier: https://www.npmjs.com/package/prettier

Pre-commit：如何使用 husky、lint-staged和prettier优化你的项目相关推荐

git commit -m XX报错 pre -commit hook failed (add --no-verify to bypass)问题
在同步本地文件到线上仓库的时候报错 pre -commit hook failed (add --no-verify to bypass) 当你在终端输入git commit -m "xx ...
husky 7 + lint-staged 11+ prettier 2 + eslint 7 配置
前言基于最新的一些库来规范项目, 比如格式化和提交预处理等- 一些库的最新版的配置更加独立了, 对于工程化来说,其实更加直观了- 围绕react技术栈加入相关门禁来开展文章- 效果图 git com ...
使用 husky 和 lint-staged 检查 Node.js 的代码一致性
在软件开发过程中,代码风格检查(Code Linting)是保障代码规范和一致性的有效手段.过去,Lint 的工作一般在 Code Review 或者 CI 的时候进行,但这样会导致问题的反馈链,浪费 ...
项目中使用 husky 格式化代码和校验 commit 信息
大家好,我是前端西瓜哥.今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化. git hook 和 husky git hoo ...
lint-staged husky
npm i lint-staged husky -D husky版本8.0.1,lint−staged版本13.0.3\color{#FF0000}{husky 版本 8.0.1 ,lint-stag ...
Git Commit Message校验踩坑指南
背景在团队多人开发中,规范的commit message可以快速定位代码提交历史,回溯问题根源,方便组内多人协作,提高团队效率. 本篇文章主要包含以下两方面内容: commitizen/cz-cli ...
Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具. ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 1.建议 vsc ...
用 husky 和 lint-staged 构建代码检查工作流
前言一个项目如果涉及到多人协作,由于每个人代码的书写习惯和风格不太一样,如果没有统一的规范,那就会很乱,这对代码的可维护性大大降低. 所以现代工程有个一环节就是代码风格检查(Code Linting ...
git commit规范、CHANGELOG生成和版本发布的标准自动化
长期以来,大家是不是受限于这种情况:团队中每位成员提交代码时填写的信息随意,没有一定的规范,在出问题后想要定位到某次提交记录时更是难上加难,或者是加上了 commitlint之类的规范,也没有添加ch ...
项目规范之husky lint-stated
Husky You can use it to lint your commit messages, run tests, lint code, etc- when you commit or pus ...

最新文章

热门文章