WebStorm 2025.2 Help

Meteor

Meteor 是一个全栈框架，可让您在客户端和服务器端同时使用 JavaScript。 WebStorm 与 Meteor 集成，允许您在 IDE 中使用它。 WebStorm 中对 Meteor 的支持包括：

  • 通过检测 .meteor 文件夹并将 .meteor/local 文件夹排除在项目之外，自动识别 Meteor 项目。 有关更多信息，请参阅 隐藏排除的文件。

  • 自动将预定义的 Meteor 库附加到项目中。 这将启用语法高亮、引用解析与代码补全。

  • 通过 Handlebars 支持 Spacebars，并为 if 和 each 指令提供补全。 WebStorm 能识别 Spacebars 模板，但副作用是将 Meteor 项目中的 HTML 文件标记为 Handlebars/Mustache 图标。 WebStorm 提供了 JavaScript 源代码与模板之间的导航功能，例如 转到声明 Ctrl+B。

  • 提供专门的复杂 Meteor 运行/调试配置，用于在单次调试会话中同时调试客户端和服务器端代码，详见 调试 Meteor 应用。

开始之前

  1. 请确保您的计算机已安装 Node.js。

  2. 在 设置 | 插件 页面下的 Marketplace 选项卡中安装并启用 Meteor 插件，具体请参见 从 JetBrains Marketplace 安装插件。

  3. 请确保设置中已启用 Handlebars/Mustache 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 插件。 点击 已安装 选项卡。 在搜索栏中键入 Handlebars/Mustache。 有关插件的更多信息，请参见 管理插件。

安装 Meteor

安装过程取决于您所使用的操作系统。 详细内容请参见 Meteor 官方网站。

  • 在嵌入式 终端 （Alt+F12 ）中键入：

    $ curl https://install.meteor.com | /bin/sh

  • 在嵌入式 终端 （Alt+F12 ）中键入：

    $ curl https://install.meteor.com | /bin/sh

创建新 Meteor 应用

如果您尚未创建应用，可以从 Meteor 样板模板生成具有 Meteor 特定结构的 一个 WebStorm 项目。 或者，创建一个空的 WebStorm 项目，并按照下方 从现有 Meteor 应用开始 中的描述配置其中的 Meteor 支持。

从样板模板创建 Meteor 项目

  1. 在 欢迎 界面上点击 新建项目 ，或从主菜单中选择 文件 | 新建 | 项目。 将会打开 新建 项目 对话框。

  2. 在左侧窗格中，选择 Meteor。

  3. 在右侧窗格中：

    1. 指定项目相关文件将被存储的文件夹路径。

    2. 指定 Meteor 可执行文件的位置（请参阅 安装 Meteor）。

    3. 从 模板 列表中选择要生成的示例。 如需生成基本项目结构，请选择 默认 选项。

    4. 在 文件名 字段中，输入将要生成的相互关联的 .js 、 .html 和 .css 文件的名称。 仅当从 模板 下拉列表中选择了 Default 样本类型时，该字段才可用。

创建空 WebStorm 项目

  1. 在 欢迎 屏幕上单击 新建项目 ，或者从主菜单中选择 文件 | 新建 | 项目。 将会打开 新建 项目 对话框。

  2. 在左侧窗格中，选择 空 项目。 在右侧窗格中，指定应用程序文件夹并单击 创建。

从现有 Meteor 应用开始

如果您准备继续开发现有的 Meteor 应用程序，请在 WebStorm 中打开该应用程序，进行配置，并按照下文 下载 Meteor 依赖项 的说明下载所需的依赖项。

打开已存在于本机中的应用源代码

  • 在 欢迎 屏幕上单击 打开 ，或者从主菜单中选择 文件 | 打开。 在打开的对话框中，选择存储源代码的文件夹。

从版本控制中检出应用源代码

  1. 在 欢迎 屏幕上，单击 克隆存储库克隆。

    或者，您也可以从主菜单中选择 文件 | 新建 | 来自版本控制的项目…、 Git | 克隆… 或 版本控制 | 从版本控制获取。

    在主菜单中，您可能会看到与项目关联的其他版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出应用程序源代码的存储库。 如需了解更多信息，请参见 检出项目（克隆）。

在现有项目中配置 Meteor 支持

  1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | Meteor。 将会打开 Meteor 页面。

  2. 指定 Meteor 可执行文件的路径。 如果您按照标准安装过程操作，WebStorm 会自动检测该文件。

  3. 如需将 .meteor/local 文件夹及其内容包含在索引中，请取消选中 在打开项目时自动排除 “.meteor/local” 目录 复选框。 如需了解更多信息，请参阅下文的 隐藏已排除的文件。

  4. 确保已选中 自动将 Meteor 软件包导入为外部库 复选框。

    • 选中该复选框后，WebStorm 将会自动从 meteor/packages 文件中导入外部包。 因此，WebStorm 提供完整范围的代码辅助功能：可解析对 Meteor 内置函数（例如 check(true) ）以及第三方包中函数的引用，提供正确的语法和错误高亮支持，支持使用 Source Map 进行调试等。

    • 取消选中该复选框后，WebStorm 将不会自动从 meteor/packages 文件中导入外部包。 因此，将不会提供任何代码辅助功能。 如需改善此状况，请在编辑器中打开 meteor/packages 文件，点击 将软件包导入为库 链接或运行 meteor --update 命令。

  5. 请确保 WebStorm 已将 Meteor 库附加到项目中。

    1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | 库。

    2. 在打开的 设置：JavaScript 库 页面中，确保在 库 列表中，Meteor 项目库旁的复选框已选中。

项目安全

当您打开一个在 WebStorm 外部创建并导入到其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理此包含未知源代码的项目。

不受信任的项目警告

请选择以下选项之一：

  • 在安全模式中预览 ：在此情况下，WebStorm 会以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务和脚本或运行／调试项目。

    WebStorm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接以加载项目。

  • 信任项目 ：在此情况下，WebStorm 会打开并加载项目。 这意味着项目已初始化、项目插件已解析、依赖项已添加，WebStorm 的所有功能均可使用。

  • 不打开 ：在此情况下，WebStorm 不会打开该项目。

有关详情，请参阅 项目安全性。

导入 Meteor 包

除了预定义的 Meteor 库（用于提供基本的 Meteor 特定代码辅助功能）之外，您还可以下载在 .meteor/local/packages 文件中定义的其他 包。

下载额外的 Meteor 包

  1. 在编辑器中打开 .meteor/local/packages 文件。

  2. 在屏幕右上角，点击 导入 Meteor 软件包 链接。

  3. 在打开的对话框中，根据您准备在项目中开发的应用程序类型指定要下载的包。

    • 客户端

    • 服务器端

    • Cordova ：选择此选项可导入支持开发 iOS 和 Android 平台 Meteor 应用程序所需的包。有关更多信息，请参阅 Meteor Cordova Phonegap 集成。

WebStorm 会自动将用于存储构建应用程序的 .meteor/local 文件夹标记为 排除 ，但仍会在项目树中显示该文件夹。

隐藏 .meteor/local 文件夹

  • 在 项目 工具窗口的工具栏中点击 显示选项菜单 按钮 Alt+1 ，然后取消选中 显示已排除的文件 选项旁边的勾选框。

运行 Meteor 应用

WebStorm 会根据 Meteor 类型的运行配置来运行 Meteor 应用程序。 如果您是从示例模板创建应用程序，WebStorm 会为您生成此运行配置。

创建 Meteor 运行配置

  1. 从工具栏上的 运行／调试配置 小部件中选择 编辑配置 ，点击 添加新配置 按钮（添加新配置按钮 ），然后从列表中选择 Meteor 以打开 配置设置。

    开始创建运行/调试配置

  2. 在 配置 选项卡中，根据安装方式指定 Meteor 可执行文件的路径（请参阅 安装 Meteor）。

  3. 指定存放要运行的应用程序文件的文件夹。 该文件夹的根目录必须包含 .meteor 子文件夹，WebStorm 才能识别您的应用程序为 Meteor 项目。

    默认情况下，工作目录为项目根文件夹。

可选

  1. 在 程序参数 字段中，指定启动时传递给可执行文件的命令行附加参数（如适用）。 这些参数可为 --dev、 --test 或 --prod ，用于指示应用程序当前运行的环境（开发、 测试 或 生产 环境），以便启动时加载不同的资源。

  2. 默认情况下，WebStorm 会在 运行 工具窗口中显示应用程序输出。 要查看客户端代码执行的结果，请在 浏览器／实时编辑 选项卡中，选中 启动后 复选框并从列表中选择要打开的浏览器。 在下方字段中，指定打开应用程序的 URL 地址。 默认值为 http://localhost:3000 。

运行 Meteor 应用

  1. 按照上述描述创建运行/调试配置 ，或修改现有配置并在对话框中点击 运行。

    或者，从主工具栏的列表中选择新创建的运行配置并点击 运行按钮。

  2. 在 运行 工具窗口中或在浏览器中查看应用输出（如果配置了应用启动时打开浏览器 如上所述）。

调试 Meteor 应用

借助 WebStorm，您可以在一次调试会话中同时调试 Meteor JavaScript 代码的 客户端 和 服务器端 部分。 调试会话只能通过专用的 Meteor 运行配置发起。

从技术上讲，通过一个单一的 WebStorm 项目可以组合多个实现不同应用程序的 Meteor 项目。 要分别运行和调试这些应用程序，请为每个应用创建一个独立的运行配置，并指定相应的工作目录。 为避免端口冲突，这些运行配置应使用不同的端口。 在 程序参数 字段中，以 --port=<port_number> 的格式为每个运行配置指定不同的端口。

  1. 在需要的代码位置设置 断点。

  2. 创建一个 Meteor 运行/调试配置， 如上所述。 在 浏览／实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Chrome ，并勾选 使用 JavaScript 调试器 复选框。

  3. 要启动调试会话，请从主工具栏的列表中选择所需的调试配置，然后点击列表旁的 调试按钮 或从主菜单中选择 运行 | 调试 <configuration name>。

    调试 工具窗口将打开，并显示两个选项卡：一个用于调试标记为 Meteor 图标 的服务器端代码，另一个用于调试标记为 JavaScript 图标 的客户端代码。

  4. 查看已挂起的程序 并 单步执行程序。

  5. 您也可以选择 如以下所述 实时预览对应用程序的更改。

在浏览器中预览更改

在调试会话期间，您可以实时预览对 HTML、CSS 或 JavaScript 代码的修改。 您正在编辑页面的实时内容将显示在 Elements 选项卡中的 调试工具窗口。 更新策略取决于您所编辑的应用程序部分。

预览客户端代码的更改

  • 切换到 <Configuration name> JavaScript JavaScript 图标 选项卡，点击工具栏上的 更新。

  • 在 Meteor 页面中选中 启用 Meteor 热更新 复选框以配置自动上传更新。 更多信息请参阅 Meteor 官方网站。

预览服务器端代码的更改

  • 切换到 <Configuration name> Meteor 图标 选项卡，点击工具栏上的 更新。

  • 使用 实时编辑 功能配置自动上传，具体请参见 在 HTML、CSS 和 JavaScript 中进行 Live Edit。 建议在 页面 上选中 如果热替换失败则重启 复选框，如果无法应用更改，WebStorm 将尝试重新加载页面。

最后修改日期： 2025年 9月 26日
Markdown 代码样式设置运行/调试配置：Meteor