VS Code is an amazing text editor but I am facing some issues.
ISSUE
VS Code not showing IntelliSense for basic javascript functions like myVariable.toLowerCase();
Please let me know if there is any solution for this.
Thanks VS Code team for making development beautiful!
I'm on the VSCode team.
We cannot infer the types of JavaScript variables like categoryName in many cases, so we cannot know that toLowerCase is a valid method on categoryName. There are a few ways to fix this:
Use jsdoc to specify the argument type:
/**
* #param {string} categoryName
*/
function foo(categoryName){
// `string` member completions avalible here
}
Add a guard to the function:
function foo(categoryName){
if (typeof categoryName !== 'string')
return
// `string` member completions available here
}
Use TypeScript or Flow types
function foo(categoryName: string){
// `string` member completions available here
}
Hope that helps.
Related
I am working on a VsCode extension in that I want to provide custom snippets for code completion.
I know about the option of using snippet json files directly, however those have the limitation of not being able to utilize the CompletionItemKind property that determines the icon next to the completion suggestion in the pop-up.
My issue:
If I implement a simple CompletionItemProvider like this:
context.subscriptions.push(
vscode.languages.registerCompletionItemProvider(
{scheme:"file",language:"MyLang"},
{
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) {
let item = new vscode.CompletionItem('test');
item.documentation = 'my test function';
item.kind = vscode.CompletionItemKind.Function;
return [item];
}
}
)
)
then the original VsCode IntelliSense text suggestions are not shown anymore, only my own. Should I just return a kind of an empty response, like
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) {
return [null|[]|undefined];
}
the suggestions appear again as they should. It seems to me that instead of merging the results of the built-in IntelliSense and my own provider, the built-in ones get simply overridden.
Question:
How can I keep the built-in IntelliSense suggestions while applying my own CompletionItems?
VsCode Version: v1.68.1 Ubuntu
I seem to have found the answer for my problem, so I will answer my question.
Multiple providers can be registered for a language. In that case providers are sorted
by their {#link languages.match score} and groups of equal score are sequentially asked for
completion items. The process stops when one or many providers of a group return a
result.
My provider seems to provide results that are just higher scored than those of IntelliSense.
Since I didn't provide any trigger characters, my CompletionItems were comteping directly with the words found by the built-in system by every single pressed key and won.My solution is to simply parse and register the words in my TextDocument myself and extend my provider results by them. I could probably just as well create and register a new CompletionItemProvider for them if I wanted to, however I decided to have a different structure for my project.
Consider the following example of 3 javascript files:
/** myclass.js **/
import jQuery from 'jQuery';
class MyClass {
constructor() {
this.property = null;
jQuery('#test').data('myClass', this);
}
testMethod() {
return null;
}
}
export default MyClass;
/** file.js **/
import MyClass from './myclass.js';
new MyClass();
export default null;
/** index.js **/
import './file.js';
import jQuery from 'jQuery';
let myValue = jQuery('#test').data('myClass');
What I would like to achieve, is to get property and method auto suggestion from my IDE on the myValue variable. I know (I mean I presume) that automatically, there is no way for the IDE to know what I stored in the data variable of jQuery, but what kind of type hint should I provide before myValue to tell the IDE, that it should be an instance of MyClass?
If in index.js I also import myclass.js with the definition of the class, I was able to achieve my result, by type hinting before the variable with the following jsdoc comment:
/** #type {MyClass} */
But this line only works if I also imported the definition in the current scope. Is there any way to either:
achieve suggestions automatically, without manually type hinting?
or if that is not possible, type hint, without manually importing the definition beforehand?
I am using Visual Studio Code v1.46.1 and I have the ESLint v2.1.5 extension installed on it.
EDIT: After trying to create a jsconfig.json file in my root folder, with the following options:
{
"exclude": ["node_modules"]
}
and modifying my index.js by adding this jsdoc comment, I am still getting no autosuggestions by VSCode:
/** #type {MyClass} */
I've tried adding the above comment both above, and below the line, where I fetch the data from the jQuery element.
EDIT 2:
Okay, basically, it looks like that my IntelliSense "breaks" when I am trying to export something from a file. Could this be a VSCode issue?
Is there a way how to use loops or conditionals when creating snippets in VS Code? I am trying to create a snippet that will generate a template for JSDoc documentation syntax for a function. Example (I am using coffeescript):
myFunction: (param1, param2): ->
# some code
return
And I would like a snippet that generates:
###*
* #param {} param1
* #param {} param2
* #return {}
###
myFunction: (param1, param2): ->
# some code
return
I am able to create a snippet, that will simply generate:
###*
* #return {}
###
using this snippet settings:
"JSDocs Template": {
"prefix": "jsdoc",
"body": [
"###*",
" * #return {}",
"###"
],
"description": "create template for JSDocs"
}
But to achieve want I need, I would have to use a loop to go through the param list and that is where I struggle...
I am not sure is that possible using snippets. You can achieve this by writing your own extension using VS Code API.
But you can use this extension
https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments
to achieve what you trying to achieve in your example.
Update:
You have to modify this extension script a little bit.
Go to C:\Users\%UserProfile%.vscode\extensions\stevencl.adddoccomments-0.0.8\out\
Add this additional logic in the 'extension.js' file.
Right now it only works for the ts and js file. Just added the coffeescript language type.
And it works!!!
Mark it right ans if you agree.
So after some research I found out that such a behaviour is not possible with snippets only, therefore I have create my own extension CoffeeScript JSDoc. Feel free to use it and extend it if necessary...
I am looking at some code where some of the variables are really obscure. For example,
h582=30
where h582 might mean temperature. I have a dictionary that tells me what each variable means. Is there any existing feature or would it be possible to extend visual studio code easily to show me the meaning of each variable on mouse hover?
I would recommend using find/replace on the workspace to rewrite the variables to their readable names (I would go crazy trying to read code like that).
But if you can't do that and want to see the real name when you hover the variable, you could write a vscode extension for this. It would not be too hard - you just need to implement a hover provider which would check the name of the token under the cursor, look it up in the dictionary, and return the result. Example:
vscode.languages.registerHoverProvider('javascript', {
provideHover(document, position, token) {
const hoveredWord = document.getText(document.getWordRangeAtPosition(position));
const mappedWord = dictionary[hoveredWord]
if (mappedWord) {
return new Hover(mappedWord);
} else {
return null;
}
}
});
See the docs here: https://code.visualstudio.com/docs/extensionAPI/vscode-api#_languages
is there a way to get intellisense for the HTML5 canvas element? In VS Code 0.7.10 when I write in my JS code this:
context = document.getElementById(canvasId).getContext('2d');
then when I write
context.
I do not have any intellisense help for my context.
Thanks.
VS Code can support it!
Just tell VS Code what type is the context. Adding the following code on your variable then the VS Code will know what it is. Sorry that I don't have enough point to post the image. Just click the solution to see how it works.
/** #type {CanvasRenderingContext2D} */
solution
That's currently not supported by VS Code and it is hard to fix. Because JavaScript lacks type annotations, VS Code tries to flow types as good as possible. In your example document.getElementById breaks this flow because from the spec it can return any html element (and we have no further knowledge of the html structure or the value of canvasId).
Something like this, would be more favourable to VS Code:
var canvas = document.createElement('canvas');
canvas.|
Alternative, you could look into using TypeScript because there you use type annotations and type casting.
I use the "type cast":
var canvas = /** #type {HTMLCanvasElement} */ (document.querySelector('#canvas'))
and then enjoy basic Intellisense:
You have to re-declare #type variable and assign ctx to get the intellisense working again when you pass ctx as argument in another function. this worked for me in react :
const drawGame=(ctx)=>{
/** #type {CanvasRenderingContext2D} */
var dgCtx = ctx
dgCtx.fillStyle = "#79d70e"
dgCtx.fillRect(0,0,gs.width, gs.height)
}
useEffect(()=>{
const canvas = canvasRef.current
/** #type {CanvasRenderingContext2D} */
const ctx = canvas.getContext("2d")
drawGame(ctx)
},[])