前端项目集成lint-staged

lint-staged

(lint-staged) 这个插件可以只针对进入git暂存区中的代码进行代码格式检查与修复，极大提升效率，避免扫描整个项目文件，代码风格控制 eslint + prettier + stylelint 看这两篇文章

前端项目vue3项目集成eslint@9.x跟prettier
前端项目集成stylelint做css样式代码格式控制

安装

pnpm add lint-staged -D

配置文件

.lintstagedrc.json （项目根目录）

这里针对不同的文件格式运行不同的格式化脚本，这里要保证脚本的执行顺序，prettier应该放在最前面，在其修复好后，再由eslint或stylelint来查漏补缺。

tips: 这下面用到的stylelint跟prettier跟eslint是要安装，才能用对应的工具去做代码检查，按照我上面的那篇文章中《前端项目集成stylelint做css样式代码格式控制》并没有安装prettier，所以这里需要主动安装一下

bash 复制代码

pnpm add -D prettier

javascript 复制代码

{
  "*.{css,less}": ["stylelint --fix"],
  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
  "*.{vue,html}": ["prettier --write", "eslint --fix", "stylelint --fix"]
}

测试

可以在package.json中的scripts添加一条脚本命令

javascript 复制代码

  "scripts": {
    "lint-staged": "lint-staged",
  }

准备一些错误

利用文本编辑器人为制造一些错误，目前vscode正常提示了这些错误。比如：

a.ts

a.less

a.vue

添加到暂存区，并执行脚本

使用 git add . 将当前修改内容推送到暂存区中
调用之前定义的脚本 pnpm lint-staged

成功修改：

tips1：git reset 可以清空暂存区
tips2：如果发现某些文件并没有生效，可以重启编辑器，可能是当前文件预览缓存导致的，实际文件已经发生了更改。我在写这个文章测试的时候就遇到了，发现a.ts跟a.less都可以生效，但是a.vue无法生效，后来又发现当前项目中其他vue文件修改也不生效了，最后重启了编辑器，发现文件内容已经发生了修改，所以vscode之前还是显示的未修改的，虽然不理解为什么只有vue文件是这样的。😢