Meteor
Meteor 是一个全栈框架,允许您在客户端和服务器端都使用 JavaScript。 PyCharm 与 Meteor 集成,因此您可以在 IDE 内使用它。 PyCharm 中的 Meteor 支持包括:
通过检测 .meteor 文件夹并将 .meteor/local 文件夹从项目中排除,自动识别 Meteor 项目。 有关更多信息,请参阅 隐藏排除的文件。
自动将预定义的 Meteor 库附加到项目。 这启用了语法高亮、引用解析和代码补全。
通过 Handlebars 支持 Spacebars,并为 if 和 each 指令提供补全。 PyCharm 识别 Spacebars 模板,但作为副作用,会将 Meteor 项目中的 HTML 文件标记为
。 PyCharm 提供 JavaScript 源代码与模板之间的导航功能,使用 转到声明 Ctrl+B。一个专用的复杂 Meteor 运行/调试配置,用于在一个调试会话中调试客户端和服务器端代码,详情请参阅 调试一个 Meteor 应用程序。
在开始之前
请确保您的计算机上安装了 Node.js。
请确保在设置中启用 JavaScript 和 TypeScript 插件。 按 Ctrl+Alt+S 打开设置,然后选择 。 点击 已安装 选项卡。 在搜索字段中,键入 JavaScript and TypeScript。 有关插件的更多信息,请参阅 插件管理。
在 设置 | 插件 页面上的 Marketplace 选项卡中安装 Meteor 和 Handlebars/Mustache 插件,具体操作请参阅 从 JetBrains Marketplace 安装插件。
安装 Meteor
安装过程取决于您使用的操作系统。 了解更多信息,请访问 Meteor 官方网站。
在 Meteor 官方网站 下载 LaunchMeteor.exe 安装程序。
在嵌入的 终端 (Alt+F12 )中,输入:
$ curl https://install.meteor.com | /bin/sh
在嵌入的 终端 (Alt+F12 )中,输入:
$ curl https://install.meteor.com | /bin/sh
创建一个新的 Meteor 应用程序
如果您还没有应用程序,您可以从 Meteor 样板模板生成具有 Meteor 特定结构的 一个 PyCharm 项目。 或者,创建一个空的 PyCharm 项目,并按照下面 从现有的 Meteor 应用程序开始 中的描述配置 Meteor 支持。
从样板模板创建一个 Meteor 项目
点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 。 新建 项目 对话框 打开。
在左侧窗格中,选择 Meteor。
在右侧窗格中:
指定存储与项目相关的文件的文件夹路径。
指定 Meteor 可执行文件的位置(请参阅 安装 Meteor)。
从 模板 列表中选择要生成的示例。 要生成基本的项目结构,请选择 默认 选项。
在 文件名 字段中,输入将要生成的相互关联的 .js 、 .html 和 .css 文件的名称。 仅当从 模板 下拉列表中选择了 默认 示例类型时,该字段才可用。
创建一个空的 PyCharm 项目
点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 。 打开 新建 项目 对话框。
在左侧窗格中,选择 空的 项目。 在右侧窗格中,指定应用程序文件夹并点击 创建。
从现有的 Meteor 应用程序开始
如果您打算继续开发现有的 Meteor 应用程序,请在 PyCharm 中打开它,配置其中的 Meteor,并按照下面 下载 Meteor 依赖项 中的描述下载所需的依赖项。
打开您机器上已有的应用程序源代码
点击 打开 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中,选择存储源文件的文件夹。
从您的版本控制中检出应用程序源代码
在 欢迎 屏幕上点击 克隆仓库克隆。
或者,从主菜单中选择 或 或 。
您可能会看到与您的项目相关联的其他版本控制系统,而不是在主菜单中的 Git。 例如, Mercurial 或 Perforce。
在打开的对话框中,从列表中选择您的版本控制系统,并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息,请参见 Check out a project (clone)。
在现有项目中配置 Meteor 支持
在 设置 对话框 (Ctrl+Alt+S) 中,前往 。 Meteor 页打开。
指定 Meteor 可执行文件的路径。 如果您遵循了标准安装程序,PyCharm 会自动检测该文件。
要将 .meteor/local 文件夹及其内容纳入索引,请清除 在打开项目时自动排除 ".meteor/local" 目录 复选框。 有关更多信息,请参阅下面的 隐藏排除的文件。
请确保选中 自动将 Meteor 包导入为外部库 复选框。
选中复选框后,PyCharm 会自动从 meteor/packages 文件中导入外部包。 因此,PyCharm 提供全方位的编码支持:解析对 Meteor内置函数(例如
check(true))以及第三方包函数的引用,提供正确的语法和错误高亮,支持使用源映射进行调试等。清除此复选框后,PyCharm 不会自动从 meteor/packages 文件中导入外部包。 因此,不会提供任何编码支持。 为改善这种情况,请在编辑器中打开 meteor/packages 文件,单击 将包导入为库 链接或运行
meteor --update命令。
确保 PyCharm 已将 Meteor 库附加到项目中。
在 设置 对话框(Ctrl+Alt+S )中,转到 。
在打开的 设置:JavaScript 库 页面上,确保 库 列表中 Meteor 项目库旁边的复选框已选中。
项目安全性
当您打开一个在 PyCharm 之外创建并导入到 PyCharm 的项目时,PyCharm 会显示一个对话框,您可以在其中决定如何处理这个具有不熟悉源代码的项目。

请选择以下选项之一:
安全模式中预览 :在这种情况下,PyCharm 以预览模式打开项目。 这意味着您可以浏览项目的源代码,但不能运行任务和脚本或运行/调试您的项目。
PyCharm 会在编辑器区域顶部显示一条通知,您可以随时点击 信任项目… 链接并加载您的项目。
信任项目 :在这种情况下,PyCharm 会打开并加载一个项目。 这意味着项目已经初始化,项目的插件已解析,依赖项已添加,并且所有 PyCharm 功能都可用。
请勿打开 :在这种情况下,PyCharm 不会打开项目。
请从 项目安全 了解更多。
导入 Meteor 包
除了预定义的 Meteor 库(确保基本的 Meteor 特定代码辅助功能),您还可以下载在 .meteor/local/packages 文件中定义的额外 包。
下载额外的 Meteor 包
在编辑器中打开 .meteor/local/packages 文件。
单击屏幕右上角的 导入 Meteor 包 链接。
在打开的对话框中,根据您计划在项目中开发的应用程序类型,指定要下载的包。
客户端
服务器
Cordova :选择此选项以导入支持开发 iOS 和 Android 的 Meteor 应用程序的包。有关更多信息,请参阅 Meteor Cordova Phonegap 集成。
PyCharm 会自动将用于存储已构建应用程序的 .meteor/local 文件夹标记为 排除 ,但仍会在项目树中显示它。
隐藏 .meteor/local 文件夹
单击
按钮,该按钮位于 项目 工具窗口 Alt+1 的工具栏上,并取消选中 显示已排除的文件 选项旁的勾选。
运行一个 Meteor 应用程序
PyCharm 根据类型为 Meteor 的运行配置运行 Meteor 应用程序。 如果您从样板模板创建了应用程序,PyCharm 会为您生成此运行配置。
创建一个 Meteor 运行配置
可选
在 程序参数 字段中,指定在启动时传递给可执行文件的命令行附加参数(如果适用)。 例如,这些可以是
--dev、--test或--prod,用于指示应用程序运行的环境(开发、 测试 或 生产 环境),以便在启动时加载不同的资源。默认情况下,PyCharm 在 运行 工具窗口中显示应用程序输出。 要查看客户端代码执行的结果,请在 Browser / Live Edit 选项卡中选择 启动后 复选框,并从列表中选择要打开的浏览器。 在下面的字段中,指定用于打开应用程序的 URL 地址。 默认值是 http://localhost:3000 。
运行一个 Meteor 应用程序
按照上述描述创建运行/调试配置或者修改现有配置,然后在对话框中点击 运行。
或者,从主工具栏的列表中选择新创建的运行配置并点击
。
在 运行 工具窗口或浏览器中查看应用程序输出(如果您已配置浏览器在应用程序启动时打开) 如上所述。
调试一个 Meteor 应用程序
使用 PyCharm,您可以在一个调试会话中调试 Meteor JavaScript 代码的 客户端 和 服务器端。 调试会话仅通过专用的 Meteor 运行配置启动。
从技术上讲,几个实现不同应用程序的 Meteor 项目可以组合在一个 PyCharm 项目中。 要独立运行和调试这些应用程序,请为每个应用程序创建一个单独的运行配置,并指定相关的工作目录。 为避免端口冲突,这些运行配置应使用不同的端口。 在 程序参数 字段中,以 --port=<port_number> 格式为每个运行配置指定一个单独的端口。
在浏览器中预览更改
在调试会话期间,您可以实时预览对 HTML、CSS 或 JavaScript 代码的更改。 您编辑的页面的实时内容显示在 Elements 选项卡的 调试工具窗口 中。 更新策略取决于您正在编辑的应用程序部分。
预览客户端代码的更改
切换到 <配置名称> JavaScript
选项卡,并单击工具栏上的
。通过在 Meteor 页面上选择 启用 Meteor 热代码推送 复选框来配置更新的自动上传。 了解更多信息,请访问 Meteor 官方网站。
预览服务器端代码的更改
切换到 <Configuration name>
选项卡,并单击工具栏上的
。按照 在 HTML、CSS 和 JavaScript 中实时编辑 中的描述,使用 实时编辑 功能配置自动上传。 建议您在 页面 上选择 如果 hotswap 失败,请重启 复选框,然后 PyCharm 将尝试重新加载页面(如果更改无法直接应用)。
