iT邦幫忙

2021 iThome 鐵人賽

DAY 2
5
Modern Web

JavaScript 魔法入門 - 從入門到中階觀念系列 第 2

新增裝備 - VSCode 套件介紹

前情提要

身後傳來了聲音:「哈囉,我叫艾草,是你的入門引導學姊。」

我回頭一看卻沒看到人。

「這裡!這裡!」她繼續說著。

我仔細瞧著聲音的來源,是一隻鳥,羽毛是綠色,眼睛還帶著白眼圈,看起來很好摸的樣子。

「等等,不要用那種眼神看我,不準摸!」只見她氣 PUPU 的樣子。

「該聊正事了!要先帶你升級裝備,不然魔法師連個像樣的套件都沒有,怎麼彰顯大魔導師精神,來跟著我一起安裝 VSCode 套件吧!」

https://ithelp.ithome.com.tw/upload/images/20210915/20139066qDJ1Qd1nWL.png


VSCode 套件介紹

Chinese (Traditional) Language Pack for Visual Studio Code

此套件可以將 VSCode 語言調整至中文,如果一開始看到一片英文很緊張,沒關係安裝這個套件就對了。

https://ithelp.ithome.com.tw/upload/images/20210915/20139066R8BKa0HPGm.png

Better Comments

https://ithelp.ithome.com.tw/upload/images/20210915/20139066HsKsBhTzkU.png

在註解時可以透過標註以下不同符號,讓註解有繽紛的顏色。

https://ithelp.ithome.com.tw/upload/images/20210915/20139066pcl0mOfsLz.png

可以針對這些方法去定義自己的註解樣式,以下為官方定義的註解樣式:
https://ithelp.ithome.com.tw/upload/images/20210915/201390667MskOEyFDS.png

Bracket Pair Colorizer

安裝此套件可以讓程式碼的每個互相對應的括號 ()、{} 等,自動幫你用顏色配對起來,更容易看到每個括號是否有包好。

https://ithelp.ithome.com.tw/upload/images/20210915/20139066HHS5beVLcU.png

成果對比圖:
https://ithelp.ithome.com.tw/upload/images/20210915/20139066cwKZLck1AM.png

Code Spell Checker

幫你檢查駝峰式代碼撰寫英文有沒有拼錯的好用工具!
https://ithelp.ithome.com.tw/upload/images/20210915/20139066FCtwBDRNbK.png

改正前會透過下底線告知哪邊拼字錯誤,且也會檢查是否有使用駝峰式撰寫,改正後可以看到下底線消失囉!

成果對比圖:
https://ithelp.ithome.com.tw/upload/images/20210915/20139066fvcIIJdT2e.png

indent-rainbow

可以看到縮排呈現漂亮的彩虹色,沒有縮排好的地方一目瞭然!
https://ithelp.ithome.com.tw/upload/images/20210915/20139066rAhKoYMXsF.png

沒有縮排好的地方會變成紅色區塊,很明顯就能看出來。
成果對比圖:
https://ithelp.ithome.com.tw/upload/images/20210915/20139066dydGhuK8Ao.png


如何在 VSCode 安裝套件

簡單三步驟,教學如何在 VSCode 安裝套件:

步驟一、點選圖示區塊

https://ithelp.ithome.com.tw/upload/images/20210915/20139066oGi7Yl6NWX.png

步驟二、輸入套件名稱

https://ithelp.ithome.com.tw/upload/images/20210915/20139066jNMnZFiMrb.png

步驟三、安裝套件

https://ithelp.ithome.com.tw/upload/images/20210915/20139066msBGuprt04.png

安裝後就完成囉!
裝備升級完成後,讓我們接著學習入門魔法 JavaScript 是什麼 ~


上一篇
JavaScript 魔法入門 - 前言
下一篇
入門魔法 - JavaScript 是什麼?
系列文
JavaScript 魔法入門 - 從入門到中階觀念30

尚未有邦友留言

立即登入留言