盲写配置?爬了爬了

虽然现在一些主流框架的脚手架在创建项目时就为我们提供了一个默认的Webpack配置，但是在开发过程中难免会遇到需要自定义配置的时候。如果你刚刚接触 Webpack 的配置，这简直是一场人间地狱，杂乱且众多的配置选项一定会让你感到头大。如果开发工具能够为Webpack 配置文件提供智能提示的话，岂不是美滋滋？

VSCode 对于代码的自动提示是根据成员的类型推断出来的，换句话说，如果 VSCode 知道当前变量的类型，就可以给出正确的智能提示。可惜，默认情况下 VSCode 并不知道 Webpack 配置对象的类型，于是在编写Webpack的配置文件时，VSCode没有代码智能提示，没法自动补全。

好消息是，即便你没有使用 TypeScript 这种类型友好的语言，也可以通过类型注释的方式去标注变量的类型。这就为我们提供了一个思路: 能不能通过 import 的方式导入 Webpack 模块中的 Configuration 类型，然后根据类型注释的方式将变量标注为这个类型，这样我们在编写这个对象的内部结构时就可以有正确的智能提示了？

image-20210708211631041卧槽真滴可以，很牛逼~

image-20210708210900089

当然，这种方式对于babel、vue之类的配置也是通用的。不过这种方式还存在一个问题，我们添加的 import 语句只是为了导入 Webpack配置对象的类型，这样做的目的是为了标注 config 对象的类型，从而实现智能提示。在配置完成后一定要记得注释掉这段辅助代码，因为在 Node.js环境中默认还不支持import语句，如果执行这段代码会出现错误。

所以更好的做法是直接在类型注释中使用 import 动态导入类型，具体代码如下：

/** @type {import('webpack').Configuration} */

其实，这种 @type 类型注释的方式是基于 JSDoc 实现的。

使用 JSDoc 标注类型

JavaScript 采用动态类型，在编译期不对类型进行检查，等真正执行的时候由运行时来判断类型是否出现错误，这种特性有点像汇编里的计算一样，类型很弱，不同类型总是显式、隐式地转换。当然，强类型的JavaScript已经很成熟了，那就是 TypeScript，但并不是所有项目一开始就是 TS 写的，也有纯JS的项目，那么在这些项目里如何维护好类型？

答案是在VSCode下使用 JSDoc。

JSDoc 其实就是代码注释，在这种注释里可以标明 JavaScript 里值的类型，以及对代码的注释，通常可以在代码里看到以 @ 符开头的标注，那就是 JSDoc 了。

JSDoc注释一般应该放置在方法或函数声明之前，它必须以/** 开始，以便由JSDoc解析器识别。其他任何以 /*， /*** 或者超过3个星号的注释，都将被JSDoc解析器忽略。

新版本的VSCode是自带JSDoc的解析器的，VSCode天下第一！而且还自带类型检查，参考 VSCode - type-checking 可以显式的打开 JS 的类型检查：

Using type checking and Quick Fixes in a JavaScript file