记录一个关于lint-staged 配合 prettier使用的例子:
1>在package.json下添加如下依赖
"lint-staged": "^13.3.0",
"prettier": "^3.2.5",
然后安装依赖 npm install
2>在 .husky下的 pre-commit文件下加如下内容(无需在package.json的 scripts 下添加 "lint-staged": "lint-staged")
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
3>配置 .lintstagedrc.js 文件 // 这个配置文件使用的是标准的 JavaScript 模块语法 (module.exports)。
module.exports = {
"*.{js,ts,vue}": ["prettier --write", "eslint --cache --fix"],
"*.{scss, md}": ["prettier --write"],
};
或者 .lintstagedrc.mjs // 这是一个 ECMAScript 模块 (ES 模块)
export default {
"*.{js,ts,vue}": ["prettier --write", "eslint --cache --fix"],
"*.{scss,md}": ["prettier --write"],
}
.mjs 后缀名表示这是一个 ECMAScript 模块 (ES 模块)。ES 模块是 JavaScript 模块系统的官方标准化版本,它具有以下特点:
导入/导出语法不同: ES 模块使用 import 和 export 语法,而不是 require() 和 module.exports。
文件扩展名: 具有 .mjs 扩展名的文件被认为是 ES 模块。这有助于与旧版本的 Node.js 区分开来。
严格模式: ES 模块自动运行在严格模式下。
顶层 this 为 undefined: 在 ES 模块的顶层作用域中, this 的值为 undefined。
无节点环境污染: ES 模块通过各自的命名空间来组织其内部元素。
如果您使用的是较新版本的 Node.js (>12 版本),并且想要尝试使用 ES 模块语法,可以为配置文件指定 .mjs 扩展名。然后您可以使用 import/export 语法来定义配置,而不是 module.exports。
4>修改代码
只是修改一些格式的话,提交会报下面的错误
报:lint-staged prevented an empty git commit 问题
原因是:
lint-stage error out saying it was an empty git commit - a commit with no changes. No changes because all the changes I made were formatting changes, which were wrong according to prettier and it fixed it back and on doing so, there was no changes left to even be committed to git.
翻译过来就是:
lint-stage 出错,说这是一个空的 git 提交--一个没有改动的提交。没有改动是因为我做的所有改动都是格式上的改动,而根据 prettier,这些改动都是错误的,它把这些改动都改回来了,这样一来,就没有任何改动可以提交到 git 了。
所以验验证 lint-staged 是否生效,不要只修改代码格式,比如故意敲空格什么的,要真正的修改代码内容,同时如果在修改了代码内容的时候,改了代码格式的话,lint-staged 就会生效,自动格式化代码,并且不会报错
参考:
https://stackoverflow.com/questions/71420124/how-do-i-solve-this-empty-git-commit-warning
https://karuppiah7890.github.io/blog/posts/lint-staged-lint-your-staged-files/
https://git-scm.com/docs/git-commit#Documentation/git-commit.txt---no-verify
