|
1 | | ---- |
2 | | -title: Visual Studio IntelliSense |
3 | | -page_title: Visual Studio IntelliSense | Kendo UI Third-Party Tools |
4 | | -description: "Learn how to reference the Kendo UI Visual Studio IntelliSense by using an additional vsdoc or IntelliSense JavaScript file." |
5 | | -previous_url: /vs-intellisense |
6 | | -slug: visualstudiointellisense_integration_kendoui |
7 | | -position: 6 |
8 | | ---- |
9 | | - |
10 | | -# Visual Studio IntelliSense |
11 | | - |
12 | | -Kendo UI provides Intelligent code completion for Visual Studio by using an additional `vsdoc` JavaScript file. The approach was initially described in Scott Guthrie's blog post [jQuery IntelliSense in VS 2008](http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx). Kendo UI Visual Studio IntelliSense is integrated in Visual Studio 2008 SP1 or later versions and it also works with Visual Web Developer (free). |
13 | | - |
14 | | -## Installation |
15 | | - |
16 | | -Each bundle package contains a `vsdoc` directory, which contains a `vsdoc.js` and `intellisense.js` files. Visual Studio 2008 SP1 or later users should put the `vsdoc.js` file next to the `kendoui` bundle script, while Visual Studio 2012 users should use the `intellisense.js` file. Make sure its naming prefix matches the `kendoui` bundle name. |
17 | | - |
18 | | -- Visual Studio 2008 SP1 |
19 | | - |
20 | | - |
21 | | - |
22 | | -- Visual Studio 2012 |
23 | | - |
24 | | - |
25 | | - |
26 | | -## Features |
27 | | - |
28 | | -### Options for Widget Initialization |
29 | | - |
30 | | - |
31 | | - |
32 | | -### Widget Accessors |
33 | | - |
34 | | - |
35 | | - |
36 | | -### Widget Methods |
37 | | - |
38 | | - |
39 | | - |
40 | | -## Reference |
41 | | - |
42 | | -There are two ways to reference the IntelliSense: |
43 | | - |
44 | | -1. Reference the Kendo UI Visual Studio IntelliSense when the script is directly added to a page as shown above. The `kendo.all-vsdoc.js` and `kendo.all.min.intellisense.js` files are also available on the [Kendo UI CDN]({% slug kendoui_cdn_services_installation %}) in the same folder as the regular JavaScript files. |
45 | | -1. Reference the IntelliSense by using a reference hint from within an external JavaScript file as shown below: |
46 | | - |
47 | | - |
48 | | - |
49 | | -## See Also |
50 | | - |
51 | | -Other articles on Kendo UI integration with third-party tools and frameworks: |
52 | | - |
53 | | -* [SharePoint Add-Ins]({% slug sharepoint_tutorials %}) |
54 | | -* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %}) |
55 | | -* [Angular 2.0]({% slug angular2support_integration_kendoui %}) |
56 | | -* [RequireJS]({% slug requirejs_integration_kendoui %}) |
57 | | -* [TypeScript]({% slug typescript_integration_kendoui %}) |
58 | | -* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) |
59 | | -* [SystemJS Support]({% slug systemjs_integration_kendoui %}) |
60 | | -* [Webpack Support]({% slug webpacksupport_integration_kendoui %}) |
61 | | -* [Aurelia]({% slug aurelia_integration_kendoui %}) |
| 1 | +--- |
| 2 | +title: Visual Studio IntelliSense |
| 3 | +page_title: Visual Studio IntelliSense | Kendo UI Third-Party Tools |
| 4 | +description: "Learn how to reference the Kendo UI Visual Studio IntelliSense by using an additional vsdoc or IntelliSense JavaScript file." |
| 5 | +previous_url: /vs-intellisense |
| 6 | +slug: visualstudiointellisense_integration_kendoui |
| 7 | +position: 6 |
| 8 | +--- |
| 9 | + |
| 10 | +# Visual Studio IntelliSense |
| 11 | + |
| 12 | +Kendo UI provides Intelligent code completion for Visual Studio by using an additional `vsdoc` or `intellisense` JavaScript file. The approach was initially described in Scott Guthrie's blog post [jQuery IntelliSense in VS 2008](http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx). Kendo UI Visual Studio IntelliSense is integrated in Visual Studio 2008 SP1 or later versions and it also works with Visual Web Developer (free). |
| 13 | + |
| 14 | +For versions of Visual Studio prior to Visual Studio 2017, go to the [Installation](#installation) section. |
| 15 | + |
| 16 | +## Visual Studio 2017 |
| 17 | + |
| 18 | +As of Visual Studio 2017, Microsoft use a [new language service for JavaScript Intellisense](https://docs.microsoft.com/en-us/visualstudio/ide/javascript-intellisense?view=vs-2017) that is based on TypeScript. This means that `-vsdoc.js` files are no longer read and supported for JavaScript intellisense and you need to treat it like a strongly typed language in order to get Intellisense for non-standard object types, including custom widgets like the Kendo UI widgets. |
| 19 | + |
| 20 | +You can read more about this service, how it works and what features it supports in the following articles: |
| 21 | + |
| 22 | +* [Microsoft/TypeScript GitHub repo wiki: JavaScript Language Service in Visual Studio](https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio) |
| 23 | + |
| 24 | +* [Microsoft/TypeScript GitHub repo wiki: JSDoc support in JavaScript](https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript) |
| 25 | + |
| 26 | +With this in mind, you may want to consider writing directly in TypeScript and using the [TypeScript Definitions for Kendo UI]({%slug typescript_integration_kendoui%}). |
| 27 | + |
| 28 | +To get the VSDoc-based IntelliSense, you can try to revert to the old behavior by going to **Tools** > **Options** > **Text Editor** > **JavaScript/TypeScript** > **Language Service** and **uncheck** the checkbox from **Enable the new JavaScript Language service**. Make sure to restart Visual Studio for the changes to take effect. |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +With this, you can use the old JavaScript documentation provided in the `vsdoc` files as shown in the [Installation](#installation) section below. |
| 33 | + |
| 34 | +Alternatively, you can also try using the TypeScript definitions in JavaScript code by utilizing the JSDoc syntax as shown in the [JSDoc Syntax for TypeScript-based Intellisense](#jsdoc-syntax-for-typescript-based-intellisense) section below. |
| 35 | + |
| 36 | +## Installation |
| 37 | + |
| 38 | +Each bundle package contains a `vsdoc` directory, which contains a `vsdoc.js` and `intellisense.js` files for JavaScript. |
| 39 | + |
| 40 | +For Visual Studio 2008 SP1 and Visual Studio 2019, put the `vsdoc.js` file next to the `kendoui` bundle script, |
| 41 | + |
| 42 | +For Visual Studio 2012 and later, put the `intellisense.js` file next to the `kendoui` bundle script. |
| 43 | + |
| 44 | +Make sure the naming prefix of the intellisense file matches the `kendoui` bundle name. |
| 45 | + |
| 46 | +- Visual Studio 2008 SP1 - 2010 |
| 47 | + |
| 48 | +  |
| 49 | + |
| 50 | +- Visual Studio 2012 and later |
| 51 | + |
| 52 | +  |
| 53 | + |
| 54 | +- Visual Studio 2017 |
| 55 | + |
| 56 | + For Visual Studio 2017, you must disable its TypeScript-based Intellisense in order for this to work. See the [Visual Studio 2017](#visual-studio-2017) section. |
| 57 | + |
| 58 | +## Features |
| 59 | + |
| 60 | +### Options for Widget Initialization |
| 61 | + |
| 62 | + |
| 63 | + |
| 64 | +### Widget Accessors |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +### Widget Methods |
| 69 | + |
| 70 | + |
| 71 | + |
| 72 | +## Reference |
| 73 | + |
| 74 | +There are two ways to reference the IntelliSense: |
| 75 | + |
| 76 | +* Reference the Kendo UI Visual Studio IntelliSense when the script is directly added to a page as shown above. The `kendo.all-vsdoc.js` and `kendo.all.min.intellisense.js` files are also available on the [Kendo UI CDN]({% slug kendoui_cdn_services_installation %}) in the same folder as the regular JavaScript files. |
| 77 | +* Reference the IntelliSense by using a reference hint from within an external JavaScript file as shown below. Note that this may no longer work as of Visual Studio 2017. |
| 78 | + |
| 79 | +  |
| 80 | + |
| 81 | +## JSDoc Syntax for TypeScript-based Intellisense |
| 82 | + |
| 83 | +With the TypeScript-based intellisense in Visual Studio 2017, you can try using TypeScript definitions to get intellisense with the default TypeScript-based IntelliSense mode so you don't have to disable the new language service and affect other parts of your workflow. |
| 84 | + |
| 85 | +Note that it may not work as well as the vsdoc-based intellisense and you may have to prune the code before executing it. Nevertheless, here are a few examples: |
| 86 | + |
| 87 | +* adding TypeScript references to a JavaScript code block: |
| 88 | + |
| 89 | +  |
| 90 | + |
| 91 | +* declaring variable types with [JSDoc syntax](https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript) |
| 92 | + |
| 93 | +  |
| 94 | + |
| 95 | +  |
| 96 | + |
| 97 | +## See Also |
| 98 | + |
| 99 | +* [SharePoint Add-Ins]({% slug sharepoint_tutorials %}) |
| 100 | +* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %}) |
| 101 | +* [Angular 2.0]({% slug angular2support_integration_kendoui %}) |
| 102 | +* [RequireJS]({% slug requirejs_integration_kendoui %}) |
| 103 | +* [TypeScript]({% slug typescript_integration_kendoui %}) |
| 104 | +* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) |
| 105 | +* [SystemJS Support]({% slug systemjs_integration_kendoui %}) |
| 106 | +* [Webpack Support]({% slug webpacksupport_integration_kendoui %}) |
| 107 | +* [Aurelia]({% slug aurelia_integration_kendoui %}) |
0 commit comments