lint-staged 是一个使用场景非常广泛的 npm 包，它可以在提交代码之前对文件进行格式检查、语法检查等操作。通过它，我们可以保证项目代码质量更加稳定可靠。
安装
在项目中安装 lint-staged：
npm install --save-dev lint-staged
或者使用 yarn：
yarn add --dev lint-staged
配置
在项目的 package.json 文件中配置 lint-staged：
-- -------------------- ---- ------- - ------- ------------- ---------- -------- ---------- - ------- ----- -------- -- ---- ----------- -- ---- --- -------- --------- -- -------- - -------- - ------------- ------------- - -- -------------- - ------- - ------- ------- ---- ---- -- -------- - ---------- ------- ---- ---- - - -展开代码
解释一下上面的配置：
husky：配置 git hook，即在 pre-commit 钩子执行时执行 lint-staged。lint-staged：配置需要检查的文件扩展名和对应的命令。上面的例子表示对 js 文件执行 eslint 检查并修复错误，对 css 文件执行 stylelint 检查并修复错误，然后将修改后的文件添加到 git 缓存区。
示例
以下是一个示例项目，我们来一步步配置 lint-staged。
- 创建一个新的项目：
mkdir my-project && cd my-project npm init -y
- 安装 webpack、eslint、stylelint：
npm install --save-dev webpack eslint stylelint
- 在项目根目录下创建一个 index.js 文件，并写入以下代码：
const sum = (a, b) => { return a + b } console.log(sum(1, 2))
- 在项目根目录下创建一个 style.css 文件，并写入以下代码：
body{ font-size: 14px; }
- 在 package.json 文件中添加以下配置：
-- -------------------- ---- ------- - ------- ------------- ---------- -------- ---------- - ------- ----- -------- -- ---- ----------- -- ---- --- -------- --------- -- -------- - -------- - ------------- ------------- - -- -------------- - ------- - ------- ------- ---- ---- -- -------- - ---------- ------- ---- ---- - - -展开代码
- 提交代码并查看效果：
git init git add . git commit -m "Initial commit"
此时会发现 lint-staged 自动对 index.js 和 style.css 文件进行了格式检查和修复，并将修改后的文件添加到 git 缓存区。
总结
使用 lint-staged 可以让我们在开发过程中更加高效、规范，减少代码错误和低级问题，提高代码质量。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51819
