2019年8月26日 星期一

VS Code Stylus 開發外掛設定

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 預設輸出的格式
  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 排版

結論

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

編碼設定即時預覽站台

沒有留言:

張貼留言