[Day0] 網頁設計師會用到的VSCODE與常用套件
[Day00] 網頁設計師會用到的VSCODE與常用套件 所謂工欲善其事必先立行器，VSCode已經是目前熱門主流的編輯器，原因除了直覺快速的介面操作，便利的專案與檔案管理，還有那些滿滿免費套件可以使用。套件不是一定需要的，每個人都有習慣的環境套件，找到符合自己的套件才是真正屬於自己的環境，以下是我推薦想成為網頁設計師的新手套件，可以分為四個類別來介紹。 視覺強化 屬於高亮提示或排版自動美化部分，方便在編輯程式碼時減少錯誤的宣告起始頭尾，也利於觀看程式碼能快速看出主體結構。 Bracket Pair Colorizer 幫你的{}大括弧上色，會自動對應不同顏色，幫助你輕鬆看準程式區段範圍。 Highlight Matching Tag 當游標停留在某一個區段或是標籤上，能高亮提示該屬於那些區段範圍或對應的頭尾標籤位置。 indent-rainbow 協助你排版(TAB)的空格填塞淡淡顏色，能幫助你對齊更快速方便。 Prettier - Code formatter 對HTML/CSS/JS支援自動化format排版效果，提升美觀性容易維護。 vscode-styled-components 幫助JS跟CSS有更高亮的視覺輔助效果 Comment Translate 滑鼠停留在變數、函數或註解能自動Google翻譯(可繁體)，易用於原作者之註解說明。 filesize 增加資訊於左下角對於檔案空間為多少的輕資訊。 Image preview 可簡單輕巧提示該圖片預覽並縮圖於行數左側。 SVG Viewer 我們都知道內建支援圖片預覽但不支援svg格式，此套件可以補強此需求。 程式語言輔助 收錄MD、PHP、JQ、BS這類網頁開發的程式語言為主，使用某宣告或函式能方便提示語法說明，不必背誦太多語法也能輕鬆找到指定宣告語言。 docs-markdown 透過ALT+M或是 F1 輸入 >docs 就能快速生成MarkDown標籤，MarkDown初學者推薦。 Markdown All in One 提供一些常用的快速鍵，方便Markdown編寫上手，以及支援預覽效果。 PHP Intelephense 自動化的PHP代碼偵測，