我的 Visual Studio Code 編輯器設定記錄 (佈景與模組)

  • 日期:
  • 留言數:0
  • 標籤:

我的 VS Code 延伸模組一覽

我的 VS Code 延伸模組一覽

安裝延伸模組的方式很簡單,打開 VS Code 編輯器後,選擇左側選單的最後一個圖示 (Marketplace),再選擇想要安裝的模組,就會看到相關的介紹與教學,再點擊安裝就可以囉!(部分模組安裝完成後要重新啟動編輯器,才能看到效果。)

以下介紹我使用的延伸模組:

Auto Rename Tag

Auto Rename Tag,顧名思義,就是可以自動幫你把 HTML TAG 做替換。

我自己常用到的情境是把 <div> 改成 <section>,或者 <h2> 改成 <h3> …等等。另外只要是 HTML TAG 他都支援,所以如果是寫 WordPress 的佈景主題 (副檔名為 PHP),同樣也適用唷!


Bracket Pair Colorizer 2

Bracket Pair Colorizer 2,可以把括號變色並作配對,code 很長也不用擔心,因為他的顏色標記會包含引導線,跟著線段往下看就能找到結尾的括號囉。

如果不喜歡這個顏色,還可以從設定檔修改:

Plain Text

Bracket Pair Colorizer 2 的說明頁還有許多設定可以調整,他有貼心的附上範例圖檔跟設定方式,有興趣的朋友可以直接閱讀說明文件去修改喔。


cdnjs

cdnjs,可以直接在 VS Code 搜尋需要的 CDN JS 檔案,雖然一開始使用步驟有點多,但我看中的是他的紀錄,只要用過一次就會存起來,下次就不用重新找了,方便很多!


CSS Peek

之前有提到,VS Code 也有提供 Brackets 編輯器的內建功能,就是我現在要介紹的這款 CSS Peek,可以說是完美復刻了該功能,此外也有支援 SCSS / SASS。

使用上,我是對著 Class name 按下「Alt」+「滑鼠左鍵」就會開啟 Peek 功能,你也可以對著 Class name 按下「滑鼠右鍵」,選擇「定義 (F12)」,同樣能開啟。

我真的很喜歡這個功能,因為當程式碼一多,需要尋找 CSS 樣式時會非常方便。

此外,VS Code 也有內建 JavaScript Peek 的功能,可以對著函式或變數按下「滑鼠右鍵」,選擇「定義 (F12)」,試試看效果喔。


ftp-kr

ftp-kr 可以讓我少開一個 FTP 軟體,直接透過 VS Code 將檔案上傳到 FTP ( 認真覺得用 VS Code 的人真是懶到一個極致 XDDD )

這個延伸模組會將 FTP 的設定資料存成一份 json 在專案資料夾內,記得要把 .gitignote 設定成不上傳,不然密碼都會被人看光光啦。

設定的方式也很簡單,直接看說明頁面照著一步一步做就行囉!


Git History

Git History 能讓我們直接查詢 Git 的 commit 記錄,並方便比對檔案的修改,應該是所有開發人員都會安裝的延伸模組吧!推一個 XD。


HTML CSS Support

HTML CSS Support 的作用是讓我們在寫 HTML 時,可以自動讀取到 CSS 的 class / id,省去反覆查閱的時間。另外也有支援多種檔案格式,如 VUE / JS / PHP / MD … 等等

此外還能設定遠端的 css 檔案喔!假設我們想接 Bootstrap 的 CSS,就在設定檔新增:

Plain Text

如此一來,就可以自動帶入 Bootstrap CSS,再也不用記那些落落長的語法啦!


i18n Ally

i18n Ally 可以幫助我們設定與管理多國語系,我當初會安裝這個延伸模組,是因為 VUE 的專案有使用到多國語系,可惜安裝後就沒有機會再碰到多國語系的需求了,所以這個延伸模組我也還沒實際使用過。

另外我覺得他的 theme 超漂亮的,如果有人知道這是什麼 theme 也歡迎告訴我一聲 XDD。


Live Server

Live Server 這個功能大家應該也不陌生,幾乎是所有前端必備的延伸模組了!它可以讓我們在不重新整理的情況下,直接看到頁面修改後的結果。


Markdown Preview Enhanced

Markdown 相關的延伸模組也蠻多的,之所以選擇 Markdown Preview Enhanced 的原因,是他可以直接預覽文件,讓畫面美美的 XD。另外他還有許多強大的功能,這邊就不一一贅述了,有興趣的朋友可以參考他的文件介紹


Path Intellisense

Path Intellisense 可以讓快速的顯示檔案載入的相對路徑。


REST Client

REST Client 跟 Postman 的作用類似,他可以直接在 VS Code 測試 HTTP request,也可以讀取 .http.rest 的檔案,然後在編輯器裡面直接測試。


Settings Sync

Settings Sync 是我難得一見想推薦給大家的超好用模組!在工作環境下用一個順手的編輯器是很重要的,那要如何讓家裡跟公司的電腦可以同步設定呢?就可以使用 Settings Sync 來協助你同步,他會將設定檔放在 gist.github.com 裡面,我們只要給他一個權限讓他能自由上傳/下載該檔案即可。

備份的範圍包含:

  1. Settings File
  2. Keybinding File
  3. Launch File
  4. Snippets Folder
  5. VSCode Extensions & Extensions Configurations
  6. Workspaces Folder

TabNine Autocomplete AI

TabNine 可以記憶我們打過的語法,供下一次使用。比較特別的是,他是真的在學習我們打過的程式碼,所以用得愈久會愈精準唷。


Vetur

Vetur 應該是 VUE 工程師必裝的模組之一!他支援了以下功能:

  • Syntax-highlight (語法高亮)
  • Snippet
  • Emmet
  • Lint / Error Checking
  • Formatting
  • … 等等

Vue Peek

Vue Peek 的功能跟 CSS Peek 很像,可以直接在 vue 檔案中找到相對應的元件,節省開發的時間。


以上這些是我目前有用到的延伸模組,原本是想通篇寫個詳細設定的,但後來發現每個模組的文件都寫得很詳細,所以有興趣的朋友可以直接到網站看會比較清楚,如果有不懂的地方歡迎留言討論唷 ^Q^

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團