iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 4

改造你的VSCode,大幅提升你的Coding效率

工欲善其事,必先利其器,插件是Coding效率提升的利器

今天要來介紹的主角是Visual Studio Code(簡稱VSCode),它是一款微軟開發的原始碼編輯器,幾乎支援了所有的程式語言,為開發者提供好用的工具來提升效率,撰寫高質量的程式碼,那就讓我來推薦給大家自己使用過的好用工具吧~

環境設定

在終端機使用指令開啟VS Code

按下 command+Shift+P 來呼叫 命令選擇區,輸入shell command,選擇「Shell Command: Install code command in PATH」
https://ithelp.ithome.com.tw/upload/images/20210919/20112053l55ePJs75b.png
安裝完重啟後,在要打開的資料夾右鍵,開啟終端機,並輸入code .,就會幫你開啟專案在 VS Code 上囉~
p.s因為我是裝iTerm2所以設定終端機為iTerm2
https://ithelp.ithome.com.tw/upload/images/20210919/20112053iv5KFNd84t.png
https://ithelp.ithome.com.tw/upload/images/20210919/20112053sHjqIuYFUH.png

教你如何設定在Finder目前資料夾開啟終端機

1.開啟「系統偏好設定」
2.點擊「鍵盤」
https://ithelp.ithome.com.tw/upload/images/20210919/20112053yIBDavxadC.png
3.開啟後選擇上方「快速鍵」→左側「服務」→找到檔案與資料夾勾選「新增位於檔案夾位置的終端機視窗」(系統預設)或是「New iTerm2 Window Here」(自行安裝)
https://ithelp.ithome.com.tw/upload/images/20210919/20112053EOOloekX8M.png
4.之後再到你要開啟的資料夾點選右鍵,再輸入「code .」就可以開啟囉~
https://ithelp.ithome.com.tw/upload/images/20210919/20112053cUPS4KJ0NE.png
https://ithelp.ithome.com.tw/upload/images/20210919/20112053Aqc5lZmEcu.png

外觀

設定完之後我們就要來講美化VSCode的介面,讓你在操作上能夠更方便

One Dark Pro

自訂VS Code外觀樣式
先安裝好One Dark Pro主題後,點擊Preferences>Color Theme
https://ithelp.ithome.com.tw/upload/images/20210919/20112053UcogwB6Lbu.png
在選擇剛剛安裝的One Dark Pro主題
https://ithelp.ithome.com.tw/upload/images/20210919/20112053g8gw9mPGgD.png

vscode-icons

vscode本身沒有圖示,安裝後可以幫你把檔案與資料夾icon美化
使用前:
https://ithelp.ithome.com.tw/upload/images/20210919/20112053QxEw5dvv1C.png
使用後:
https://ithelp.ithome.com.tw/upload/images/20210919/20112053wQSTaUzH1z.png

好用套件

TODO Highlight

當你寫程式碼過程中,突然想到有地方需要補充,但又不想停下手邊的工作,打斷思路,這功能超好用,只要使用TODO/FIXME關鍵字,就會把註解高亮起來
https://ithelp.ithome.com.tw/upload/images/20210919/201120536HXodTSKB3.png
但是檔案很多就會散落在各個檔案裡面,這時候還可以搭配Todo Tree,會統整整個專案,依照檔案結構來產生樹狀的列表,相當方便
https://ithelp.ithome.com.tw/upload/images/20210919/20112053VE4aj9lCZn.png

AutoFileName

提示檔案位置。有時候我們打相對位置,不確定名稱或路徑時,都需要打開資料夾去確認,但是用了這套件後,就會出現提示。
https://ithelp.ithome.com.tw/upload/images/20210919/20112053fM4IFjZ9NZ.png

Auto Close Tag

當你打html tag標籤時,會幫你把右括號或結束標籤補上
https://raw.githubusercontent.com/formulahendry/vscode-auto-close-tag/0c784ff156da350cce8374a7f04759cab7e2aaff/images/usage.gif
圖片來源

Auto Rename Tag

修改html tag時,會自動修改對應的標籤
https://github.com/formulahendry/vscode-auto-rename-tag/raw/HEAD/images/usage.gif
圖片來源

Bracket Pair Colorizer

當程式碼多的時候,會變得很難閱讀,甚至有時候還會誤刪或漏掉,導致要找很久,使用這個套件,就會自動將成對的括弧加上顏色,無論是在html、css、js點選括號時,會將對應的括號選起來,閱讀程式碼很方便。
https://ithelp.ithome.com.tw/upload/images/20210919/201120535pmzeSWukz.png

indent-rainbow

將程式碼縮排的部分增加顏色,方便閱讀程式碼
https://ithelp.ithome.com.tw/upload/images/20210919/20112053MrlgSI04I2.png

Sass/SCSS 相關

Live Sass Compile

即時編譯SASS/SCSS成CSS,不需要使用https://ithelp.ithome.com.tw/upload/images/20210919/20112053YvJa90vKFN.png官方直譯器與終端機,也可以自訂輸出的檔案位置,超級方便~
https://ithelp.ithome.com.tw/upload/images/20210919/20112053DOksoPmflG.png
檔案>喜好設定>設定,搜尋「livesass」就會出現安裝Live Sass Compile的設定
https://ithelp.ithome.com.tw/upload/images/20210919/20112053l14Z6F45LO.png
在setting.json裡面輸入你的設定,就完成囉~以下是我的設定
https://ithelp.ithome.com.tw/upload/images/20210919/20112053XiWc95LfPn.png
format的設定屬性有四種:

  • nested (預設的樣式) : 巢狀顯示
  • expanded : 不要巢狀
  • compact : 簡潔樣式,縮進成一行
  • compressed :壓縮模式

Live Server

使用虛擬路由執行網頁,存檔時候,會自動在瀏覽器新開網頁,顯示最新存檔後的畫面
按下右下角「Go Live」
https://ithelp.ithome.com.tw/upload/images/20210919/201120536OQUkdwyjI.png
點擊啟動後,網址會是「 http://127.0.0.1:5501/ 」,當你在編輯器修改後,畫面就會立即改變
https://ithelp.ithome.com.tw/upload/images/20210919/20112053XmrVgHnkLp.png

版本控制

Git History

以GUI的格式顯示Git的commit資訊
https://ithelp.ithome.com.tw/upload/images/20210919/20112053EmQBtYoOGP.png
可以查看提交紀錄,有更動左方就會出現提示,還能直接同步提交給遠程版本庫
https://ithelp.ithome.com.tw/upload/images/20210919/20112053JbNchxIbH3.png

GitLens

https://ithelp.ithome.com.tw/upload/images/20210919/20112053H0O4yVjINt.png
在文件中點擊該行,會出現提交訊息、誰提交、時間
https://ithelp.ithome.com.tw/upload/images/20210919/20112053J0fEtnL97x.png
點擊右上紅框按鈕,還以可與內容做比對
https://ithelp.ithome.com.tw/upload/images/20210919/201120531yX7Q1R5vn.png

以上是我使用的工具,推薦給大家!


上一篇
找尋你的設計靈感、素材及好工具
下一篇
認識網頁元素 HTML、CSS
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言