Sencha Visual Studio Code 插件

Sencha 的 Visual Studio (VS) Code 插件是 Microsoft 的 Visual Studio Code 编辑器可用的扩展。Visual Studio Code 是 Windows、OS X 和 Linux 的免费开源 (MIT) 源代码编辑器。该项目可在 GitHub 上进行协作。

Sencha 的 VS Code 插件扩展了 VS Code，以提供 Ext JS IntelliSense、代码检查、文档查找以及与 Sencha Cmd 的有用集成。

安装

要求

Ext JS 4.2.+

http://www.sencha.com/products/extjs

Sencha Cmd 6+（可选）

仅当您想要利用创建和运行 Sencha 应用程序的能力时才需要 Sencha Cmd。

https://www.sencha.com/products/sencha-cmd/

Visual Studio Code 编辑器

• 请为 Visual Studio Code IDE 的 1.84、1.85、1.86 和之前的版本使用插件版本 1.0.5
• 请为 Visual Studio Code IDE 的 1.76、1.77、1.78.2 和之前的版本使用插件版本 1.0.4

Sencha 的 Visual Studio Code 插件与 Visual Studio Code 1.x 兼容。如果您遇到兼容性问题，请在 Sencha Visual Studio Code 论坛 中报告问题。

https://vscode.js.cn/

从支持门户安装

1. 首先从 支持门户 下载 Sencha VS Code 插件 vscode-extjs-1.x.x.vsix。

2. 从 Visual Studio Code 中的左侧选择“扩展”选项卡。

3. 从 "..." 菜单中选择“从 VSIX 安装”并选择已下载的 vscode-extjs-1.x.x.vsix 文件。

注意：您还可以使用以下命令从命令行安装扩展

code --install-extension vscode-extjs-1.x.x.vsix

从 Visual Studio Code 安装

从 Visual Studio Code 市场下载

您可以在 VS Code 编辑器中浏览和安装 Sencha Visual Studio Code 插件。通过单击 VS Code 侧边栏中的视图栏上的扩展图标，打开扩展视图。

搜索“Sencha”，然后单击“Sencha Visual Studio Code 插件”的“安装”。

许可

安装后，VS Code 将建议重新启动。继续并重新启动，当应用程序重新打开时，您将看到以下许可工具栏

试用许可

如果您没有许可证并且想要试用 Sencha 扩展，请选择“开始试用”。

系统将提示您输入电子邮件地址。输入您的电子邮件，然后按“返回”或“输入”。

您应该会收到一条消息，提示您的试用许可已激活。现在，您可以将 Sencha VS Code 扩展用于评估目的，有效期为 30 天。

新用户

如果您的电子邮件地址未与 Sencha 论坛帐户关联，您将收到一封来自 [email protected] 的电子邮件，其中包含电子邮件验证代码。

然后，插件将提示您输入该代码以开始试用。

许可激活

如果您有许可证或已准备好激活 Sencha 扩展，请单击页脚中显示“激活 Sencha Ext JS 扩展”的位置。然后，您可以单击“激活许可证”。

系统将提示您输入电子邮件地址。您应该会通过电子邮件收到激活代码。只需将激活代码粘贴到提示中，您就会收到一条消息，提示扩展已成功激活！

离线激活

如果您需要离线激活代码，只需单击“离线激活”。然后，系统将提示您是否需要离线试用或离线激活。

然后，您可以按照向导工具创建离线激活请求。

扩展将显示一封电子邮件，您可以将其发送至 [email protected] 以申请许可证。

您将收到一封电子邮件，其中附有“license.json”文件。您可以使用“显示 Ext JS 扩展许可证位置”命令随时访问许可证文件。

功能

Sencha Visual Studio Code 插件简单易用。功能包括

• IntelliSense - 代码补全

• 代码导航

• 文档查找

• 代码生成

• 与 Sencha Cmd 集成

• 调试 Ext JS 应用程序

• 编辑 Ext JS IntelliSense 配置

让我们逐一了解这些功能。

IntelliSense - 代码补全

让我们从 Sencha Visual Studio Code 插件最方便的功能之一——代码补全来开始了解其优势。此功能允许您接收适当可见性范围的补全建议。在编辑 Ext JS JavaScript 文件时，只需键入即可打开 IntelliSense 窗口。您还可以使用 control+space 组合在 VS Code 中打开 IntelliSense。IntelliSense 将根据正在补全的内容使用 Sencha 和标准 VS Code 结果的混合。

这适用于几乎所有框架项，包括

• 所有 Ext JS 和用户类的配置、方法和属性名称

• 别名属性的值，如 xtype、controller、viewModel、layout 等...

• Component.on、.mon、.un、.mun 和 listeners 对象中的事件名称

• 所有以 cls 结尾的配置属性和方法中的 CSS 类名称

• 具有别名的控制器中的 this.lookupReference(..) 和 this.lookup(...)

• 侦听器中的控制器方法：{ (event): (methodName) } 以及处理程序配置属性

• Ext.grid.Column.dataIndex 的模型/存储字段

• 绑定配置中 ViewModel 的属性

启用 IntelliSense

仅当项目在其中任何位置包含 .sencha 目录时，IntelliSense 才默认启用。Cmd 在创建应用程序、工作区或包时会自动创建一个 .sencha 目录。

但是，未使用 Cmd 创建应用程序的用户需要使用命令面板（Shift + Command + P）中的“为该项目启用 Ext JS IntelliSense”命令显式启用项目上的 IntelliSense。

代码导航（打开定义）

Sencha VS Code 插件对 Ext JS 框架有深入了解。这使插件能够提供强大的导航工具。您可以在应用程序中快速移动，而无需搜索树或目录结构。

您可以使用类名、xtype 和其他类型别名进行导航。您还可以按方法、属性、配置键、事件等进行导航。您可以通过按住 CTRL（在 Mac 上为 Command）单击 Ext JS 框架或自定义类的源成员来导航到该成员。您还可以将光标移动到要打开定义的位置，然后按 F12 键 或 fn + F12 键。源将在新的 JavaScript 编辑器选项卡中打开。

您还可以使用 Option+F12 在当前 JavaScript 选项卡中仅查看定义。

文档查找

Sencha Visual Studio Code 插件还允许用户打开与正在编辑的代码相关的 Sencha API 文档。它支持 Ext JS 类名、xtype 和其他类型别名的文档查找。您还可以查找方法、属性、配置键、事件等。

在项目内编辑 JavaScript 文件时，将光标移动到适当的元素，然后按 F1 键。相应的 Sencha API 文档将在新的外部浏览器窗口中打开。

如果找不到相关的 API 文档，它将默认为应用程序中找到的 SDK 版本的 API 文档根目录（例如 https://ext.js.cn/extjs/6.2.0）。

代码生成

注意：代码创建需要安装 Sencha Cmd。

新应用程序

GUI 生成

在 VS Code 的资源管理器中右键单击并选择“新建 Ext JS 应用程序”。

现在，按照向导中的步骤创建 Ext JS 应用程序。

VS 命令面板

在 VS Code 中调出命令菜单（Cmd+Shift+P），开始键入“新建”，然后选择“新建 Ext JS 应用程序”，然后按照向导中的步骤创建 Ext JS 应用程序。

代码片段

Sencha VS Code 插件可帮助您创建新类、视图、视图模型、视图控制器、模型、控制器和存储。

在任何 .js 文件中键入 extjs_ 以在 IntelliSense 菜单中调出 Ext JS 代码片段列表。

修改代码片段

您可以使用 VS Code 轻松修改或添加代码片段。只需打开命令面板并选择“编辑 Ext JS 代码片段”。这将调出一个用户代码片段文件，您可以对其进行修改。
这还将打开默认 Ext JS 代码片段文件以供比较。要调整代码片段，只需将其从默认值复制到用户代码片段中。例如，您的用户代码片段可能如下所示

{
    "Ext JS Class": {
        "prefix": "extjs_class",
        "body": [
            "Ext.define('{classname}', {\n",
            " \n",
            "});"
        ],
        "description": "Nitro Burning Funny Cars"
    },
}

只要初始键（本例中为“Ext JS 类”）与 Ext JS 代码片段文件中的键匹配，用户条目将覆盖默认值。

变量

您还可以在自定义中使用 4 个变量。

• {classname} - 包括命名空间的完全限定类名。

• {xtype} / {alias} - 类名的低级形式。

• {aliasPrefix} - 根命名空间的低级形式。

与 Sencha Cmd Build 和 Watch 集成

注意：使用 Cmd 的 Build 和 Watch 功能需要安装 Sencha Cmd。

Sencha VS Code 插件监视应用程序源代码的更改，然后在检测到更改时重新构建输出。基于 Sencha Cmd 的 Web 服务器启动，然后托管该应用程序。这使您能够在编译错误发生时看到它们。

右键单击任何 Ext JS 应用程序文件并调出 VS Code 上下文菜单，然后选择“运行 sencha 应用程序监视”

您现在将在控制台视图中看到 Sencha Cmd 的输出，并且您的应用程序将在此处提供：http://localhost:port

调试 Ext JS 应用程序

除了 Sencha 的 VS Code 扩展之外，还有许多其他 VS Code 扩展可以帮助您加速 Ext JS 开发。要调试在 Chrome 浏览器中运行的应用程序，您应该搜索并安装 Microsoft 的“JavaScript 调试器”扩展。

要有效地启动和调试 Ext JS 应用程序，首先确认应用程序正在浏览器上运行。一旦应用程序正在运行，请继续在 Visual Studio Code 中从活动栏中打开运行和调试。单击以自定义运行和调试 创建 launch.json 文件 以自动生成调试所需的基本配置。

在生成的 launch.json 文件中，找到 Chrome 配置并确保使用正在运行的 Ext JS 应用程序的实际 URL 更新 URL 字段。此步骤对于在调试器和 Chrome 浏览器之间建立连接至关重要。

"configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
}]

配置启动设置后，在您打算在调试期间暂停执行以进行更仔细检查的代码中策略性地放置断点。这使您可以专注于 Ext JS 代码的特定部分。

在所有设置完成后，通过按 F5 或使用 Visual Studio Code 中的运行和调试侧边栏启动调试过程。这种综合方法确保了 Ext JS 应用程序开发的平稳高效的调试体验。

编辑 Ext JS IntelliSense 配置

如果您的应用程序是使用 Sencha Cmd 创建的，或遵循 Sencha Cmd 应用程序结构，则该插件将自动索引 Ext JS 框架和应用程序中的所有源代码。要包含其他目录或排除项目中的目录，请右键单击项目树并选择“编辑 Ext JS IntelliSense 配置”。

这将在新编辑器选项卡中打开 .sencha/ide/config.json。

注意：Windows 上的路径应使用“\”（转义反斜杠）作为目录分隔符，而不是 Mac OS 和 Linux 上的“/”。当您保存对配置文件的更改时，该插件将自动重新索引项目源代码。

/*
 * By default the Sencha Ext JS plugin indexes all JavaScript files in your project.  Use this file to
 * index additional directories outside of your project, exclude directories within the project from indexing, and
 * configure apps that were not created using Sencha Cmd.
 *
 * Both relative and explicit paths are supported.  Relative paths are relative to the project's root directory.
 *
 * For example, if your project looks like...
 *
 *  (project root)
 *    .sencha
 *      ide
 *        config.json  <= this file
 *    assets
 *      build
 *        all.js
 *
 * ...you can exclude the build directory from indexing using:
 *
 *  "exclude": [
 *    "assets/build"
 *  ]
 */
{
    // List directories outside of the project root which should be included when indexing.  Paths may be relative
    // to the project root or absolute.
    /*
    "include": [
        "path/to/dir/to/index"
    ],
    */

    // List directories inside the project root which should be excluded from indexing.  Paths may be relative
    // to the project root or absolute.
    /*
    "exclude": [
        "path/to/dir/to/exclude"
    ],
    */

    // List apps within the project root or included directories that were not built with Sencha Cmd.
    // This is only required for apps that were not built with Sencha Cmd.  This lets the plugin know the correct root
    // namespace, sdk version, and toolkit (only applies to Ext 6 apps) for apps that do not follow the standard Sencha
    // structure.
    /*
    "apps": [
        {
            "name": "AppRootNamespace",
            "path": "path/to/app",
            "toolkit": "classic | modern",
            "sdk": {
                 "path": "path/to/sdk",
                 "version": "sdk version",
                 "framework": "extjs | touch"
            }
        }
    ]
    */
}

Linux

包括 Ubuntu 在内的一些 Linux 发行版限制了打开的文件句柄数。如果超过该限制，Ext JS 插件将无法提供 IntelliSense。该插件应检测到此问题并显示以下说明，描述如何增加限制。

需要其他配置

Visual Studio Code 已达到操作系统允许的最大打开文件句柄数。可以通过编辑 /etc/sysctl.conf 并将此行添加到文件末尾来将限制增加到最大值

fs.inotify.max_user_watches=524288

然后可以通过运行加载新值

sudo sysctl -p

完成后，请重新启动 Visual Studio Code。

单个命令

所有上述操作都可以在单个命令中完成

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

有关更多信息，请参阅

https://vscode.js.cn/docs/setup/linux#_error-enospc

发行说明和计划

VS Code 插件 1.0.5

• VSCP-80 - 修复了软件包创建问题
• VSCP-106 - Sencha Visual Studio 代码插件支持最新的 IDE 版本 1.84、1.85 和 1.86

VS Code 插件 1.0.4

• VSCP-103 ExtJS 插件与 Visual Studio 代码的最新版本 (1.78.2) 冲突

VS Code 插件 1.0.2

• 支持 VS Code v1.36+
• 支持新的开放工具

VS Code 插件 1.0.1

• 添加了“Ext JS：重新索引项目以进行 IntelliSense”命令

• 将构建大小减少了 60%

• VSCP-71 - 在某些情况下无法请求脱机许可证

• VSCP-65 - 无法在工作区之外生成项目

• VSCP-64 - Ext JS SDK 在某些情况下不会自动编入索引

• VSCP-63 - 许可证文件中构建号不一致

• VSCP-62 - 除非打开文件夹，否则无法请求离线许可证。

• VSCP-60 - Sencha 应用监视在失败时不显示行号

• VSCP-47 - 如果没有打开文件，则从命令面板运行“sencha app watch”会静默失败。

• VSCP-35 - 如果项目位于网络驱动器上，则插件无法工作

支持和反馈

使用 Visual Studio Code 插件论坛 提问、报告问题和提供反馈

总结

从初学者到专家，Visual Studio Code 插件为 Sencha 开发人员提供沉浸式体验。它在简化代码导航、类创建和自文档化的同时提供最佳实践符号。