WebStorm 设置

JetBrains IDE系列 (WebStorm, IntelliJ IDEA, PyCharm等)

WebStorm 内置支持 Prettier 代码格式化功能。若使用其他 JetBrains IDE（如 IntelliJ IDEA、PhpStorm 或 PyCharm），需确保在 Preferences/Settings | Plugins 中安装并启用 https://plugins.jetbrains.com/plugin/10456-prettier。

首先需安装配置 Prettier，操作指南参见 https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install。

完成后可在 IDE 执行：

  1. 使用 Reformat with Prettier 操作（macOS: Opt+Shift+Cmd+P / Win/Linux: Alt+Shift+Ctrl+P）格式化选定代码、文件或整个目录
  2. 配置保存时自动格式化（Cmd+S/Ctrl+S）
  3. 设为默认格式化器（Opt+Cmd+L/Ctrl+Alt+L）

开启自动格式化：

  1. 进入 Preferences / Settings | Languages & Frameworks | JavaScript | Prettier
  2. 勾选 On save（保存时格式化）和/或 On 'Reformat Code' action（使用格式化操作时）

!/images/webstorm/prettier-settings.png

默认支持格式化的文件类型：

  • .js
  • .ts
  • .jsx
  • .tsx

如需扩展格式化范围（其他文件类型或特定目录），可通过 https://github.com/isaacs/node-glob 自定义配置。更多细节详见 https://www.jetbrains.com/help/webstorm/prettier.html。

总结

  • IDE支持
    WebStorm 原生支持 Prettier，其他 JetBrains IDE 需安装官方插件

  • 核心功能

    • 快捷键格式化选定内容（代码/文件/目录）
    • 配置保存时自动格式化
    • 设为默认格式化器

  • 文件类型配置

    • 默认支持主流前端文件格式
    • 可通过 glob 模式扩展支持范围

  • 配置路径
    Preferences/Settings → Languages & Frameworks → JavaScript → Prettier

最后更新: