VS代码集成

---

立即下载Kendo UI for jQuery

The Kendo UI Productivity Tools for Visual Studio Code 是的扩展，它增强了使用Kendo UI For jQuery的应用程序开发体验。这个扩展可以通过向导直接在Visual Studio Code中创建项目。

Kendo UI生产力工具提供了一个Kendo UI模板向导，通过提供一个界面来创建预先为Kendo UI组件配置的新项目，从而简化了开发工作。模板向导提供了一个空白项目模板，可以通过添加更多带有网格、图表、表单和其他内容的页面来进一步增强该项目模板。该向导允许您通过在Default、Bootstrap和Material主题之间进行选择来为应用程序配置所需的视觉主题。最终的结果是一个具有所有所需配置和依赖项的可运行应用程序。这使您能够立即开始使用Kendo UI组件。

1. 申请延期

您可以通过以下任何一种方式获得扩展：

• 进入Visual Studio市场。
• 在VS Code中，打开Extensions选项卡，搜索Kendo UI Productivity Tools，然后单击Install。

2. 创建Kendo UI项目

使用Kendo UI模板向导创建一个Kendo UI for jQuery项目：

1.按Ctrl+Shift+P (Windows或Linux)，或Cmd+Shift+P (Mac)打开VS Code扩展启动器。

2.输入或选择Kendo UI Template Wizard: Launch并按Enter键启动扩展。

3.输入项目名称并选择位置。

4.选择所需的模板。

Visual Studio Code的Kendo UI模板向导提供了几个内置模板，用于一些最流行的组件，如网格、图表和表单。这些模板允许您通过使用这些组件来添加页面，只需单击一次。

此外，您可以创建一个Blank项目，扩展将生成一个包含所有必要样式表和单个标题元素的页面。

5.通过选择主题应用所需的样式。

要设置应用程序的样式，请选择一个内置的基于：fault、Bootstrap或Material。

6.单击Create按钮完成设置。

7.运行项目：

• 通过在终端输入NPM Install来安装NPM依赖项。
• 通过在终端输入npm start来运行应用程序。

3.检查项目结构

• HTML文件位于项目的pages文件夹中。
• 脚本文件位于项目的src文件夹中。
• 样式表包含在每个单独页面的head元素中。

提示：只有当脚本名称与页面名称匹配时，脚本才会自动注入HTML页面。例如，如果页面名为MyPage.html，那么src文件夹中的脚本文件必须名为MyPage.js。

4. 生成代码片段

Kendo UI生产力工具扩展提供了一个方便的特性，通过Kendo UI库代码片段改进了日常开发，代码片段简化并加快了项目中Kendo UI组件的实现。它们通过提供一种直接在源代码中添加组件的快速方法来帮助开发过程，同时还包括用于所需选项的预定义选项卡。

为一个Kendo UI组件添加一个代码片段：

1.在IDE中打开源代码，然后单击要插入Kendo UI for jQuery组件的位置。

2.要列出Kendo UI for jQuery片段，请键入kj- snippet前缀。

3.继续输入要插入的组件的名称。有些组件由多个代码片段提供，允许您根据所需的配置以各种方式创建它们，例如kj-grid和kj-grid-remote。

4.按Enter键在源代码中插入所需的组件。

5.(可选)如果组件为特定属性提供占位符，您可以通过按Tab键迭代并提供它们。

脚手架工

针对Visual Studio Code的Kendo UI生产力工具扩展包含一个scaffolding特性，它使您能够从交互式向导式用户界面生成复杂的KendoReact组件。

要使用脚手架功能，请按照以下步骤操作：

1.在VS Code资源管理器面板中，右键单击jQuery应用程序中的一个文件夹。

2.从列表中选择一个组件。目前，Data Grid、Chart、Form和Scheduler组件都支持脚手架。

3.单击Create按钮。