Kendo UI Productivity Tools for Visual Studio Code
The Kendo UI Productivity Tools for Visual Studio Code is an extension for Visual Studio Code that enhances the application development experience with Kendo UI for jQuery.
As its primary advantage, the VS Code extension facilitates the creation of projects through a wizard directly in Visual Studio Code.
1. Get the Extension
You can get the extension in either of the following ways:
- Go to the Visual Studio Marketplace.
- In VS Code, open the Extensions tab, search for Kendo UI Productivity Tools, and click Install.
2. Create the Kendo UI Project
To create a Kendo UI for jQuery project:
- Press
Ctrl
+Shift
+P
(for Windows or Linux), orCmd
+Shift
+P
(on Mac) to open the VSCode extension launcher. -
Type/Select
Kendo UI Template Wizard: Launch
and pressEnter
to launch the extension. -
Enter a project name and select the location.
-
Choose the desired template.
The Kendo UI Template Wizard for Visual Studio Code comes with several built-in templates for some of the most popular components like Grid, Chart, and Form. These templates allow you to add pages by using the components with a single click.
Additionally, you can create a Blank project and the extensions will generate a page with all of the necessary stylesheets and a single heading element.
-
Apply the desired styling by selecting a theme.
To style your application, select one of the built-in Sass-based themes: Default, Bootstrap, or Material.
Click the Create button to finish the setup.
-
Run the project:
- Install the NPM dependencies by typing
npm install
in the terminal. - Run the application by typing
npm start
in the terminal.
- Install the NPM dependencies by typing
3. Check the Project Structure
- The HTML files are located in the
pages
folder of the project. - The script files are located in the
src
folder of the project. - The stylesheets are included in the head element of each individual page.
The scripts are automatically injected into the HTML pages only if the script name matches the page name. For example, if the page is called
MyPage.html
, then the script file in thesrc
folder must be calledMyPage.js
.
4. Generate the Snippets
The Kendo UI Productivity Tools for Visual Studio Code extension can generate code snippets with sample configuration for the Kendo UI components. To add a code snippet for a Kendo UI component:
- Open a
js
file or add a<script>
tag. - Type
kj-short
. Alternatively, typekj-component
—where you replace "component" with the name of the desired component, for example,kj-dropdownlist
.