Question

我想知道如何在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代码）？在jsconfig.json中“包含”的目的是什么，如果IDE只需要遵循require？

编辑：我试着按照这个答案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上）

Answer 1

我从官方github的VS代码中复制/粘贴答案：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)
}

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

1 个答案: