Свяжите зависимости времени выполнения для автозаполнения VSCode

#javascript #visual-studio-code #intellisense #jsdoc

Вопрос:

Я не могу заставить VSCode связать параметры функций в коде с их зависимостями (vars, функции, модули) и получить предложения по автозаполнению в коде.

Есть ли способ с помощью 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, я бы набрал подсказку переменной $database , добавив аннотацию /* @var MongodbAdapter $database */ в той же области.
VSCode делает его кликабельным (при удержании cmd ⌘) и связывает меня с указанным модулем/файлом/функцией.

Есть ли способ указать то же самое для зависимостей фабрики/конструктора? (без переноса)

Ответ №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"
  ]
}
 

jsconfig.json-это то же самое, что и tsconfig.json, поэтому, если в ваших зависимостях есть какие-то типы, которые вы хотели бы использовать, вам необходимо установить их и добавить в массив «тип».

способ его использования таков, например, мы хотим сначала использовать express, мы добавляем

 $ npm i -D @types/express
 

в "type":[] массиве из jsconfig мы добавляем экспресс

 ...
"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?#код, чтобы помочь вам, но, как вы можете видеть, вам многое нужно. записывать. Я рекомендую вам вместо того, чтобы делать все это, создавать свой проект в машинописном виде

введите описание изображения здесь