Link 运行时依赖项，用于 VSCode 自动完成

Question

我无法获取 VSCode 到 link 代码函数参数及其依赖项（变量、函数、模块），也无法在代码中获取自动完成建议。

有没有办法，用JSDoc，让VScode识别哪个模块对应某个参数？

// 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

在 PHP 中，使用 PHPDoc，我会 type-hint 变量 $database，添加注释 /* @var MongodbAdapter $database */ 在同一范围内。
VSCode 使其可点击（当按住 cmd ⌘ 时）并且 link 将我发送到引用的 module/file/function.

有没有办法在 factory/constructor 依赖项上指定相同的内容？ （不转译）

Answer 1

在某些情况下，如果您使用的是 js 文件，则需要在项目的根目录下创建一个 jsconfig.json


{
  "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 与 tsconfig.json 相同，因此如果您想要使用依赖项中的某些类型，则需要安装它们并将它们添加到“类型”数组中.

使用方法是，例如我们要先使用express，然后添加

$ npm i -D @types/express

我们在 jsconfig 的 "type":[] 数组中添加 express

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

现在在你的代码上

/**
 * @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(),
    });
};

如果你想引用的代码不是一个包而是你的 src 文件夹中的一个文件，那么你有问题，不能那样做。你需要创建一个 *.d.ts 例如

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

让我们假设我们想要引用一些来自。 user.js 然后我们需要创建一个 user.d.ts 文件并添加所有 user.js 的定义您可以使用 https://www.typescriptlang.org/play?#code 来帮助您，但如您所见，您需要做的事情很多。写下来。我建议你不要用打字稿来做所有创建项目的事情

enter image description here

Link 运行时依赖项，用于 VSCode 自动完成

Link runtime dependencies, for VSCode autocomplete

javascript

intellisense

jsdoc

visual-studio-code