Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML KnockoutJS intellisense in Visual Studio Code

Using Visual Studio Code I want to enable HTML KnockoutJS intellisense, based on a binding. There's a snag as I use TypeScript (TS) and bind the model in code:

ko.applyBindings(myViewModel);

All TS files are generated and rendered into app.js

I want a similar functionality found here. https://johnpapa.net/knockout-intellisense-in-visual-studio-2012/

example intellisense functionality

NB: I'm using debug version of KnockoutJS

<script src="libraries/knockout-3.4.1.debug.js" type="text/javascript"></script>
like image 511
wonea Avatar asked Jan 13 '17 14:01

wonea


People also ask

How do I enable IntelliSense in Visual Studio code?

You can trigger IntelliSense in any editor window by typing Ctrl+Space or by typing a trigger character (such as the dot character (.) in JavaScript).

How do I enable autocomplete in Visual Studio?

The suggestion list of Automatic completion appears as soon as you start typing a new identifier. The suggestion list of Basic completion appears when you press the default Visual Studio IntelliSense shortcut Ctrl+Space . If necessary, you can always return to the Visual Studio's native's IntelliSense.


1 Answers

EDIT


Just noticed one thing after writing the answer, you are applying binding correctly but after that missing object name before function name, here what is difference here:

For Example,

Adding binding:

ko.applyBindings(seViewModel, document.getElementById("Div"));

Using binding :

<div data-bind="foreach: ko.utils.arrayFilter(seViewModel.ImplementationModels(), function(item) {return item.ModelType()==globalMessages.IN_A_DAY})">
                                                                        <label class="checkbox-inline">
                                                                            <input type="radio" group="implementationModelGroup" class="implementationModelCheck" data-bind="value: ImplementationModelId, click: seViewModel.ImplementationModelCheckBoxClick.bind($data), checked:seViewModel.ImplementationModelCheckedValue()" />
                                                                            <span class="subData text-break" data-bind="text: ImplementationModelName"></span>
                                                                        </label>
                                                                    </div>

Here if I don't use viewmodel name seViewModel autocomplete doesn't work


Not sure about why it is not working for you, I opened an old project in VS code & it was already working. It is not only giving autocomplete for KO object but also for my viewmodel & controller action methods in C# class, I am adding a screenshot for reference enter image description here

I am adding my current project setting & vs extensions, it might help you.

VS CODE Details :

Version: 1.26.1
Commit: 493869ee8e8a846b0855873886fc79d480d342de
Date: 2018-08-16T18:38:57.434Z
Electron: 2.0.5
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64

Extensions :

enter image description here

Which KO files I have added:

 <Content Include="Scripts\libs\knockout-3.4.0.js" />
 <Content Include="Scripts\libs\knockout.mapping-latest.js" />
 <Content Include="Scripts\libs\knockout.validation.min.js" />

It is ASP.NET MVC project, KO is used for model-attribute binding.

like image 143
Pranav Singh Avatar answered Sep 30 '22 20:09

Pranav Singh