Visual Studio Code JavaScript IntelliSense with JSDoc

If you are having difficulty adding custom documentation to your JavaScript files in Visual Studio code the best solution is through the use of JSDoc. Unfortunately, there are a couple of changes that need to take place before the IntelliSense will begin to show up. When I first started to write comments in Visual Studio code I was using the existing format used for C# programming. These comments look like:

<summary>Description</summary>
<returns>Return info</returns>

Instead you can use jSDoc which has the following syntax sugar:

/**
* Description of your class, function, etc
* @param {type} param - description
* @param {type} param2 - description 2
* @returns {type} obj - description
*/ 

In my opinion, I like this format better than the use of XML comments because of each @tag is color decorated which stands out and helps with readability. The caveat of using this syntax is that you have to abandon your use of the require keyword but instead need to use import and export keywords such as familiar with Typescript.

Old Syntax: module.exports={} exports.funcName... and const funcName = require ('jsfile');
New Syntax: export class{...} or export {funcName} and import * as funcName from 'jsFile'

import is recognized as an ES6 feature which node will know nothing about. We will need to convert this syntax into the”require” keyword by installing Babel. Below are the following new packages that you should install to your dev dependencies. As a note, anything that is not required in order for the app to run should be in your dev dependencies.

  1. babel-cli
  2. babel-preset-es2015
  3. optional: watch

You will then need to add the es2015 present to a .babelrc file. Then you can set up a new script in package.json that will watch for any changes that happen and then use babel to recompile those modified files.

//.babelrc
{
     "presets": ["babel-preset-es2015"]
}

//package.json
"scripts": {
    "dev": "watch 'npm run build' src", //optional with watch
    "build": "babel src -d build"
}

Leave a Reply

Your email address will not be published. Required fields are marked *