babel webpack vue 配置檔案支援智慧提示

你真的可以盲寫配置嗎?

如果非腳手架搭建的專案，往往需要手動配置 babel webpack。

每次都要開啟官網，複製黏貼，然後一個一個配置。

如果配置也能智慧提示，豈不美哉。

babel 配置

如果原先是 .babelrc 配置，請改成 .babelrc.js 或者 babel.config.js

然後安裝依賴 npm i -D @types/babel__core 或 yarn add -D @types/babel__core

接著在配置檔案里加上 @type {import('@babel/core').TransformOptions} 宣告。

非常簡單，babel 就支援智慧提示了。

webpack 配置

方法一樣，先安裝依賴 npm i -D @types/webpack 或 yarn add -D @types/webpack

接著在配置檔案里加上 @type {import('webpack').Configuration} 宣告。

vue 配置

vue 配置則簡單多了，不需要安裝任何東西，

只要加上宣告 @type {import('@vue/cli-service').ProjectOptions} 即可。

小結

其實就是利用 ts 的宣告檔案來實現智慧提示。

很多人不知道 js 的 jsdoc 規範，也被 ts 相容了，可以很好的為 js 服務。

本文只在 vscode 下測試，理論上所有主流開發環境都是支援這種方式的。