Nodejs代码检查与暂存工具lint-staged的使用

Nodejs代码检查与暂存工具lint-staged的使用
lint-staged 是一个非常有用的工具，它可以帮助你在提交代码之前自动运行代码检查（如 ESLint、Prettier 等）。这有助于确保你的代码在提交到版本控制系统之前符合一定的标准。下面是 lint-staged 的基本使用方法：

安装

首先，你需要安装 lint-staged 和你喜欢的代码检查工具（例如 ESLint 或 Prettier）作为开发依赖。

npm install lint-staged --save-dev

如果你还没有安装 ESLint 或 Prettier，可以安装它们：

npm install eslint --save-dev  # 如果你使用 ESLint
npm install prettier --save-dev  # 如果你使用 Prettier

配置

接下来，你需要配置 lint-staged。通常，你会在项目的根目录下创建一个 lint-staged.config.js 文件或直接在 package.json 中添加配置。

在 lint-staged.config.js 中配置

创建一个 lint-staged.config.js 文件，并添加如下内容：

module.exports = {
  '*.js': ['eslint --fix', 'git add'],
  '*.css': ['prettier --write', 'git add'],  // 如果你使用 Prettier
};

直接在 package.json 中配置

你也可以直接在 package.json 文件中添加 lint-staged 字段：

{
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"],
    "*.css": ["prettier --write", "git add"]  // 如果你使用 Prettier
  }
}

使用 Git 钩子

为了使 lint-staged 在提交代码时自动运行，你需要设置一个 pre-commit 钩子。你可以使用 husky 来帮助你管理这些钩子。

安装 husky：

npm install husky --save-dev

然后，在 package.json 中添加 husky 配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

测试

现在，当你尝试提交修改过的文件时，lint-staged 会自动运行配置好的代码检查工具，并在所有检查通过后才允许你提交。

示例

假设你有一个 .js 文件和一个 .css 文件都有一些格式错误，当你尝试提交这些文件时，lint-staged 会自动运行 ESLint 和 Prettier 进行修复，然后将这些文件添加到下一个提交中。

# 尝试提交文件
git add .
git commit -m "Add some files with formatting issues"

这样，你就可以确保每次提交的代码都是格式正确且符合规范的。


3 回复

Lint-staged 是一个非常棒的工具，它能确保你的代码在提交之前通过 lint 检查。想象一下，就像在你提交代码前，有一个严格的老师检查你的作业一样。

首先，你需要安装 lint-staged 和你的 linter（比如 ESLint 或 Prettier）作为开发依赖：

npm install --save-dev lint-staged eslint

然后，在你的 package.json 文件中配置 lint-staged。例如，如果你使用 ESLint，你可以这样设置：

{
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

这段配置的意思是：对于每一个 .js 文件，先运行 eslint --fix 来自动修复代码风格问题，然后用 git add 将修改后的文件添加到暂存区。

现在，每当你尝试提交代码时，lint-staged 会自动检查并修正暂存区域中的文件，只有当所有文件都符合规则时，commit 才会被允许。这就像给你的代码提交过程加了一个“安全带”，确保每次提交都是高质量的。


lint-staged 是一个非常有用的工具，可以让你在提交代码之前自动运行 linting 工具（如 ESLint、Prettier 等）来检查和修复代码。这可以帮助你在代码合并到主分支之前确保代码质量。

安装 lint-staged

首先，你需要安装 lint-staged 和你的 linting 工具。这里以 ESLint 和 Prettier 为例：

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

配置 lint-staged

接下来，你需要在项目的根目录下创建或更新 package.json 文件中的 lint-staged 部分。以下是一个示例配置：

{
  "lint-staged": {
    "*.{js,ts}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

这个配置表示对所有的 .js 和 .ts 文件，在提交之前会先运行 eslint --fix 来自动修复 ESLint 发现的问题，然后运行 prettier --write 来格式化代码。

安装必要的依赖

确保你已经安装了这些工具的命令行版本：

npx install-peerdeps --dev "@commitlint/cli @commitlint/config-conventional"

如果你使用的是 ESLint，还需要安装相应的插件和配置文件。例如：

npx install-peerdeps --dev eslint-config-prettier eslint-plugin-prettier

测试 lint-staged

现在你可以测试 lint-staged 是否正常工作。修改一些代码，使得 ESLint 或 Prettier 有东西可以处理。然后尝试提交这些更改：

git add your-file.js
git commit -m "Test lint-staged"

如果一切正常，你应该不会看到任何错误信息，并且在你打开文件时，它已经被 Prettier 格式化过。

使用 Husky 自动化

为了使 lint-staged 在每次尝试提交代码时自动运行，你可以结合 husky 使用：

npm install --save-dev husky

然后在 package.json 中添加如下配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

这样，每次你在提交前，都会自动运行 lint-staged 中定义的所有检查。

以上就是使用 lint-staged 的基本步骤，希望对你有所帮助！

lint-staged 是一个用于在 Git 操作（如 commit 或 pre-commit）时仅对已修改的文件运行 linter 和 formatter 的工具。以下是基本使用步骤：

  1. 安装 lint-staged 和相应的 lint 工具（如 ESLint、Prettier），例如：

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

  2. 在 package.json 中配置 lint-staged:

    "lint-staged": {
  "*.js": ["eslint --fix", "prettier --write"]
}

  3. 配置 Husky 以在 git 提交前自动运行 lint-staged（可选但推荐）:

    npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

这样，在执行 git 提交操作时，只有待提交的 JavaScript 文件会被 ESLint 和 Prettier 处理。

回到顶部