如何提升 Visual Studio Code 的 JavaScript 开发效率(二)

上一篇我们介绍了在 Visual Studio Code 引入 jsconfig.json 文件来提升 JavaScript 的开发效率。jsconfig.json 是基础,有了它才有后续的功能增强。今天我们就来看看在它的基础上,如何增强在模块引入、点击跳转等的使用体验。

import 路径提示、补全

虽然我们在使用 VSCode 的 IntelliSense 时——比如自动补全一个源代码内的函数,它能帮我们自动 import 函数所在文件。但是对于 NodeJS 内置的模块(如 path、fs、util 等)、package.json 中的 dependencies 等所包含的函数,必须先手动 import 进来才能进行提示。为了让手写 import 更加快捷,这里我们就需要安装一款 VSCode 插件:Node.js Modules Intellisense。它集成了 NodeJS 内置模块、dependencies、devDependencies、源代码文件模块的扫描与提示。


如何提升 Visual Studio Code 的 JavaScript 开发效率(二)


import 绝对路径

默认情况下,我们只能使用相对路径来引入文件。如果项目层次比较深的时候,就会出现 import '../../../xxx.js'。这么长的相对路径,无法一眼看出其真实位置,这样就比较容易出现引入错误的问题。我们希望这里能够引入绝对路径——当然是相对工程根目录的”绝对路径“,像 import 'lib/util.js'。

首先,可以设置 jsconfig.json 的 baseUrl:

{
 "compilerOptions": {
 "baseUrl": "./src"
 }
}

这样自动引入或手动引入都可以使用绝对路径。


如何提升 Visual Studio Code 的 JavaScript 开发效率(二)


但是这样的引入在运行时会报找不到文件,因为它并非 dependencies。有两个办法可以解决,一是在 babel build 的时候,把路径进行补全,这个可以利用 babel-plugin-module-resolver 来解决。或者不补全路径,直接设置 NODE_PATH 到 baseUrl 所指向目录,如下:

// 必须是第一个加载的文件
process.env.NODE_PATH = __dirname; // __dirname 替换为 baseUrl 所对应目录
require('module').Module._initPaths();

Go To Definition

有了 import 路径自动补全的支持,我们就可以使用 Go to definition 功能了。按住 Cmd 键(Windows 上用 Ctrl)并使用鼠标单击 import 的路径部分,就可以跳到目标文件。但是我们发现,如果 import 的是 .json 文件或 .jsx 文件,是无法进行跳转的。右键路径并点击 Go To Definition 会提示 No definition found for xxx。

这个时候我们就要用到更加复杂的配置了。由于 JavaScript 工程在 VSCode 里是 TypeScript 工程的子集,它的很多功能都是由 TypeScript 提供。相应地,jsconfig.json 也是 tsconfig.json 的子集。在 tsconfig.json 的 schema(http://json.schemastore.org/tsconfig)里,我们找到了相关配置项:

{
 "compilerOptions": {
 "jsx": "react",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 }
}



如何提升 Visual Studio Code 的 JavaScript 开发效率(二)


以上使用 import 的地方,同样也适用传统的 commonjs(require)语法。接下来,我们将会聊聊更令人兴奋的功能:让 JavaScript 也具有静态类型检查、校验的能力——可不是 TypeScript 或 Flow 哦。


分享到:


相關文章: