推薦 Visual Studio Code 前端網頁設計的擴充套件（延伸模組 Extensions）

Chinese (Traditional) Language Pack for Visual Studio Code

BJ4 微軟官方發佈的正體（繁體）中文語言包

ESLint

提供 JavaScript 標準化語法檢查工具，安裝此套件後還需要在專案資料夾下使用終端機執行 npm install eslint 或直接全域安裝 npm install -g eslint 完成後需要在專案資料夾下建立一個 .eslintrc.js 的規範設定檔（可參考官方文件設定，或直接下載我的 .eslintrc.js 設定檔），或使用 eslint --init 指令來進行初始化。如果不能執行 npm 指令，需要先安裝 Node.js 方能執行。設定檔中可以直接載入 {"extends": "eslint:recommended"} 即可使用建議的規則設定。

在開發程式的時候，通常會調用到全域變數，例如使用 Vue 的時候 ESLint 會提示 no-undef 或使用其他文件的變數，發生 no-unused-vars 的錯誤，這是時候可以在設定當中定義 "globals": { "Vue": "readonly" } 其中 "readonly" 代表只能用來讀取，如果是自訂型需要重新定義變數，則可以使用 "writable"，例如 "globals": { "_custom": "writable" }

另外在 ESLint 2.1.10 版本後，首次運行套件需要批准，你會在狀態欄上看見 ESLint 禁用狀態禁止的 ESLINT 的符號，點擊後會開啟對話窗，能擇「Allow Everywhere」所有專案都會運行。

Html CSS Support

在你的 Html 檔案中編輯 id 或 class 標籤屬性會出現連結對應的 css 或 scss 的智能提示，也可以直接按下 CTRL + 空白鍵 (space) 顯示提示。

HtmlLint

提供 Html 標準化語法檢查工具，可以在根目錄下建立 .htmlhintrc 自訂規範檔案（官方說明文件）或者直接下載我的 .htmlhintrc 設定檔

HTML End Tag Labels

會在 Html 標籤結尾處附加 id 與 class 的名稱方便辨識，而且他不是註解所以不會增加檔案容量

htmltagwrap

可以使用快速鍵 Alt + W 包覆一個 html 標籤在任何內容上。包覆的標籤可以自訂，預設為 <p> 標籤，我會把他設定成常用的 <div> 標籤

Image preview

在任何有圖片網址的行數前方，會顯示預覽小圖方便確認！
如果滑鼠移到網址上方也會出現泡泡小窗來預覽圖片

JS & CSS Minifier (Minify)

簡單一鍵完成 JavsScript 與 CSS 檔最小化，在狀態列上找到「Minify」的按鈕執行即可。

Live Server

可運行根目錄路徑的網頁，並可實時編輯。使用狀態欄上的 Go Live Go Live 按鈕或快捷鍵 ALT+L, O 啟動，關閉則是 ALT+L, C

Live Sass Compiler

Live Sass Compiler 與 Live Server 為相同作者，安裝完套件後按下狀態欄上的 Watch Sass 按鈕，所有專案下的 SASS/SCSS 檔案就會自動編譯成 CSS 並可實時編輯與編譯，能夠自行設定不同檔案輸出不同格式，例如 min.css 的 compressed 壓縮模式。設定方式如下，請添加於設定檔 settings.json 中，詳細設定方式請見說明文件

"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": null
    }
]

如果不想使用即時監控的方式，可以按下 F1 或 Ctrl+Shift+P 啟用命令欄輸入 Live Sass: Compile Sass - Without Watch Mode 執行單次編譯

如果只想要編譯當前檔案，可以按下 F1 或 Ctrl+Shift+P 啟用命令欄輸入 Live Sass: Compile Current Sass File 來編譯單個檔案。以上這兩種命令欄，可以點擊在指令右側的齒輪圖示，進行快捷鍵設定！

SCSS IntelliSense

编寫或滑鼠移入自定義的 variables, mixin, functions 會出現智能提示，也能使用移至定義 (F12) 功能，方便修改定義的 variables, mixin, functions。

stylelint

針對 CSS/SCSS/Less 的 Lint 標準化語法檢查工具。安裝完後需要在專案資料夾下建立一個 .stylelintrc.json 設定檔，並且在檔案中寫入以下語法

{ "extends": "stylelint-config-standard" }

然後使用終端機輸入指令 npm install --save-dev stylelint stylelint-config-standard 安裝由業界制定出來的 CSS 語法準則，如果你是要針對 SCSS 可在設定檔(.stylelintrc.json)當中的 extends 加入 "stylelint-config-standard-scss" 與前面加入的 CSS 準則 "stylelint-config-standard" 合併設定後使用陣列形式寫入，範例如下：

{ "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"] }

同樣需要在終端機輸入以下安裝指令 npm install --save-dev stylelint stylelint-config-standard-scss 至此即可開始使用，但還可以再安裝使用插件 plugins 來添加更多的規則，例如 "stylelint-scss" 加強 nesting 嵌套化的顯示以及 @-rules 開頭規則標準化；還有 "stylelint-order" 讓語法有統一的編寫順序，強化可讀性！

另外設定檔中，可透過 "rules" 修改規則，例如縮排想要從預設的 2 格空白改成 4 格空白，那就加入 "indentation": 4 至規則設定中，範例如下：

{ "rules": { "indentation": 4 } }

還要修改其他規則，可前往 stylelint 官網查詢！或者直接下載我的 .stylelintrc.json 設定檔

Tabnine Autocomplete AI

Tabnine 利用了 AI 人工智能技術提供語法提示，有效提升編寫程式碼的速度，而且支援多種程式語言包含：JavaScript，Python，TypeScript，PHP，C / C ++，HTML / CSS，Go，Java，Ruby，C＃，Rust，SQL，Bash，Kotlin，Julia，Lua，OCaml，Perl，Haskell，和 React 。需要註冊成會員才能使用，但免費版本每次提供兩條語法的提示，已經是相當足夠！

安裝完後，點擊左下狀態欄的 tabnine 進行設定，別忘了勾選 Enanble Deep Completions Cloud 啟用雲端深度運算提示功能哦！

Turbo Console Log

選擇變數後使用快捷鍵 ctrl + alt + L 就可以快速填上 Console.log() 並且預設會有檔案名稱以及行數，偵錯必備工具！

MixHub 🪄

搜尋此網誌