解決WebStorm無法正确識别Vue3組合式API的問題

1 問題描述

Vue3

的組合式

API

無法在

WebStorm

中正确識别，表現為

defineComponent

等無法被識别：

2 嘗試方案

猜想這種問題的原因是無法正确識别對應的

Vue3

庫，筆者相信

WebStorm

是可以做到的，隻是某些配置沒有正确，筆者嘗試過在設定的

Libraries

中勾選上

node_modules

，但是沒有效果。

3 解決辦法

最終的解決辦法參考了此處（圖源）：

選擇

node_modules

檔案夾，右鍵選擇

Mark Directory as

，最後選擇

Not Excluded

即可。

之後會花費一段時間索引，等待完成即可。

4 一些思考

看了一下

WebStorm

的文檔，項目中的檔案夾總共分為四類：

• Source

  ：預設選項，所有檔案夾預設都被視為

  Source

  除非設定為了

  Tests

  /

  Resource Root

  Excluded

• Tests

  ：标記為測試的檔案夾

• Resource Root

  ：資源檔案夾，在輸入某些需要資源的代碼時，比如

  <img src=xxxx>

  ，會自動提示該檔案夾路徑下的資源檔案

• Excluded

  ：代碼補全、代碼導航等會忽略的檔案夾。這個選項能提高

  WebStorm

  性能

在設定中搜尋

Directories

可以發現

node_modules

預設是

Excluded

：

标記為

Not Excluded

後，就不是紅色了：

是以解決并不難，隻是無法正确識别的原因。