如何使 VS Code 支援 Webpack Alias 的 @ ?

栏目: JavaScript · 发布时间: 4年前

内容简介:若使用相對路徑 Import Module,VS Code 的 Go to Definition 可以順利使用;但若使用 Webpack Alias 的VS Code 1.32.1Vue 2.6.6

若使用相對路徑 Import Module,VS Code 的 Go to Definition 可以順利使用;但若使用 Webpack Alias 的 @ 時,VS Code 就會找不到 Module,該如何解決呢 ?

Version

VS Code 1.32.1

Vue 2.6.6

Vue CLI 3.4.1

Relative Path

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}

Vue CLI 預設是以相對路徑載入 HelloWorld component,這種寫法 VS Code 的 Go to Definition (F12) 可以正常使用。

Webpack Alias

import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

若改用 Webpack Alias 的 @ ,他會指向專案的 src 路徑, yarn serveyarn build 都可正常執行,但 VS Code 認不出 @ ,因此 Go to Definition 無法使用。

jsconfig.json

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

在專案根目錄下新增 jsconfig.json ,這個檔案告訴 JavaScript Language Service 目前目錄為 JavaScript 專案,並且設定 JavaScript 檔案的實際目錄與其他相關設定。

include:指定 JavaScript 實際目錄位置,Vue CLI 預設將所有 JavaScript 放在 src 目錄下,因此 src/**/* 表示 src 目錄下所有子目錄下的檔案

baseUrl:指定所有路徑的基本參考目錄, . 表示從專案的根目錄開始參考

paths:指定 Webpack Alias 的對應目錄,根據 baseUrl 的設定值繼續設定,因此 @/* 相當於 src/*

Conclusion

  • 只要在專案根目錄加上 jsconfig.json ,並加上適當的設定,VS Code 也能看懂 Webpack Alias 的 @

Sample Code

完整範例可以在我 GitHub 上找到

Reference

VS Code , jsconfig.json

Vetuer, Setup


以上所述就是小编给大家介绍的《如何使 VS Code 支援 Webpack Alias 的 @ ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R语言编程艺术

R语言编程艺术

(美)Norman Matloff / 陈堰平、邱怡轩、潘岚锋 等 / 机械工业出版社 / 2013-5 / 69.00

【编辑推荐】 这本书涵盖了R语言编程的诸多方面,尤其在面向对象编程、程序调试、提升程序运行速度以及并行计算等方面,填补了同类图书的空白。关于程序调试的章节更是作者多年经验的总结。不管是初学者还是有一定编程经验的读者,阅读这本书都会有所收获。 ——统计之都 【内容简介】 R语言是世界上最流行的用于数据处理和统计分析的脚本语言。考古学家用它来跟踪古代文明的传播,医药公司用它来探......一起来看看 《R语言编程艺术》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具