By

其實，如果有方法可以取代，我就不會裝太多外掛，感覺裝太多會很臃腫。例如：Prettier 程式碼排版外掛，雖然它可以自訂規則很好用，但其實只要訓練打 Code 排版風格一致， VSCode 內建的排版就夠用了，並設定存檔時排版即可。

"editor.formatOnSave": true

所以這裡只列出一些我常用的外掛與使用方式。

Quokka.js

Quokka.js

  • Quokka.js 可以拿來測試 JS 程式碼，不需要啟動瀏覽器，相當方便。相似的有 Wallaby.js。

  • 輸入完 console.log 會立即在後方顯示結果，滑鼠移動到變數名稱上會顯示型別。 Type alert 1

  • Ctrl + Shift + P ，輸入 Quokka ，選擇 New TypeScript File (透過這方式建立的檔案會自動啟動 Quokka) Ctrl + K + T

  • 現有檔案啟動 Quokka.js 的方法：Ctrl + Shift + P ，輸入 Quokka ，選擇 Start on Current File 啟動 Quokka

Node Exec

Node Exec

  • 一樣是可以拿來測試 JS 的外掛，直接在 VSCode 的終端機中顯示結果。

  • 如果電腦已安裝 Node.js ，按下 F8 可直接執行 *.js，按下 F9 可停止。

Live Server

Live Server

  • 可以 HTTP 開啟瀏覽器，更動程式碼會即時反應到畫面上。(Hot Reload)

  • 預設 port: 5500，如果要修改，可到設定修改 "liveServer.settings.port": 8080。

  • 啟動法一：點選下方的 Go Live 按鈕。 Go Live

  • 啟動法一：HTML 內點選右鍵，選擇 Open with Live Server 。 Open with Live Server

Live Sass Compiler

Live Sass Compiler

  • 即時編譯為 css，配合前面的 Live Server，如虎添翼。

  • 其他的 Sass Compiler 幾乎都需要先裝 Ruby 環境，而這款 Live Sass Compiler 不需要安裝 Ruby 即可運行。

  • 啟動法：點選下方的 Watch my Sass 按鈕。 Watch my Sass

cdnjs

cdnjs

  • Ctrl + Shift + P，輸入 cdnjs ，搜尋 JS 套件名稱、版本，並直接引入 CDN 連結。

  • 6 小時內曾經引入過的套件，可以快速選取。

Placeholder Images

Placeholder Images

  • Ctrl + Shift + P，輸入 Placeholder Images ，選擇圖片來源、輸入寬高、替代文字，可直接插入假圖片。

Icon Fonts

Icon Fonts

  • 可以快速插入字型符號，常用的 Font Awesome、Glyphicons 都包含在內。

  • 直接輸入字型符號的代號，例如 fa-check，然後按下 Tab 鍵，即可快速插入符號。

  • 配合 cdnjs ，輸入 cdnjs-fa ，然後按下 Tab 鍵，可以快速引入 Font Awesome CSS 樣式。

Vetur

  • 有用 Vue 必裝外掛。

程式語言外掛

  • Python

  • Go

參考