WebStorm 指南

---

一、如何格式化代码

1. 使用快捷键进行代码格式化

WebStorm 提供了多种方法来快速格式化代码，最常用的方式是使用快捷键。

• 格式化当前文件（所有文件类型）：
  • Windows/Linux: Ctrl + Alt + L
  • macOS: Cmd + Alt + L

这将会对当前文件进行格式化，包括：

• 对齐代码。
• 自动缩进。
• 规范化空格、空行等。

2. 使用右键菜单格式化代码

如果你不习惯快捷键，可以通过右键菜单来格式化代码：

1. 在代码编辑窗口中，右键点击。
2. 选择 Reformat Code，或者使用快捷键：Ctrl + Alt + L（Windows/Linux）或 Cmd + Alt + L（macOS）。

3. 格式化选定区域的代码

如果只想格式化代码的某一部分，选择该部分代码，然后使用相同的快捷键（Ctrl + Alt + L / Cmd + Alt + L）。这只会格式化选定的区域。

4. 配置代码格式化选项

WebStorm 允许你自定义代码格式化规则，确保你的代码符合项目的代码风格。可以通过以下步骤进行设置：

1. 打开 Preferences（Cmd + , 或 Ctrl + ,）。
2. 转到 Editor > Code Style，在此处可以配置不同语言的格式化选项（如 JavaScript、HTML、CSS、TypeScript 等）。
3. 配置选项包括：
   • 缩进：设置每次缩进的空格数。
   • 空格：选择何时以及如何使用空格（如函数参数之间、运算符两边等）。
   • 换行：定义在什么情况下自动换行。
   • 注释：格式化注释风格。
   • 其他设置：如代码行长、最大空行数等。

5. 自动保存并格式化代码

WebStorm 还可以在保存文件时自动格式化代码。可以通过以下步骤设置：

1. 转到 Preferences > Tools > Actions on Save。
2. 勾选 Reformat code 和 Optimize imports，这样每次保存时都会自动格式化代码。

---

二、如何像专家一样使用 WebStorm

WebStorm 是一个功能丰富的 IDE，除了格式化代码之外，它还有许多其他强大的功能，帮助开发者提高开发效率。以下是一些专家级技巧和功能，可以帮助你更高效地使用 WebStorm：

1. 智能代码补全与自动提示

WebStorm 提供了智能代码补全功能，可以大大提高代码编写速度。它根据你输入的部分代码自动提供建议，支持：

• 类、方法、变量的自动补全。
• 快速文档查看：按 Ctrl + Q（Windows/Linux）或 Cmd + Q（macOS）查看当前元素的文档。
• 代码提示：支持函数参数提示、代码段（Live Templates）等。

2. 使用 Live Templates 加速代码编写

WebStorm 提供了代码片段（Live Templates）功能，允许你使用简短的命令自动生成常用代码模式。

• 使用 Live Templates：
  1. 在代码中键入模板的缩写，然后按 Tab 键展开模板。
  2. 可以通过 Preferences > Editor > Live Templates 自定义模板。

例如，你可以定义 if 模板，输入 if 后按 Tab，自动生成：

if (condition) {
    // code
}

3. 使用 Git 集成

WebStorm 提供了强大的 Git 集成功能，使得版本控制变得非常简单。

• Git 提交与推送：右键点击文件或使用 VCS > Git 菜单进行提交和推送操作。
• Git 提交历史：可以通过 VCS > Git > Show History 查看提交历史。
• Git 分支管理：在 WebStorm 中，你可以轻松地管理 Git 分支、合并、冲突解决等。

4. 高效调试与运行

WebStorm 提供了强大的调试功能：

• 设置断点：点击行号设置断点。
• 调试控制台：在调试过程中查看变量的值、堆栈信息等。
• 调试配置：你可以创建多个运行/调试配置，并在不同环境下运行代码。

5. 使用快捷键提升开发效率

WebStorm 提供了大量的快捷键，熟练掌握这些快捷键能够显著提高开发效率：

• 打开文件：Ctrl + Shift + N（Windows/Linux）或 Cmd + Shift + N（macOS）。
• 查找文件中的内容：Ctrl + F（Windows/Linux）或 Cmd + F（macOS）。
• 查找文件中的类/方法：Ctrl + Shift + F12（Windows/Linux）或 Cmd + Shift + F12（macOS）。
• 跳转到定义：Ctrl + B（Windows/Linux）或 Cmd + B（macOS）。
• 显示文件结构：Ctrl + F12（Windows/Linux）或 Cmd + F12（macOS）。
• 重构代码：Ctrl + T（Windows/Linux）或 Cmd + T（macOS）。

6. 使用代码重构工具

WebStorm 提供了强大的代码重构工具，可以帮助你轻松重构代码，保证代码质量：

• 重命名：按 Shift + F6 来重命名变量、函数、类等。
• 提取方法：按 Ctrl + Alt + M（Windows/Linux）或 Cmd + Alt + M（macOS）将选中的代码提取到一个方法中。
• 提取变量：按 Ctrl + Alt + V（Windows/Linux）或 Cmd + Alt + V（macOS）提取代码中的常量或变量。

7. 配置与使用插件

WebStorm 支持丰富的插件，可以大大扩展其功能：

• 访问 Preferences > Plugins，搜索并安装你需要的插件（如 Docker、Kubernetes、ESLint 等）。
• 例如，安装 Prettier 插件来自动格式化代码，或者使用 ESLint 插件来进行代码质量检查。

8. 使用代码片段和代码分析

WebStorm 提供了实时的代码分析功能，可以帮助你发现潜在的问题：

• 实时错误检查：WebStorm 会在你编写代码时实时检查语法错误和警告。
• Code Inspection：可以通过 Analyze > Inspect Code 执行全面的代码检查，发现代码中的潜在问题。

9. 使用终端与任务管理

WebStorm 集成了终端，你可以在 IDE 内部直接使用命令行，避免频繁切换窗口。你还可以配置自动化任务，如 Webpack、NPM 脚本等。

---

总结：WebStorm 使用技巧

功能	描述
代码格式化	使用快捷键 Ctrl + Alt + L 进行格式化，配置代码样式，支持自动格式化。
智能代码补全	提供类、方法、变量的自动补全，快速文档查看，代码提示。
Live Templates	自定义代码片段，通过简短命令自动生成常用代码模式。
Git 集成	提供完整的 Git 支持，包括提交、推送、分支管理等。
调试与运行	设置断点、调试控制台、创建运行配置，轻松调试和运行代码。
快捷键使用	熟练使用快捷键提高开发效率，减少鼠标操作。
代码重构工具	提供重命名、提取方法/变量等重构功能。
插件扩展功能	安装和配置插件扩展 WebStorm 功能，支持 Docker、Prettier、ESLint 等插件。
代码分析与检查	实时错误检查，支持代码质量检查工具，自动化分析潜在问题。
集成终端和任务管理	内置终端和任务管理，支持 Webpack、NPM 等任务的自动化执行。