I'm using Visual Studio 2012 and building a JavaScript Windows Store App.
For the most part, intellisense works, but for some things it does not. I'm just wondering why. Here are a few examples:
var ctl=document.getElementById("txtName").winControl;
Although other items show up, the "winControl" item does not appear in intellisense, yet it still works. The same goes for "srcElement" in this line:
var nameInput = eventInfo.srcElement;
Is this to be expected or am I missing something?
As you go deeper into JavaScript, unlike strongly-typed languages, it becomes more difficult to figure out what these values are going to be, unless the JavaScript code is written inside of an HTML page, which the editor can run through in real-time.
var myFunc = function (evt) { console.log(evt); }
window.onclick = myFunc;
myFunc("Bob");
What is an IDE supposed to make of that, and what properties should evt have?
If JavaScript were strongly-typed, and that function could only accept Event objects, or ClickEvent objects, then the IDE could know exactly what properties to expect.
Just like .getElementById -- if one page has "myEl" as <a> and another page has the same ID as <canvas> then what should the properties be?
Norguard is right about the difficulties in providing suggestions for a dynamic language like JS. To help in situations like this, you can provide hints to the Visual Studio JavaScript editor using documentation comments. For example, I can use the following code:
/// <var type="WinJS.UI.ListView"/>
var listView = document.querySelector("#listView").winControl;
and the /// comment will associate the WinJS.UI.ListView type with my listView variable. Typing listView. will then show a completion list with suggestions for the ListView.
Jordan, Microsoft Visual Studio PM
Related
Pic1
Pic2
Pic3
Hi, I'am new at js. I'am using VSCode. My problem is suggestions. I dont know it's true name maybe not suggestions maybe it's intellisense but When I pick an element with DOM and want to change it's style component, I wrote element.style but there aren't any suggestions showing up you can see in first two pics. But if I write element.style. there are some suggestion showing up. While on chrome dev console if I write elemnt.style
pic4
It shows me the style component. So how can I active it suggestions on visual studio code , like google console? I have some extensions is that cause problems?
extensions
VSCode is using static code analysis to try and guess what the types of your variables are. It has to do this because JavaScript is dynamically typed, so there is no way to be certain of the type of any given variable while you're writing the code. The JavaScript plugin for VSCode uses various heuristics to try and prove useful feedback.
Chrome actually evaluates the expressions you're typing as you type them, against a real DOM and JS runtime, and provides accurate feedback by reflecting on the value of each expression.
You can't make VSCode's static analysis behave like Chrome's dynamic reflection. They are very different systems, and this is a fundamental limitation of code-completion/intellisense for dynamic languages.
I'm learning Javascript and up until now when I wanted to change anything in the DOM, I was using Google Chrome devtools to do that. Now I'm moving to write my code inside the JavaScript file, that accompanies the webpage, in Atom but the problem is the extremely useful autocomplete features of Chrome devtools is not available in Atom. For example when I type this code:
document.addEventListener('click', function(){
const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'red';
})
Chrome devtools is intelligent enough to suggest backgroundColor with a capital C to prevent any typing errors but the same thing doesn't happen in Atom. In fact Atom does not have any suggestions at all. I have tried installing different JavaScript plugins such as atom-ternjs or autocomplete-javascript, to name a few but none is working when you want to write the code to manipulate the DOM. Any suggestions to solve this is greatly appreciated.
Here's a quick solution using Atom Ternjs.
Navigate to the menu bar and click Packages-> Atom Ternjs -> Configure Project.
Here, select the browser option under libs
Then, just scroll down and click on Save and Restart Server.
I hope this helps.
I'm using TabNine extension now and I'm satisfied with the performance. It uses deep learning to learn and predict the variables and lines of code you might want to write based on those variables and the more lines you write in a particular project the better it gets at giving the suggestions.
I've been trying to think of a better way to title this question, but unfortunately I have no idea how to explain it. Also I haven't found this on stack overflow (for the same reason stated above).
In Eclipse, I used to Ctrl+Click in the name of a method call (in java). And my cursor would jump in to the definition of my method function.
Question 1: Does anyone know the name of this behavior? I mean, maybe it's called function jumping or something like that.
Also I was searching for a plugin like this in Atom editor. Because I've tried to use this a lot of times (bad habits) and didn't work.
Question 2: Name of the plugin to do this in Atom?
Don't know if it helps, but I'm coding in JavaScript at the moment in Atom editor.
As the other answer noted, alt-click over a method/function name can jump you directly to where it was originally defined. It works within the same file, but it doesn't seem to work across files.
The closest Atom editor package I've found for javascript which allows you to jump to function/method definitions across files is called TernJS.
Once installed, you can use ctrl-shift-r over the word (function/method, variable etc) to bring up a list of where that method/function is defined (includes line # & filepath). You can then click on the list item & it will jump you to the definition.
Here is a video I made containing an example of using this atom package.
http://www.youtube.com/watch?v=cFAzqvYoHJs&t=11m58s
To answer your first question this 'behavior' is knows as 'go to definition', or 'jump to definition'.
To answer your second question some packages you could perhaps take a look at would be,
'goto-definition'
'code-peek'
I find these help a bit but still don't achieve the standards that I would fully like. I wanted something similar to the Intellij IDEA ctrl + click.
I find myself using the ctrl + shift + f to search the entire project for the related files of the thing I'm searching for. Then I find the particular file i'm looking for and shazam! I've got what I came to get. This particular method works best for me.
I know its not exactly what your looking for but this is the best thing I've found so far to achieve something similar to what we both seem to be looking for. Hope this helps a bit,
happy coding...
Currently this behavior is blocked by multiple cursors feature.
The closest you can get is "ctrl-alt-shift-d" + atom-ternjs
try atom/navigate
Link to Atom Navigate
It helps you to do this excact thing.
The only thing is that it's default key is f2 instead of cltr+click
But this is also editable in the package settings in de .atom file
I don't think I have a package for that.
Simply ctrl-D goes to definition for me.
Tried by luck after reading here other methods.
Cheers.
In Atom (1.57.0 version, os Ubuntu 18.04) command ctrl+shift+f is doing project-find:show. (try cmd+shift+f if on mac and the above does not work)
First select a function name in a file within a project, click ctrl+shift+f, and a list of files from your project folder, that also have this function (either defined, or used) should appear.
Click on any of these files, to come back to the list use ctrl+tab. I can see in key-bindings that this command project-find:show, is bound to ctrl+shift+f, and I have used it, but I am not sure if this is from one of the packages, or not. (sorry new to atom)
I was designing a webpage and encountered the following code written in javascript I want to know if it's ok if i remove this code and add my own code or does it create any problems Note: This was an code found in an HTML5 Template
Here is the code:
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
}
This code selects all HTML elements that have a CSS class of js-switch applied and creates a new Switchery object for each of them. Since you didn't provide much context I have to guess but it's very likely that this will turn standard HTML checkboxes into iOS-style switches.
See also the Switchery homepage for more information: http://abpetkov.github.io/switchery/
Whether this code is needed or not might be a design decision. It'll only change the visual appearance but the sliders still behave like checkboxes. It might, however, be worth checking whether your site actually contains any HTML checkboxes with the js-switch class applied. If not, that code can definitely be dropped.
When i'm in Netbeans 8.0, developing JavaScript and i'm on a line of code like this:
var sum = (example / anotherExample)
And i type a dot after that so it becomes this:
var sum = (example / anotherExample).
And press CTRL+Space i get a lists of some code hints with the description of:
JS Platform
Like this:
Whenever I press CTRL+Space for the second time while im on that interface, it gives me the list with all possible code hints for that line of code.
Why is this?
This CTRL+Space is a shortcut key to get hint about all the fields,methods,etc. defined for the attribute which you have used!
Taken from Netbeans Documentations,
When the user clicks Ctrl-Space, or an alternative key combination
defined by the user, our code completion entries should appear. This
is the COMPLETION_QUERY_TYPE. Alternative query types exist, such as
DOCUMENTATION_QUERY_TYPE and TOOLTIP_QUERY_TYPE.
It helps completion of your code in a quick way without needing you to put efforts by typing manually the complete statement!
So,it's a much needed feature in IDE's and is a boon for developers. Also,if you have the documentation installed in your NetBeans Path or embedded in your NetBeans IDE,it will show the complete description of those parameters(fields,methods,etc) in the space.That's an extra plus point.
Happy,CHEERS!