如何配置 lint-stage 以运行 eslint 和 prettier 脚本

如何配置lint-staged以运行ESLint和Prettier脚本

首先，让我解释一下为什么我们会使用lint-staged。在一个多人开发的项目中，确保代码风格的一致性和避免引入明显的错误非常重要。lint-staged可以在git commit之前自动运行代码检查工具，帮助我们抓住问题早期阶段，并统一代码风格。

步骤 1: 安装所需的npm包

要使用lint-staged和ESLint以及Prettier，首先需要在项目中安装这些工具。假设你已经初始化了一个Node.js项目并且有package.json文件，你可以通过npm或yarn来安装这些依赖。

bash
npm install --save-dev eslint prettier lint-staged husky

或者如果你使用yarn：

bash
yarn add eslint prettier lint-staged husky --dev

步骤 2: 配置ESLint

创建一个.eslintrc文件（如果尚未创建），你可以根据项目需求配置ESLint规则。

json
{
  "extends": "eslint:recommended",
  "rules": {
    // 自定义规则
  }
}

步骤 3: 配置Prettier

创建一个.prettierrc文件来定义代码格式化规则。

json
{
  "semi": false,
  "singleQuote": true
}

步骤 4: 配置lint-staged

在你的package.json文件中添加一个lint-staged的配置。这个配置确保只有被git暂存的文件才被ESLint和Prettier检查和格式化。

json
{
  // ...其他配置
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

这里我们配置lint-staged来运行ESLint和Prettier在所有暂存的JavaScript和TypeScript文件上。eslint --fix会自动修复可以修复的问题，prettier --write则会格式化代码。

步骤 5: 配置Husky

Husky是一个工具，可以让我们轻松地使用git hooks。我们可以利用它来在提交前运行lint-staged。

在.husky目录下创建一个名为pre-commit的hook文件，并添加以下内容：

bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

确保此文件具有执行权限：

bash
chmod +x .husky/pre-commit

总结

通过这样的配置，每次提交代码时，Husky会触发pre-commit钩子，该钩子会执行lint-staged，后者又会运行ESLint和Prettier在所有暂存的文件上。这样可以大大减少代码中的错误，并保持代码风格的一致性。

这是一个在实际项目中配置lint-staged的具体示例，希望这能帮助您理解和实现在您的项目中。