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...
Related
What I would like is to write something like this:
/**
* Takes a foo and {#link grokelates} it.
*/
function doSomething(foo) {
}
And have "grokelates" be a link to more detail on what "grokelate" means, but because I'm going to have functions dealing with grokelation all over my code base, I'd like to write that definition once and link to it in multiple places.
Is this possible?
To be clear, grokelates is not a function. It's just a word I want to define, but not have to define in-line everywhere I use it. I basically want to write a glossary file and be able to link to definitions from that glossary in my JSDoc.
Ideally this would also be in a way the VS Code picks it up and lets someone navigate to that definition on hover.
Yes there is. When you run jsdoc to generate your documentation, you can pass it any filetype you wish. A standard practice is to create one or more *.jsdoc files which contain doclet comments (those that begin with /**) to describe features you expect to use elsewhere in your code. For instance:
// filename: grokelation.jsdoc
/**
* #module grokelates
*/
/**
* #name Grokelate
* #memberof module:grokelates
* #description
* Here is the description of the grokelation process.
*
* #example
* var g = new Grokelate(opts);
*/
Then, when you wish to reference this new object elsewhere in your documentation, simply use its long name module:grokelates~Grokelate where you can consider the ~ glyph to mean "member of".
In your example above, you'd say {#link module:grokelates~Grokelate}.
I'm using Visual Studio Code to develop in PHP, and I've been having some trouble getting Code to provide the proper intellisense results. For example, this newly created Codeception unit test:
<?php
class MyTest extends \Codeception\Test\Unit
{
/**
* #var \UnitTester
*/
protected $tester;
protected function _before()
{
}
protected function _after()
{
}
// tests
public function testSomeFeature()
{
$this->assertFalse(false);
}
}
When I type $this-> I expect to see assertFalse, assertTrue, and all the other methods provided by \Codeception\Test\Unit. But what I get is basically whatever items exist within the current file and that's it.
What can I do to get all the methods from the Unit class to show up? I already have the PHP IntelliSense extension installed, v2.3.4.
Visual Studio Code core does not include advanced PHP features, just syntax highlighting, simple code completion and code linting provided by the PHP binary as long as you have it installed. In short, the features you can configure with these directives:
// Controls whether the built-in PHP language suggestions are enabled. The support suggests PHP globals and variables.
"php.suggest.basic": true,
// Enable/disable built-in PHP validation.
"php.validate.enable": true,
// Points to the PHP executable.
"php.validate.executablePath": null,
// Whether the linter is run on save or on type.
"php.validate.run": "onSave"
For anything else you need to install a third-party extension.
My personal choice is PHP Intelephense. In particular, it supports docblock annotations, including magic properties:
/**
* #property string $foo
*/
class Bar
{
}
... and inline types:
/** #var \Database $db */
$db->connect();
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.
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)
},[])
I'm trying to document a Javascript file with JSDoc(3) like so:
/** 1 if gnome-bluetooth is available, 0 otherwise
* #type {boolean}
* #const
*/
const HAVE_BLUETOOTH = #HAVE_BLUETOOTH#;
Now the file (called config.js.in) is not on its own valid Javascript; the file gets run through a Makefile which substitutes an appropriate value for #HAVE_BLUETOOTH#.
When I try to run JSdoc on this, it (understandably) balks because of the syntax error in the file.
Is there some way to tell JSDoc to ignore all code in this file but simply take into account the annotations? (I might have to add #name tags to each doclet to completely separate the documentation from the code; that's fine).
Something like:
/** 1 if gnome-bluetooth is available, 0 otherwise
* #name HAVE_BLUETOOTH
* #type {boolean}
* #const
*/
/** #ignore */ // somehow ignore from here onwards
const HAVE_BLUETOOTH = #HAVE_BLUETOOTH#;
/** !#ignore */ // somehow don't ignore from here onwards (although I'd be happy
// to ignore the entire file)
I'd prefer not to modify the code part of the file, if possible (I'm adding documentation to an existing project). For example, I could probably get around it with
const HAVE_BLUETOOTH = parseInt('#HAVE_BLUETOOTH#', 10);
which would make the file have valid JS syntax again so that the parser doesn't complain, but this also means I'm modifying the code of the original file which I want to avoid (I prefer to just add documentation).
cheers
My case is similar because I use JSDoc to comment my .less and .css file. When I running JSDoc on set of file, I have the same issue.
So, I resolve my problem (with JSDoc 3.3.3) with the commentsOnly JSDoc plugin
https://github.com/jsdoc3/jsdoc/blob/master/plugins/commentsOnly.js
I have create this config.json:
{
"source": {
"includePattern": ".+\\.(css|less)?$"
},
"plugins": [
"plugin/commentsOnly"
]
}
with the commentsOnly.js file into a plugin/ directory (consider plugin/ and config.json are in same folder) and in this folder I execute the following CLI command:
jsdoc -c ./config.json ./assets/stylesheets/common.less
And it's work ! There are no reason this do not work with your files.
Hope I help you ;)