如何在VS Code中无需悬停快速找出JavaScript类中未定义的调用方法

嘿，我完全懂你的痛点！写JavaScript类的时候，像你代码里的doOtherStuff()和doMoreStuff()这种调用了但没定义的方法，每次都得靠Ctrl+hover去确认实在太麻烦了对吧？下面给你两个实用的解决办法，满足你要么高亮上色，要么找类似“反向Outline”功能的需求：

先还原一下你的场景，比如你写了这段代码：

export default class TestClass{
    constructor (){
        this.init();
        this.doOtherStuff();
        this.doMoreStuff();
    }
    init(){
        //do stuff
    }
}

现在你悬停能看到init()是已定义的，但另外两个方法没有定义，想不用悬停就快速识别它们。

方案一：给未定义的方法调用设置专属高亮颜色 #

VS Code支持自定义语法标记的颜色，我们可以给未定义的标识符设置显眼的颜色，一眼就能区分出来：

1. 打开VS Code设置（快捷键Ctrl+,）
2. 搜索「Editor: Token Color Customizations」，点击「编辑 in settings.json」
3. 在打开的配置文件里添加以下代码：

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "invalid.illegal.unresolved.variable.js",
            "settings": {
                "foreground": "#ff4444", // 这里可以换成你喜欢的颜色，比如亮红色
                "fontStyle": "bold"
            }
        }
    ]
}

保存配置后，所有未定义的方法调用就会变成你设置的颜色，不用悬停也能立刻发现。

方案二：用问题面板查看所有未定义的调用（类似反向Outline） #

VS Code的「问题面板」（快捷键Ctrl+Shift+M）可以帮你集中查看所有代码问题，包括未定义的方法调用：

1. 先确保启用JavaScript类型检查：在设置里搜索「JavaScript: Implicit Project Config Check JS」，勾选该选项，VS Code会自动检测未定义的标识符
2. 或者更推荐安装ESLint插件（在扩展市场搜索就能找到），启用它的no-undef规则——这个规则会把所有未定义的变量/方法标记为错误，全部列在问题面板里，点击就能直接跳转到对应的调用位置，效果就像你想要的“反向Outline”一样，能看到所有调用了但没定义的方法。

备注：内容来源于stack exchange，提问作者pkExec