WebStorm 中 Git 提交时自动格式化代码的设置-webstorm-PHP中文网

WebStorm 中 Git 提交时自动格式化代码的设置

月夜之吻

发布： 2025-08-13 09:26:01

原创

576人浏览过

要在webstorm中配置git提交时自动格式化代码，需设置pre-commit hook。1. 安装prettier或eslint并配置相应规则；2. 安装husky和lint-staged以支持git hooks并对暂存区文件格式化；3. 在package.json中配置husky和lint-staged的执行逻辑，或通过命令初始化husky并创建可执行的pre-commit脚本；4. 在webstorm中配置file watchers实现保存即格式化；5. 测试提交确保配置生效并排查错误。为提升性能，大型项目应仅格式化暂存文件、选用高效工具、拆分大文件并行处理。

WebStorm 中 Git 提交时自动格式化代码的设置

WebStorm 中设置 Git 提交时自动格式化代码，能有效保持代码风格一致，减少 code review 的负担。关键在于配置 Pre-Commit Hook。

解决方案

安装 Prettier 或 ESLint (如果还没有)

首先，确保你的项目已经安装了 Prettier 或者 ESLint，这两个工具都是流行的代码格式化工具。
```
npm install --save-dev prettier
# 或者
npm install --save-dev eslint
```
登录后复制

配置 Prettier 或 ESLint

创建相应的配置文件

.prettierrc.js

登录后复制

或

.eslintrc.js

登录后复制

，并根据你的项目需求进行配置。

.prettierrc.js

登录后复制

示例：

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
}

登录后复制

.eslintrc.js

登录后复制

示例：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'no-unused-vars': 'warn',
  },
}

登录后复制

安装 husky 和 lint-staged

husky 用于创建 Git Hooks，lint-staged 用于对暂存区的文件进行格式化。
```
npm install --save-dev husky lint-staged
```
登录后复制

配置 husky 和 lint-staged

在

package.json

登录后复制

中添加配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  }
}

登录后复制

或者使用命令初始化 husky：

npx husky install
npm set-script prepare "husky install"
npm run prepare

登录后复制

然后创建

.husky/pre-commit

登录后复制

文件，内容如下：

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

npx lint-staged

登录后复制

确保

.husky/pre-commit

登录后复制

文件有执行权限：

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

chmod +x .husky/pre-commit

登录后复制

WebStorm 设置

虽然上述步骤已经完成了自动格式化的配置，但为了更好的体验，可以在 WebStorm 中配置 File Watchers。
- 打开
```
Settings
```
  登录后复制
  ->
```
Tools
```
  登录后复制
  ->
```
File Watchers
```
  登录后复制
- 点击
```
+
```
  登录后复制
  ，选择
```
Prettier
```
  登录后复制
  或
```
ESLint
```
  登录后复制
- 根据提示配置相应的参数，例如 Program, Arguments, Output paths to refresh 等。
File Watchers 可以让你在保存文件时自动格式化代码，而不是只在提交时。
测试

修改一些代码，然后执行
```
git add .
```
登录后复制
和
```
git commit -m "test"
```
登录后复制
，观察代码是否被自动格式化。