# VS Code Stylus Dev Tool

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

# Extensions

VS Code 外掛

## Snippet: [language-stylus]( https://marketplace.visualstudio.com/items?itemName=sysoev.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](https://marketplace.visualstudio.com/items?itemName=thisismanta.stylus-supremacy)

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

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

#### [官方設定文件](https://thisismanta.github.io/stylus-supremacy/#vscode)

### 分享常見的設定

由於 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` 排版

## 結論

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

#### [編碼設定即時預覽站台](https://thisismanta.github.io/stylus-supremacy/#demo)