VS Code Stylus 開發外掛設定
以下分享 VS Code 使用 stylus 進行開發的開發工具與環境設定。
由於個人喜歡比較奔放的 css 撰寫語法(沒有分號、沒有冒號、沒有大括號)，然而 VS Code 並沒有套件可以預設這麼做，因此紀錄了這一篇設定方式
Extensions
VS Code 外掛
Snippet: language-stylus
支援 stylus 程式碼片段 (snippet) 與語法著色 (syntax highlighting) 內建函數 (bulit-in function)
- Syntax highlighting
- Symbols provider
- 快速選擇內建函數、變數等
- 顏色預覽
分享常見的設定
可以改變 language-stylus 的 snippet 預設輸出的格式
- 安裝 language-stylus
- 開啟 VS Code 偏好設定
Ctrl+, 或是File>Perferences>Settings - 調整以下設定檔：
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 撰寫需求，因此需要改變其編排設定
- 安裝 Manta’s Stylus Supremacy
- 開啟 VS Code 偏好設定
Ctrl+, 或是File>Perferences>Settings - 調整以下設定檔：
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 排版
結論
其他更多設定可以到官方測試站台試用，調整成最符合自己要的編碼方式
