WebStorm 2021.1 Help

流星

Meteor是一个全栈框架，可让您在客户端和服务器端使用 JavaScript。WebStorm 与 Meteor 集成，因此您可以从 IDE 内部使用它。WebStorm 中的 Meteor 支持包括：

  • 通过检测.meteor文件夹并从项目中排除.meteor/local文件夹来自动识别 Meteor项目。有关详细信息，请参阅隐藏排除的文件。

  • 自动将预定义的 Meteor 库附加到项目中。这启用了语法突出显示、解析引用和代码完成。

  • 通过 Handlebars 支持空格键，并完成if和each指令。WebStorm 可以识别 Spacebars 模板，但作为副作用，Meteor 项目中的 HTML 文件使用车把/小胡子图标. WebStorm 通过 go to Declaration Ctrl+B提供 JavaScript 源代码和模板之间的导航。

  • 用于在一个调试会话中调试客户端和服务器端代码的专用复杂 Meteor 运行/调试配置，请参阅调试 Meteor 应用程序。

在你开始前

确保在Settings/Preferences |上启用Meteor和Handlebars/Mustache所需的插件。插件页面，选项卡Installed，有关详细信息，请参阅管理插件。

安装流星

安装过程取决于您使用的操作系统。从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文件的名称。仅当从模板下拉列表中选择默认样品类型时，该字段才可用。

创建一个空的 WebStorm 项目

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

  2. 在左侧窗格中，选择Empty Project。在右侧窗格中，指定应用程序文件夹并单击Create。

从现有的 Meteor 应用程序开始

如果您要继续开发现有的 Meteor 应用程序，请在 WebStorm 中打开它，在其中配置 Meteor，然后下载所需的依赖项，如下面的下载 Meteor 依赖项中所述。

打开计算机上已有的应用程序源

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

从您的版本控制中检查应用程序源

  1. 在欢迎屏幕上单击从 VCS 获取。或者，选择文件 | 来自版本控制或<Your_VCS> 的项目 | 从主菜单中获取版本控制。

    <Your_VCS> 代表与您当前打开的项目相关联的版本控制系统。

  2. 在打开的对话框中，从列表中选择您的版本控制系统并指定要从中签出应用程序源的存储库。有关详细信息，请参阅签出项目（克隆）。

在现有项目中配置 Meteor 支持

  1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Languages and Frameworks | JavaScript | 流星。流星页面打开。

  2. 指定 Meteor 可执行文件的路径。如果您遵循标准安装程序，WebStorm 会自动检测该文件。

  3. 要将.meteor/local文件夹及其内容纳入索引，请清除打开项目时自动排除“.meteor/local”目录复选框。有关详细信息，请参阅下面的隐藏排除的文件。

  4. 确保选中Automatically import Meteor packages as external library复选框。

    • 选中该复选框后，WebStorm 会自动从流星/包文件中导入外部包。因此，WebStorm 提供了全方位的编码帮助：解析对Meteor内置函数的引用，例如，check(true)以及对第三方包中的函数的引用，提供正确的语法和错误突出显示，支持使用源映射进行调试等等。

    • 清除此复选框后，WebStorm 不会自动从流星/包文件中导入外部包。因此，不提供编码帮助。要改善这种情况，请在编辑器中打开meteor/packages文件，然后单击Import packages as library链接或运行meteor --update命令。

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

    1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Languages and Frameworks | JavaScript | 图书馆。

    2. 在打开的Settings: JavaScript Libraries页面上，确保选中Libraries列表中 Meteor 项目库旁边的复选框。

项目安全

当您打开在 WebStorm 外部创建并导入其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。

不受信任的项目警告

选择以下选项之一：

  • 以安全模式预览：在这种情况下，WebStorm 以“预览模式”打开项目，这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试项目。

    WebStorm 在编辑器区域顶部显示通知，您可以随时单击Trust project链接并加载您的项目。

  • 信任项目：在这种情况下，WebStorm 打开并加载一个项目。这意味着项目已初始化，项目的插件已解决，依赖项已添加，并且所有 WebStorm 功能都可用。

  • 不要打开：在这种情况下，WebStorm 不会打开项目。

从项目安全中了解更多信息。

导入 Meteor 包

除了确保基本 Meteor 特定编码帮助的预定义 Meteor 库外，您还可以下载.meteor/local/packages文件中定义的其他包。

下载其他 Meteor 包

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

  2. 单击屏幕右上角的Import Meteor Packages链接。

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

    • 客户

    • 服务器

    • Cordova：选择此选项以导入支持 iOS 和 Android 的 Meteor 应用程序开发的包，有关详细信息，请参阅Meteor Cordova Phonegap 集成。

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

隐藏 .meteor/local 文件夹

  • 单击“项目”显示选项菜单工具窗口工具栏上的按钮，然后删除“显示排除的文件”选项旁边的勾号。

运行 Meteor 应用程序

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

创建 Meteor 运行配置

  1. 在主菜单上，转到运行 | 编辑配置，单击并从列表中图标一般添加选择Meteor 。运行/调试配置：Meteor打开。

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

  3. 指定存储要运行的应用程序文件的文件夹。该文件夹的根目录中必须有一个.meteor子文件夹，这样 WebStorm 才能将您的应用程序识别为Meteor 项目。

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

可选

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

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

运行 Meteor 应用程序

  1. 从主工具栏的列表中选择新创建的运行配置，然后单击运行按钮列表旁边的 。

  2. 如果您将浏览器配置为如上所述在应用程序启动时打开，请在“运行”工具窗口或浏览器中查看应用程序输出。

调试 Meteor 应用程序

使用 WebStorm，您可以在一个调试会话中同时调试 Meteor JavaScript 代码的客户端和服务器端。调试会话仅通过专用的 Meteor 运行配置启动。

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

调试 Meteor 应用程序

  1. 必要时在代码中设置断点。

  2. 如上所述创建Meteor运行/调试配置。在Browse / Live Edit选项卡中，选中After launch复选框，从列表中选择Chrome ，然后选中with JavaScript debugger复选框。

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

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

  4. 探索暂停的程序并逐步执行该程序。

  5. 或者，如下所述即时预览对应用程序的更改。

在浏览器中预览更改

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

要预览对客户端代码的更改，请执行以下操作之一：

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

  • 通过选中Meteor页面上的Enable Meteor Hot code push复选框来配置更新的自动上传。从Meteor 官方网站了解更多信息。

要预览对服务器端代码的更改，请执行以下操作之一：

  • 切换到<配置名称> 流星图标选项卡并单击更新工具栏上的 。

  • 使用实时编辑功能配置自动上传，如HTML、CSS 和 JavaScript 中的实时编辑中所述。建议您选中页面上的Restart if hotswap failed复选框，如果没有此选项就无法应用更改，WebStorm 将尝试重新加载页面。

最后修改：2022 年 1 月 17 日
Markdown 运行/调试配置：Meteor