完善 VSCode 的 Node 自动补全

这是一篇水文,讲讲踩坑的经历。本文的 Demo 已经上传到我的 GitHub

背景

起因是在写 Node 时,受够了 require ('../../../../helper.js') 这种相对路径。不够直观不谈,如果将来在别的地方用,都不能直接 copy 过来,还得重新计算相对路径,因此希望用绝对路径(换句话说就是永远相对根路径)来表示。

一种比较简单的方案是封装 require 函数:

global.rootRequire = function(name) {
    return require(__dirname + '/' + name);
}

在我们的 rootRequire 函数中,所有的路径都会被加上 __dirname 的前缀,也就实现了绝对路径。

这么做功能上没有问题,然而似乎 VSCode 对这种写法支持得不够好(有了解的大佬还望指教),表现为以下两个问题:

  1. 虽然我们把 rootRequire 定义为全局的,但在别的文件中输入这个单词时,并没有自动补全
  2. 通过这种方式引入的模块,不能跳转到模块的实现,也看不到模块的内部结构,如果用 require 引入则没有问题。

经过更进一步的测试,甚至于这种写法也是不行的:

let r = require
let a = r('../test/a')

在 VSCode 中会发现 a 的类型为 any 并且丢失了很多信息。

解决方案

换句话说,封装 require 的路是行不通了,只能用原生的 require 函数,那么只能看看有什么办法可以影响到模块查找的流程了。

内置的那套流程和顺序肯定是改不了,看起来只能从 NODE_PATH 这个全局变量下手了。我们知道 require 函数会去 NODE_PATH 的目录里查找模块,所以只要把它设置为工程的根路径,就可以实现绝对路径加载了。试验一下,项目目录如下所示:

project
    |-----main
           |------index.js
    |-----util
           |------utils.js

很简单的定义一下 utils.js,就导出一个对象:

// utils.js
module.exports = {
    key:' value'
}

index.js 中这么写:

top Created with Sketch.