再也不手寫import - VSCode自動引入Vue組件和Js模塊

如要自動引入Vue組件，首先需安裝VSCode拓展： Vetur

自動引入Vue組件和普通Js模塊

在根目錄添加 jsconfig.json 。
每次修改jsconfig.json後需重啓該VSCode窗口

{
  "include": [
    "./src/**/*"
  ],
}

支持Webpack別名路徑

同上，需更新 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
  },
  "include": [
    "./src/**/*",
  ],
}

在JS中自動引入node_modules中的JS

1. 以lodahs爲例，安裝 lodash: npm install lodash
2. 在根目錄添加 jsconfig.json

{
  "compilerOptions": {
    "checkJs": true,
  },
  "include": [
    "node_modules/lodash/*"
  ],
}

1. 輸入關鍵字後，點擊提示燈泡（快鍵鍵: Ctrl/Command + .），選擇JS模塊

注意： checkJs可能會引發部分項目語法報錯，若有報錯可以使用下面的方法做爲替代方案。

使用Npm Intellisense自動引入node_modules中的JS

1. 安裝VSCode拓展： Npm Intellisense
2. 配置 Npm Intellisense

{
  "npm-intellisense.scanDevDependencies": true,
  "npm-intellisense.importES6": true,
  "npm-intellisense.importQuotes": "'",
  "npm-intellisense.importLinebreak": ";\r\n",
  "npm-intellisense.importDeclarationType": "const",
}

1. VSCode輸入命令（Ctrl/Command + Shift + P）: Npm Intellisense: Import module後, 選擇引入包

其餘

自動引入Vue組件和JS模塊後，按住Ctrl/Command點擊路徑可直接跳到該文件

文章原始發佈於：個人博客