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

要在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 提交时自动格式化代码，能有效保持代码风格一致，减少 code review 的负担。关键在于配置 Pre-Commit Hook。

解决方案

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

   首先，确保你的项目已经安装了 Prettier 或者 ESLint，这两个工具都是流行的代码格式化工具。

   npm install --save-dev prettier # 或者 npm install --save-dev eslint

2. 配置 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',   }, }

3. 安装 husky 和 lint-staged

   husky 用于创建 Git Hooks，lint-staged 用于对暂存区的文件进行格式化。

   npm install --save-dev husky lint-staged

4. 配置 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

   文件有执行权限：

   chmod +x .husky/pre-commit

5. WebStorm 设置

   虽然上述步骤已经完成了自动格式化的配置，但为了更好的体验，可以在 WebStorm 中配置 File Watchers。

   • 打开

     Settings

     ->

     Tools

     ->

     File Watchers
   • 点击

     +

     ，选择

     Prettier

     或

     ESLint
   • 根据提示配置相应的参数，例如 Program, Arguments, Output paths to refresh 等。

   File Watchers 可以让你在保存文件时自动格式化代码，而不是只在提交时。

6. 测试

   修改一些代码，然后执行

   git add .

   和

   git commit -m "test"

   ，观察代码是否被自动格式化。

如何在 WebStorm 中配置 Git 提交时自动格式化代码，避免格式化失败？

确保你的 Prettier 和 ESLint 配置正确。一个常见的错误是配置文件中的语法错误，或者缺少必要的依赖。另外，检查你的

lint-staged

配置，确保它能正确匹配到需要格式化的文件类型。如果格式化失败，husky 会阻止提交，你需要修复错误后才能继续。

如果格式化失败，WebStorm 的控制台会显示详细的错误信息，根据错误信息进行排查。

如何配置 WebStorm 让代码格式化更智能？

WebStorm 本身提供了强大的代码格式化功能，但结合 Prettier 和 ESLint 可以实现更智能的格式化。例如，可以配置 ESLint 规则，强制使用特定的代码风格，或者禁止使用某些不推荐的语法。

在 WebStorm 中，可以配置 EditorConfig 文件，用于统一团队的代码风格。EditorConfig 文件可以覆盖 WebStorm 的默认设置，确保所有开发者使用相同的代码风格。

如何处理大型项目中的代码格式化性能问题？

大型项目中的代码格式化可能会比较慢，可以考虑以下优化方案：

• 只格式化暂存区的文件，避免格式化整个项目。这就是

  lint-staged

  的作用。

• 使用更快的格式化工具，例如

  esbuild

  或

  swc

  。

• 增加 CPU 核心数，提高格式化速度。
• 避免在提交时格式化过大的文件，可以将大文件拆分成小文件。

另外，可以考虑使用并行格式化工具，例如

concurrently

，同时执行多个格式化任务，提高格式化速度。