如何在 Visual Studio Code 的 Javascript 代码中导航？答案

【问题标题】：How to navigate in Javascript code in Visual Studio Code?如何在 Visual Studio Code 的 Javascript 代码中导航？
【发布时间】：2017-06-15 19:20:51
【问题描述】：

我想知道如何在 VS 代码中导航 Javascript 代码。

为了弄清楚行为，我做了这个小项目：

js
js/index.js
js/foo.js

index.js

var person = {}

person.name = "azeaze"

person.sayHello = function() {
  console.log("Hi! My name is ", this.name)
}

foo.js

console.log('In foo module')

person.sayHello()

jsconfig.json

{
    "compilerOptions": {
        "target": "ES5"
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "js/*"
    ]
}

当我点击 person.sayHello 时，我需要从 foo.js 文件中导航。我尝试了 Cmd-click 或 F12，但 VS Code 回复“未找到 sayHello 的定义”。为什么VS代码不能？

可能需要使用模块？如果是这样，有没有办法处理不提供的遗留代码（纯 ES5 代码）？如果IDE只需要遵循要求，那么在jsconfig.json中“包含”的目的是什么？

编辑：我试着按照这个答案Debugging/Navigating JS Code in Visual Studio，也就是说添加到 foo.js ：

/// <reference path="../Path/To/The/Referenced/index.js" />

但是 F12 导航仍然不起作用。

（我使用的是 Mac OS 10.12 和 VS Code 1.13）

【问题讨论】：

试试Ctrl+click，它通常适用于我的VS代码
我试过那个和 F12 导航，但是 VS Code 不明白。
如果你的光标在 person.sayHello() 的 sayHello() 部分并且你按下 CTRL/CMD 键没有任何反应？和f12一样吗？他们都为我工作。
不，它对我不起作用。 Cmd-click 不执行任何操作，F12 显示“No definition found for sayHello”...有趣的事实，如果在 index.js 中创建一个构造函数（例如：var Personne = function() {}），我可以使用它在具有自动完成功能的 foo.js 中。

标签： javascript visual-studio-code

【解决方案1】：

我从官方 github 的 VS Code 中复制/粘贴答案：https://github.com/Microsoft/vscode/issues/28495#event-1119847030。

为我们的 JS 和 TS 语言提供支持的 TypeScript 服务目前无法识别创建后添加到对象的属性。

最好的解决方法是在对象字面量中定义所有属性：

var person = {
   name: "azeaze",
   sayHello: function() {
     console.log("Hi! My name is ", this.name)
  }
}

或使用 jsdocs 添加显式类型：

/**
 * @type {{ name: string, sayHello: () => void}}
 */
// @ts-ignore
var person = {}

person.name = "azeaze"

person.sayHello = function() {
  console.log("Hi! My name is ", this.name)
}

【讨论】：