Link runtime dependencies, for VSCode autocomplete

Question

I can't get VSCode to link in-code function parameters to their dependencies (vars, functions, modules), and get autocomplete suggestions in code.

Is there a way, with JSDoc, to make VScode recognize what module corresponds to a certain parameter?

// const database = require('./data-access/mongodb-adapter.js')

/**
 * Factory for our service
 * 
 * QUESTION: Can JSDoc refer a module in another file?
 *          (and instruct VSCode to wire it)
 *
 * @param {module('./data-access/mongodb-adapter.js')} database   The adapter to the app database
 */
function makeService(database) {
    return {
        find: query => database.find(query)
    }
}

module.exports = makeService

In PHP, with PHPDoc, I would type-hint the variable $database, adding an annotation /* @var MongodbAdapter $database */ in the same scope.
VSCode makes it clickable (when holding cmd ⌘) and links me to the referenced module/file/function.

Is there a way to specify the same on factory/constructor dependencies? (without transpiling)

user_16933073 · Answer

in some cases you can if you are you using js files you need to create a jsconfig.json at the root of your project


{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "ES5",
      "dom.iterable",
      "esnext",
      "ES2015",
      "ES2016",
      "ES2017",
      "ES2018",
      "ES2019",
      "ES2020"
    ],
    "allowJs": true,
    "checkJs": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "declaration": true,
    "declarationDir": "./typings",
    "pretty": true,
    "sourceMap": true,
    "type":[],
    "jsx": "react",
    "baseUrl": "./node_modules",
    "paths": {
      "*": [
        "./@types/*/index.d.ts",
        "./@types/*/types.d.ts",
        "./*/index.d.ts",
        "./*/types.d.ts",
        "../types/*/index.d.ts"
      ]
    },
      "typeRoots": [
      "./@types",
      "../types",
      "../typings"
    ]
  },
"typeAcquisition": {
  "enable": true
},
  "include": [
    "src",
    "types"
  ],
  "exclude": [
    "node_modules"
  ]
}

a jsconfig.json is the same as a tsconfig.json so if there are some types from your dependencies that you would like to use you need to install them and add them into the "type" array.

the way of using it is with for example we want to use express first we add

$ npm i -D @types/express

at the "type":[] array from the jsconfig we add express

...
"type":["express"]
...

now on your code

/**
 * @description
 * your desc
 * @type {import("express").RequestHandler} RequestHandler
 * @param {import("express").Request} req request
 * @param {import("express").Response} res response
 * @author Ernesto Jara Olveda
 * @copyright (C) 14
 */
export const renderLoginPage = (req, res) => {
    res.setHeader("Content-Type", "text/html; charset=uft-8");
    res.render("login.hbs", {
        canonical: "http://localhost:3000",
        theme: "theme-light",
        lang: "es",
        highlight: "highlight-red",
        gradient: "body-default",
        token: req.csrfToken(),
    });
};

if by any means the code u want to reference is not a package but a file in your src folder you have a problem, it cannot be done that way. you need to create a *.d.ts for example

src
--controller
----user
------user.js
------user.d.ts

let`s imagine we want to reference some from. user.js then we need to create a user.d.ts file and add all them definitions of your user.js you can use https://www.typescriptlang.org/play?#code to help u out but as you can see there is alot you need to. write down. I recommend you to instead of doing all that create you project in typescript instead

enter image description here

Link runtime dependencies, for VSCode autocomplete

1 Answers