如何在Visual Studio代码中的Javascript代码中导航？ [英] How to navigate in Javascript code in Visual Studio Code?

问题描述

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

I wonder how to navigate in Javascript code in VS code.

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

To figure out the behavior, I made this little project :

• 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

jsconfig.json

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

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

What I need is to navigate, from the foo.js file when I click on person.sayHello. I tried Cmd-click or F12 but VS Code replies "No definition found for sayHello". Why VS code can't?

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

May be the use of module is required? If so, is there a way to handle legacy code (pure ES5 code) who don't provide it? And what the purpose of "include" in jsconfig.json, if the IDE only need to follow the require?

编辑：
我试着按照这个答案在Visual Studio中调试/导航JS代码，也就是说添加到foo.js：

Edit : I tried to follow this answer Debugging/Navigating JS Code in Visual Studio, that is to say add to foo.js :

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

但F12导航仍然无效。

But F12 navigation still doesn't work.

（我在Mac OS 10.12和VS Code 1.13上）

(I'm on Mac OS 10.12 and VS Code 1.13)

推荐答案

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

I copy/paste the answer from the official github's VS Code : https://github.com/Microsoft/vscode/issues/28495#event-1119847030.

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

The TypeScript service that powers our JS and TS language currently cannot recognize properties added to an object after it is created.

最佳解决方法是定义对象文字中的所有属性：

The best workaround is to define all the properties in the object literal:

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

或添加一个明确的使用jsdocs输入：

or to add an explicit type using 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代码中导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！