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

  • 日期:
  • 留言數:0
  • 標籤:
Visual Studio Code 編輯器

我在 2016 年曾寫過一篇 Brackets 編輯器的設定文章,沒想到時隔 4 年,已經變心改用 VS Code 惹 Q_____Q。只能說微軟真的很強大,VS Code 不管是軟體本身的更新,或是延伸模組的開發速度,都比 Brackets 快很多,加上 VS Code 也 能安裝 Brackets 內建的好用功能,所以我就轉過去了 (遮臉

使用 Visual Studio Code 的理由

我用 VS Code 也有一段時間了,其實到現在我還是很喜歡 Brackets 這款編輯器,所以跳槽絕不是因為不愛,而是有幾點因素考量:

更新速度

不知道是微軟加持還是什麼緣故,VS Code 大概是我看過更新最勤勞的編輯器了,每個月都會固定更新,而且有時候更新的內容也很實用,還會有一連串的說明跟示意圖,非常的貼心!

有興趣的朋友也可以到他們的更新頁面看詳細的介紹。

每個月都會固定更新的 VS Code

豐富的延伸模組

因為官方勤勞,連帶著讓開源者也勤勞了起來,VS Code 的延伸模組真的有超超超超多內容可以選擇!而且各式各樣奇奇怪怪的需求都有,每次看延伸模組都像是在挖寶一樣,喜歡客製化的工程師,應該會沈浸在 VS Code 的世界裡無法自拔吧!

另外,VS Code 也有提供 Brackets 編輯器的內建功能,像是我在 Brackets 編輯器介紹文中說到的「炫技」:

在 VS Code 延伸模組中,他們叫該功能為 CSS Peak,後面介紹模組時會再詳細說明。

各式各樣的特色

此外,我在 Brackets 提到的這些特色 VS Code 也都有:

  • 客製化方便
  • 有中文版
  • 安裝佈景主題 / 模組都很方便

此外還有:

  • 內建 Emmet
  • 內建 Terminal (Brackets 要另外裝還要啟動 tty.js,但 VS Code 是直接吃你終端機的設定,不需要再背景執行)

這些功能,也會透過官方更新不斷的增加,一切的一切,都讓我覺得很有誠意!

接下來,會跟大家介紹我在使用的 VS Code 延伸模組,來看看有沒有你喜歡的,有的話就夾去配吧 XD。

我的 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^

將檔案快速 push 到 gh-pages branch

github 提供一個簡易的環境可以執行 HTML/CSS/JS 等前端程式,使用方法很簡單,只要把在 repo 新增一個gh-pages分支,然後將檔案 push 到該分支即可。

但用 sourcetree 切換 branch,檔案也會隨之改變,並不是個好方法。也許用 sourcetree 有其他的解法,但目前我研究不出來,所以我目前的做法是用npm套件去管理。

gh-pages 套件介紹

這個套件就叫做 gh-pages,可以直接在 cmd 執行以安裝 (當然前提是要先安裝 npm 套件管理):

Shell

套件頁面有詳細的文件說明,會告訴你如何做更多進階的設定。

但我要的功能很簡單,只希望把當前 branch 的檔案 push 到gh-pages即可,因此請在 Terminal 輸入該指令即可 (最後面可以輸入資料夾位置):

Shell

這個原理很簡單,就是先把你要的檔案抓下來,再移除gh-pages裡的檔案,最後再上傳。也因此這些動作都需要輸入 github 的帳號密碼,最少可能要輸入三次,為了避免這種情況,我們必須要修改 config,將你的 repo 位置從http://改為git@

修改 config 檔案

請在 Terminal 利用 vim 或任一編輯器打開 config (該檔案為隱藏檔)

Shell

[remote "origin"]裡面有一個url,將它的路徑改為git@開頭的 repo 位置即可。

最後存檔再試著執行gh-pages -d .,就會發現不用再輸入密碼了唷!

我的 Brackets 編輯器設定 (佈景與外掛)

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

這還是我頭一次幫編輯器寫一篇文章,即使之前使用 VIM,也只是將自己的設定檔放到 github 上而已 XDDDD。

會想寫這篇文章,是因為有一次無意間把自己的 brackets 外掛 po 到 FB 上,意外有人在詢問,那時候才發現原來除了我之外也有人在用 brackets,畢竟他相對於 Sublime 來說是非常冷門的。後來在粉絲團詢問,也有一些朋友表示有意願想瞭解,所以決定簡單記錄一下自己使用的佈景與外掛!

如果你是第一次聽到 Brackets 這套編輯器,或是還沒使用過但想瞭解的話,可以先聽聽我選擇他的理由;假設你已經開始使用 Brackets,也願意將它當作你的主力編輯器,那麼可以直接往下拉到我使用的外掛清單,以供參考。

(閱讀全文…)