不再手寫import – VSCode自動引入Vue元件和Js模組

蘇信發表於2018-07-18
ImportVSCodeVue元件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. 以lodash為例，安裝 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": ";
",
  "npm-intellisense.importDeclarationType": "const",
}
  1. VSCode輸入命令（Ctrl/Command + Shift + P）: Npm Intellisense: Import module後, 選擇引入包

其他

自動引入Vue元件和JS模組後，按住Ctrl/Command點選路徑可直接跳到該檔案

 

本文原始釋出地址：我的部落格

相關文章