CODEWITHSUNDEEP
javascriptvisual-studio-codeintellisensejsdoc
Kamafeather
Kamafeather

Reputation: 9845

Link runtime dependencies, for VSCode autocomplete

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)

Upvotes: 1

Views: 435

Answers (1)

JS Disciple
JS Disciple

Reputation: 378

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

Upvotes: 1

Related Questions