工具- VS Code 外掛安裝

10 月 7, 2021 | 互動網頁設計, 網站設計

中文介面

VSCode的外掛套件安裝方式為點選右邊的套件選單

搜尋 chinese 即會出現相關的關鍵字套件

以我們目前的習慣建議安裝 Chinese(Traditional) 這個版本

安裝完畢後會出現該套件的細節資訊,也可以在這邊解除安裝

某些套件安裝後需重新啟動VSCode或重新讀取目前頁面,依說明操作即可

Prettier 自動美化程式排版

程式的coding style一直以來都是開發者們會要求的部份,但團隊專案間有時後還是會有開發者習慣不一致的情形發生,所以使用格式器(formatter)變成一個趨勢,格式器的好處不止在於統整各個開發者的習慣,讓程式碼容易閱讀,在很多情形下格式器也能協助開發者抓到程式中的問題,這邊我們安裝的格式器叫作 Prettier

在VScode套件市集搜尋 Prettier

安裝Prettier-Code formatter這個套件

安裝完畢後我們必須要作一些設定,開啟VScode的設定

windows版本的位置可能有所差異,但基本上就是開啟設定面板

在設定面板搜尋forma (不用把字打完)
將 Default Formatter (預設格式器) 下拉選單選擇我們安裝的 Prettieer- Code formatter

在下方找到 Format on Save (在存檔時啟動格式功能)並打勾

找一個我們上課的 html 網頁檔案,並且按下Cmd+s (Ctrl+s) 存檔,看看有沒有自動幫你把程式碼都排版美化了