Productivity Tools Extension for VS Code

The Kendo UI Productivity Tools extension for Visual Studio (VS) Code enhances the experience of developing web applications with KendoReact components.

The extension facilitates the creation of new projects by providing a powerful template wizard. It also allows you to add KendoReact components to an existing project with a few clicks and, at that, directly in the source code through snippets which automatically handle the code generation process.

Installation

You can install the Kendo UI Productivity Tools extension for Visual Studio Code through:

  • The Visual Studio Marketplace.

  • The Extensions tab in Visual Studio Code:

    1. Search for Kendo UI Productivity Tools.
    2. Select the extension from the results list.
    3. Click the Install button.

VSCode-Extensions-Search

Key Features

The Kendo UI Productivity Tools extension provides a number of handy and developer-friendly tools that facilitate the project creation and integration of the KendoReact components. The KendoReact team constantly invests efforts to further enhance the existing functionalities and develop new features.

Project Wizard

The Kendo UI Productivity Tools extension eases the development efforts by providing an interface for creating new projects that are pre-configured for KendoReact components. The Template Wizard provides a blank project template, which you can enhance by adding more pages with Grids, Charts, Forms, and others. You can easily configure the styling for your application by choosing between the Default, Bootstrap, and Material themes. The result is a ready-to-run application with all required configurations and dependencies. For more information, see the article about the KendoReact Template Wizard.

Code Snippets

The Kendo UI Productivity Tools extension provides rich support for KendoReact component snippets, such as Grid, Inputs, Layouts, Chart, and so on. These snippets facilitate the development process by providing a quick way for adding the components with predefined tab stops for additional configuration of their properties. For more information, see the article about KendoReact code snippets.