配置

2023年02月24日

柏拉文

越努力，越幸运

一、.lintstagedrc.js

---

1.1 命令

package.json中的命令如下:

"scripts": {
    "start": "vite",
    "tsc": "tsc --noEmit",
    "build": "tsc && vite build",
    "lint-staged": "lint-staged",
    "postinstall": "husky install",
    "prettier": "prettier --write src/**/*.{ts,tsx}",
    "stylelint-fix": "stylelint src/**/*.scss --fix",
    "eslint-fix": "eslint src --ext .jsx,.js,.ts,.tsx --fix",
    "commitlint": "commitlint --config commitlint.config.js -e -V"
},

那么通过lint-staged运行的命令编写如下:

• yarn prettier: 执行已配置好的prettier命令，用于提交时格式化代码

• yarn eslint-fix: 执行已配置好的eslint命令，用于校验暂存区的代码。注意: 此时不会校验TypeScript代码中的类型

• (fileName) => generateTSConfig(fileName, 'tsc'): 用于手动校验处于暂存区的TypeScript代码中的类型是否正确

1.2 配置

const fs = require('fs');
const generateTSConfig = (fileName, type) => {
    const tsconfig = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
    const include = ['src/**/*.d.ts', ...fileName].filter(
        (file) => !file.includes('TabContent'),
    );
    tsconfig.include = include;
    fs.writeFileSync('tsconfig.lint.json', JSON.stringify(tsconfig));
    return `${type} --noEmit --project tsconfig.lint.json`;
};

module.exports = {
    'src/**/*.{ts,tsx}': ['yarn prettier', 'yarn eslint-fix',(fileName) => generateTSConfig(fileName, 'tsc')],
    'src/**/*.{css,less,scss}': ['yarn stylelint-fix'],
};

二、package.json 中 lint-staged 配置项

---

安装好了Lint-staged之后，就需要配置Lint-staged。我们可以在package.json中加入以下代码，这里需要先安装配置好husky，ESLint和Stylelint。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged",
  }
},
"lint-staged": {
  "*.vue": [
    "eslint --fix",
    "stylelint --fix",
    "git add"
  ],
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "git add"
  ],
  "*.{htm,html,css,sss,less,scss,sass}": [
    "stylelint --fix",
    "git add"
  ]
}

当我们执行git commit时，就会触发husky的pre-commit钩子，调用lint-staged命令。而lint-staged包含了对*.vue，*.{js,jsx,ts,tsx}，*.{htm,html,css,sss,less,scss,sass}类型文件的操作。以*.vue为例，当匹配到后缀名为.vue的文件时，就会分别执行以下操作:

• 首先会执行eslint --fix命令，对.vue文件执行ESLint检查，并且自动修复一些JS格式问题

• 接着会执行stylelint --fix命令，对.vue文件的CSS执行Stylelint检查，并且自动修复一些``CSS格式问题

• 最后，若前面的指令都执行通过，那么将通过git add命令将文件重新加入到本地的git commit中，如果没有执行通过，那么将不能commit