值得收藏的10個高階VSCode配置（分享）

這篇文章跟大家分享10個高級VSCode settings.json配置，快來收藏吧，希望對大家有幫助！

靈魂拷問：你 VS Code  settings.json 檔案有多少行了？

本瓜查了下有60 多行，有些看起來，卻還比較陌生，不知道是配置用來幹嘛的；╮(╯▽╰)╭

本篇帶來10 個settings.json 高（裝）階（杯）配置項目~

1. 隱藏活動欄

VS Code 左側圖標清單是“活動欄”，我們可以點擊圖示跳到各個模組，我們可以透過設定workbench.activityBar.visible 來控制活動欄的顯示。 【推薦學習：《vscode教學》】

#如果你想恢復顯示，可以自訂快捷鍵來再次顯示這塊空間；

如何設定快速鍵：keybindings

#我們可以用Ctrl B 來隱藏/顯示檔案總管，用Ctrl Alt B 來隱藏/顯示活動欄；

雖然，你也可以在命令面板Ctrl Shift P 中搜索，不過使用快捷鍵就更有裝杯效果~

活動列在隱藏狀態下，我們也可以透過快速鍵跳到不同的工作空間，例如Ctrl Shift E（跳到檔案總管）、Ctrl Shift X（跳到擴充功能）、Ctrl Shift H（搜尋與取代）等

2. AI 編碼

GitHub Copilot 是VS Code的擴展，可在你編寫程式碼時產生片段程式碼；

由於它是人工智慧、機器學習，有可能會產生一些你不喜歡的程式碼，但是請別仇視它，畢竟AI 編碼是未來趨勢！

處於隱私考慮，建議不要在工作中使用Copilot，但是可以在個人專案中使用它，有趣又有用，尤其是對於單元測試；

可以在settings.json 中配置Copilot；

3. 字體與縮放

這個不多做解釋，根據自己的需求進行文字大小及縮放比例的配置；

當然，你不一定要在settings.json 中去寫這個配置，也可以在可選項及輸入配置視窗進行配置。

4. 無拖曳/刪除確認

如果你對自己的程式設計技能夠自信，或者對VS Code 的Ctrl Z 足夠自信，你可以設定取消刪除確認；因為拖曳/刪除確認有時也會幹擾想法~

#5. 自更新絕對路徑

VS Code 的最佳功能之一是它的檔案導入很友善，使用絕對路徑，例如：@/components/Button 比../../Button 更讓人舒適；

當行動檔案重新組織目錄時，希望VS Code 能自動更新檔案的路徑？你可以設定它們：

請注意，您需要在 .tsconfig/.jsconfig 檔案中設定路徑才能使用絕對路徑匯入。

6. 儲存執行

配置過 ESLint 儲存修正的應該都知道這個配置。這個非常強大，出了fixAll，還能addMissingImports 補充缺少的Imports，或者其它你想在保存後執行的行為；

#這個設定就像是程式設計魔法~

7. CSS 格式化

你可能已經在使用Stylelint 了，如果沒有，請在設定中設定它！

另一個設定是editor.suggest.insertMode，當設定為「replace」時，表示－當你選擇一個提示並按Tab 或Enter 時，將替換整個文字為提示，這非常有用。

8. 開啟Emmet

你可能熟悉Emmet —— Web 開發人員必備工具包，如果沒有，請設定它；雖然它內建在VS Code，但必須手動設定啟用；

9. Tailwind CSS

Tailwind CSS 是一個功能類別優先的CSS 框架，它整合了諸如 flex , pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構建出任何設計。

雖然它目前尚未內建在 VS Code 中，但可作為免費的 VS Code 擴充功能進行安裝使用，還可以配置附加設定增強它的功能！

10. 點選開啟檔案

VS Code 預設使用者介面，有個奇怪的現象，它需要雙擊才能從檔案總管中開啟文件。

點擊一下得到的是奇怪的「預覽」模式，當你點擊下一個檔案時，第一個檔案就會消失。這就像只有一個標籤。

需要進行這個配置，關閉後，點擊將在新選項卡中開啟檔案。問題解決了~

將配置用 Settings Sync 進行同步，去哪都能個性化、自訂！酷的！

更多程式相關知識，請造訪：程式設計入門！ ！

以上是值得收藏的10個高階VSCode配置（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！