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

   文件有执行权限：
   

   方舟订单管理系统

   系统开发由二当家的编写，代码完全开源，可自行修改源码，欢迎使用！ 1、网站采用php语言开发，更安全、稳定、无漏洞、防注入、防丢单。 2、记录订单来路，客户IP记录及分析，订单数据统计 3、订单邮件提醒、手机短信提醒，让您第一时间追踪订单，大大提升了发货效率，提高订单成交率。 4、多种支付方式，包含：货到付款、支付宝接口、网银支付，可设置在线支付的折扣比率。 5、模板样式多样化，一个订单放到多个网

   下载

   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

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

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

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

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

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

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

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

  lint-staged

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

  esbuild

  或

  swc

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

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

concurrently