Vscode Intellisense NodeJs

Question

In vscode, developers can hover over the methods and properties of variables and objects in our code, and it will show you information about them. Unfortunately, this is lost as soon as we pass the code to the module inside another file (since javascript is statically typed). Can I explicitly enter the parameter passed to the module? Or maybe some kind of source card? An example of where I have a problem:

app.js

var express = require('express') var app = express() var routes = './routes/route.js' 

route.js

 module.exports = function(app) { // Hovering over app doesn't show the intellisense like it does in app.js } 

Update

I continued to search for the answer, but did not find it. This is closest to getting it to work, but for some reason the editor doesn't want to use this type. See below:

route.js

 import Express from 'Express' /** * @param {Express} app */ module.exports = function(app) { // Hovering over app doesn't show the intellisense like it does in app.js } 

Answer 1

The first problem is that VS Code is not able to determine that the app really is of type Express . This is why your second version of route.js makes sense.

The problem with this is that object types are not supported in JSDoc, as VS Code interprets.

VS code internally uses the JavaScript JavaScript service, as shown here . The fact is that the JavaScript service itself is actually TypeScript (see the links to it on the same page).

This answers your question in the following ways:

First, the JSDoc annotations supported by VS Code are the same as those supported by TypeScript . And from the TypeScript documentation this is not supported:

 /** * @param {object} param1 - Listing properties on an object type does not work * @param {string} param1.name */ function fn7(param1) {} 

And so your second attempt did not work.

But this is supported:

 /** @type {{a: string, b: number}} */ var var12; 

So, if you are very adventurous, you can add the most necessary properties in this way. I don’t think it was even worth the effort.

The ultimate alternative would be to actually use TypeScript. This does not have to be of great importance to your code and will give you the necessary type information.

So, I created route.ts , which looks like this:

 import 'node'; import { Express } from 'Express'; module.exports = function(app: Express) { // Your code with IntelliSense goes here } 

This saves type and IntelliSense information and works like a charm. The trade-off is that you need one more build step (which you can transparently handle in your task runner or with tsc --watch ).

Then you get the IntelliSense that you need without being tied to ES6 (TypeScript config uses ES5 by default) and without being forced to use more TypeScript than you want. Everything else from your code can be plain JavaScript if you like it.

Recall that your three alternatives are:

• No IntelliSense.
• Enter annotations that explicitly list the required properties or functions.
• Use TypeScript annotations.

Change I must add that I also set TypeScript type imports for Node and Express. I'm not sure if they are clearly necessary, but you should probably install them if you want to go this route.

Use this:

 npm install @types/node npm install @types/express 

Answer 2

... since javascript is statically typed.

JavaScript is not statically typed. It is dynamically typed.

Can I explicitly enter the parameter passed to the module?

Yes. Use TypeScript . It provides optional static input .

Explanation

In the following screenshot, Intellisense is working. It shows that the app is of type any . This is the best we can do with JavaScript, because JavaScript is dynamically typed. At compile time, the app can indeed be of type any . Dynamic typing means that a type is checked only at runtime.

Answer 3

VS Code has a really useful feature that allows you to use Synthetic Default Imports. It automatically imports typing information from JSDoc or from type definition files.

I linked a blog post that shows how you get the setup and a practical example of its functionality

Answer 4

I think the best solution would be the following:

 function myFunc() { //damn code } export default myFunc 

As you can see, the function is not wrapped, but requires es6;)