[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代碼偵測，提供可用的函式或格式化整理等選項使用，僅限於PHP格式下作用。
  

  建議關閉VSCODE內建的代碼
  到擴展畫面 -> 搜尋輸入@builtin php -> 停用PHP Language Features.

• PHP IntelliSense
  使vscode能支援php偵測錯誤與建議函式使用，需要額外設定setting.json指定該php7位置
  

  //for PHP IntelliSense, 讓vscode能看懂php幫你檢查錯誤或語法建議
  "php.validate.executablePath": "C:/xampp/php/php.exe",
  "php.executablePath": "C:/xampp/php/php.exe",
  "php.suggest.basic": false,
  

  此套件不含format功能，需額外安裝php cs fixer

• jQuery Code Snippets
  JQ新手推薦，直接輸入關鍵字jq馬上給你jquery語法全世界，超好用
  
• Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
  BS新手推薦，直接輸入關鍵字fa5(或fa4)馬上給你BS語法全世界，超好用。
  
• JavaScript (ES6) code snippets
  JS相關常用語法的簡碼工具，縮短編譯JS的生產時間。
  
• Sass
  使其支援SASS自動排版與自動化完成，以及擁有高亮度顯示效果。
  
• Vetur
  使其支援Vue自動排版與自動化完成，以及擁有高亮度顯示效果。
  

自動修正與輔助

一些偏向是偷吃步或省力的自動化修正全都在這裡，主要是加快你打coding速度，有些固定動作就由套件幫你完成。

• Auto Close Tag
  自動幫你的標籤填上結尾標籤，支援HTML/PHP/JS/VUE…等等，方便加快coding速度。
  
• Auto Rename Tag
  當你修改了某標籤，會自動幫你的結尾標籤也一起修改調整。
  
• IntelliSense for CSS class names in HTML
  會自動搜索你的相關CSS樣式表，當你輸入class=""時，輸入時提示你可用存在的Class名
  
• IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS
  與前面套件所不同作者之優化設計，比前一個更強大優良的版本且支援更多程式語言。
  
• Path Intellisense
  自動化的智能連結偵測，提供可用的外部連結提供選項使用，僅限於HTML格式下作用。
  
• AutoFileName
  自動化的檔案名稱連結偵測，提供可用的連結提供選項使用。
  
• Fake Image Snippet Collection
  可以快速提供線上範例圖片可指定長寬，適用img/css/md用途，只要輸入picsum即可。
  
• vscode-fileheader
  快速鍵ctrl+ali+i可產生於頁首/**/之作者註解，也能自訂化。
  
• Chinese Lorem
  vscode預設的快速假文為輸入lorem，這個是中文版的只要輸入ctlorem即可且用法相同。
  

擴展功能與服務端

讓VSCODE主程式而外扮演某軟體腳色，不論是簡易網頁伺服器、SQL操作工具、瀏覽器等等都屬於這項目。

• Browser Preview
  直接讓VSCODE扮演簡易瀏覽器，通常適合懶得另外開遊覽器的人，但十分簡易便是了。
  
• Live Server
  針對指定的檔案與目錄產生簡易型Web伺服器並占用port:5500，但不支援PHP。
  
• Live Sass Compiler
  幫助您通過實時瀏覽器重新加載將SASS / SCSS文件實時編譯/轉換為CSS文件。
  
• MySQL
  能直接對SQL伺服器連線進行Command處理執行操作，但無法勝過phpmyadmin。
  
• open in browser
  針對HTML檔案直接幫你開啟指定瀏覽器進行檢視，僅根據檔案路徑之方式開啟。
  
• Preview on Web Server
  針對指定的檔案與目錄產生簡易型Web伺服器並占用port:8080，但不支援PHP。有自訂快捷鍵與操作介面
  
  • 顯示介面 (ctrl+shift+u)
  • 啟用Web服務 (ctrl+shift+r)
  • 停用Web服務 (ctrl+shift+s)
  • 於遊覽器上預覽此對象 (ctrl+shift+l)
  • 於右側視窗預覽此對象 (ctrl+shift+v)
• Settings Sync
  透過github的gist服務，能將多個VSCODE環境參數與套件模組進行上下傳同步，需要指定好github帳戶ID以及快捷鍵操作上下傳更新。
  
  • 上傳 (Shift + Alt + U)
  • 下載 (Shift + Alt + D)
  • 初始設定請參考官方說明