前端工程化配置——husky + lintstage

资源地址

eslint: https://eslint.org/docs/user-guide/getting-started
husky：https://typicode.github.io/husky/#/
lint-stage ：https://www.npmjs.com/package/lint-staged#examples

配置步骤

一、vscode + eslint配置项目校验

① vscode安装eslint插件

② 项目根目录执行命令安装初始化eslint配置

npm init @eslint/config

根据问答模式，一步一步配置即可

// 说明： 如果初始化配置后eslint校验不生效，可检查vscode的eslint服务是否已开启，mac(fn + F1) 执行 ESLint: Restart ESLint Server命令启动服务

二、husky + linstage配置通过git钩子触发校验

① 执行下面命令可直接生成husky + lint-staged配置

npx mrm@2 lint-staged
// 说明： 这一步会自动安装并配置husky，所有不用单独再安装husky了

② 对package.json中生成的配置进行修改，增加需要检查的文件扩展名配置

  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": "eslint --cache --fix"
  } 
// 注意，文件扩展名之间不要有空格，否则不生效

到这一步基本就配置完了，可以使用了

③项目根目录.gitignore中加入node_modules和.eslintcache

三、配置细节说明：

eslint --cache --fix
npx --no-install lint-staged 

// eslint 加 --cache 只针对暂存的文件进行检查
// npx 执行 lint-staged之前会检查是否存在该包，不存在会下载，执行完再删除，这样很耗时，在确保安装的情况下，使用--no-install 命令可以越过安装流程