VS Code Stylus Dev Tool

以下分享 VS Code 使用 stylus 進行開發的開發工具與環境設定

Extensions

VS Code 外掛

Snippet: language-stylus

支援 stylus 程式碼片段 (snippet) 與語法著色 (syntax highlighting) 內建函數 (bulit-in function)

• Syntax highlighting
• Symbols provider
• 快速選擇內建函數、變數等
• 顏色預覽

分享常見的設定

可以改變 language-stylus 的 snippet 預設輸出的格式

1. 安裝 language-stylus
2. 開啟 VS Code 偏好設定 Ctrl+, 或是 File>Perferences>Settings
3. 調整以下設定檔：

Use Separator

搜尋 Language Stylus: Use Separator

自動完成 css 屬性時，是否在屬性與數值之間自動補上 : 符號，例如：

輸入 bgc

background-color: #fff

建議

將其改為 false (不要打勾)，自動完成輸入後，將不會出現 : 符號

Formatter: Manta's Stylus Supremacy

支援 stylus 自動排版，但請注意 stylus 的排版非常自由，在 CSS 沒有 { } 大括號識別區塊時，會使用 空白 或是 tab 來進行識別。

[重要] 若要使用自動排版，還是要有基本的識別符號，才可做出正確的自動排版

官方設定文件

分享常見的設定

由於 Manta's Stylus Supremacy 內建行為是將 stylus 直接改成標準的 css 排版，不符合 stylus 撰寫需求，因此需要改變其編排設定

1. 安裝 Manta's Stylus Supremacy
2. 開啟 VS Code 偏好設定 Ctrl+, 或是 File>Perferences>Settings
3. 調整以下設定檔：

Insert Colons

搜尋 Stylus Supremacy: Insert Colons

是否要在 CSS 屬性與數字中間自動補上 : 符號，例如：

編碼前

.class1
    padding 1px

編碼後

.class1
    padding: 1px

建議

將其改為 false (不要打勾) 可以去除所有 CSS 屬性後面接續的 : 符號

Insert Semicolons

搜尋 Stylus Supremacy: Insert Semicolons

是否要在 CSS 屬性結尾自動補上 ;，例如：

編碼前

.class1
    padding 1px

編碼後

.class1
    padding 1px;

建議

將其改為 false (不要打勾) 可以去除所有 CSS 屬性最後的 ; 符號

Insert Braces

搜尋 Stylus Supremacy: Insert Braces

是否要使用 { } 大括號來識別區塊，如果不要則會使用 tab 來排版區分，例如：

編碼前

.class1
    padding: 1px;

編碼後

.class1 {
    padding:1px;
}

建議

將其改為 false (不要打勾) 可以去除所有 { } 符號，並用 tab 排版

結論

其他更多設定可以到官方測試站台試用，調整成最符合自己要的編碼方式

編碼設定即時預覽站台