網頁編輯器-vscode

mandyyunmm

Visual Studio Code（簡稱VS Code）是一個由微軟開發，同時支援Windows 、 Linux和macOS等操作系統的免費程式碼編輯器，它支援測試，並內建了Git 版本控制功能，同時也具有開發環境功能，例如代碼補全（類似於 IntelliSense）、代碼片段和代碼重構等。該編輯器支援用戶個性化組態，例如改變主題顏色、鍵盤捷徑等各種屬性和參數，同時還在編輯器中內建了擴充程式管理的功能。

連結至官方網站 下載

為什麼 VSCode 會有這樣的魅力呢

• IntelliSense，過去的程式碼提示大多都需要額外安裝套件，而在 VSCode 中是屬於內建功能，並且完全支援 commonjs 及 ES6 import，讓開發的邏輯更能跟上時代
  
  
  
• Git 功能是內建的，程式碼控管是團隊合作必要條件，透過文字編輯器整合 Git 功能，就不需要額外許多工具才能做到版本比對及簽入，讓程式碼的檢視變成開發中的習慣。
• Debug：VSCode 直接在編輯器內就能運行終端機及除錯模式，讓後端的開發時同時能加入中斷點，清楚解析後端開發中的細微變化。
  

除此之外還有 Extension：海量的擴充套件，讓你不用離開 VSCode 就能做許多事，如：

• 大量佈景主題
  
  
  
• 文字編輯器中就能直接編譯 Sass
  
  
  
• 一鍵就能建立的簡易的伺服器環境
  
  
  
• 程式碼規範檢視工具
  
  
  
• 甚至是查看 PDF、Excel 都能輕鬆達到
  
  
  
• 如果要在 VSCode 聽音樂，或是逛逛 PTT 都是沒有問題的
  
  
  
  

安裝套件

• Chinese language 中文化
• AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
• Auto Rename Tag : 讓成對的標籤自動一起修改。
• Auto Close Tag : 設定標籤自動閉合的原則。
• VS Color Picker：適用於Web開發人員的小巧智能顏色選擇器。
• vscode-icons：Visual Studio代碼的圖標。
• Bracket Pair Colorizer : 識別程式碼中的各種括號，並且標記上不同的顏色。
• Live Server:為靜態和動態頁面啟動具有實時重新加載功能的開發本地服務器。
• sass：sass/scss 編輯器
• Live Sass Compiler：sass編輯器
  
  

關閉 vscode 後，再次開啟，軟體將會中文化；其餘套件，安裝方式階相同。

註：可以一次安裝完所有套件後，再重新啟動 vscode

軟體偏好設定如圖