搜尋
首頁開發工具VSCodevscode怎麼設定Vue別名路徑智慧提示?

vscode怎麼設定Vue別名路徑智慧提示?

當使用Vue 框架進行專案開發時,在vue.config.js 中配置了路徑別名後,到其他頁面引入元件、引入css 、引入靜態檔案路徑時,使用路徑別名不會智慧提示路徑。雖然在 vscode 中安裝了 Path Intellisense 插件,但並無法發揮作用。這樣容易出現路徑拼字錯誤的低能問題,同時也會造成開發效率降低

相關推薦:《vscode基礎教學》、《vue教學

解決方案

  • 在專案package.json 所在同級目錄下建立檔案jsconfig.json, 來解決別名路徑不提示的問題。 (配置完儲存檔案後需要重新啟動編輯器才能生效。而且它只能識別.vue.js結尾的文件,css文件與其他的靜態檔案仍然沒有提示,不推薦!!!

// .jsconfig.json  
{  
    "compilerOptions": {  
        "baseUrl": ".",  
        "paths": {  
            "@/\*": \['src/\*'\],  
            "a/\*": \["src/assets/\*"\],  
            "c/\*": \["src/components/\*"\],  
            ...  
        }  
     },  
    "include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\], 
    "exclude": \["node\_modules"\]  
}
  • 在vscode 的setting.json 中給Path Intellisence 配置(該方案是最優選,能識別任意格式文件,覆蓋率最廣。當別名發生改變時只需修改配置即可)

// setting.json  
"path-intellisense.mappings": {  
    "a": "${workspaceRoot}/src",  
    "c": "${workspaceRoot}/src/components",  
    ...  
}

更多程式相關知識,請造訪:程式設計教學! !

以上是vscode怎麼設定Vue別名路徑智慧提示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
Visual Studio和VS代碼:了解其關鍵差異Visual Studio和VS代碼:了解其關鍵差異Apr 19, 2025 am 12:16 AM

VisualStudio適合大型項目和企業級應用開發,VSCode則適合快速開發和多語言支持。 1.VisualStudio提供全面的IDE環境,支持微軟技術棧。 2.VSCode是輕量級編輯器,強調靈活性和擴展性,跨平台支持。

視覺工作室仍然免費嗎?了解可用性視覺工作室仍然免費嗎?了解可用性Apr 18, 2025 am 12:05 AM

是的,VisualStudio某些版本是免費的。具體來說,VisualStudioCommunityEdition對個人開發者、開源項目、學術研究和小型組織免費。然而,也有付費版本如VisualStudioProfessional和Enterprise,適用於大型團隊和企業,提供額外功能。

使用Visual Studio:跨平台開發軟件使用Visual Studio:跨平台開發軟件Apr 17, 2025 am 12:13 AM

使用VisualStudio進行跨平台開發是可行的,通過支持.NETCore和Xamarin等框架,開發者可以編寫一次代碼並在多個操作系統上運行。 1)創建.NETCore項目並使用其跨平台能力,2)使用Xamarin進行移動應用開發,3)利用異步編程和代碼重用來優化性能,確保應用的高效運行和可維護性。

vscode如何格式化jsonvscode如何格式化jsonApr 16, 2025 am 07:54 AM

在 VS Code 中格式化 JSON 的方法有:1. 使用快捷鍵 (Windows/Linux:Ctrl Shift I;macOS:Cmd Shift I);2. 通過菜單(“編輯” > “格式化文檔”);3. 安裝 JSON 格式化程序擴展(如 Prettier);4. 手動格式化(使用快捷鍵縮進/縮出塊或添加花括號和分號);5. 使用外部工具(如 JSONLint 和 JSON Formatter)。

vscode如何編譯vscode如何編譯Apr 16, 2025 am 07:51 AM

在 VSCode 中編譯代碼分 5 步:安裝 C 擴展;在項目文件夾中創建 "main.cpp" 文件;配置編譯器(如 MinGW);使用快捷鍵("Ctrl Shift B")或 "Build" 按鈕編譯代碼;使用快捷鍵("F5")或 "Run" 按鈕運行編譯後的程序。

vscode如何安裝vscode如何安裝Apr 16, 2025 am 07:48 AM

要安裝 Visual Studio Code,請按以下步驟操作:訪問官方網站 https://code.visualstudio.com/;根據操作系統下載安裝程序;運行安裝程序;接受許可協議並選擇安裝路徑;安裝完成後,VSCode 將自動啟動。

vscode如何放大字體vscode如何放大字體Apr 16, 2025 am 07:45 AM

在 Visual Studio Code 中放大字體的方法有:打開設置面板(Ctrl , 或 Cmd ,)。搜索並調整“Font Size”。選擇具有適合大小的“Font Family”。安裝或選擇提供合適大小的主題。使用鍵盤快捷鍵(Ctrl 或 Cmd )放大字體。

vscode如何連接遠程服務器vscode如何連接遠程服務器Apr 16, 2025 am 07:42 AM

如何通過 VSCode 連接遠程服務器?安裝 Remote - SSH 擴展配置 SSH在 VSCode 中創建連接輸入連接信息:主機、用戶名、端口、SSH 密鑰在 Remote Explorer 中雙擊已保存的連接

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境