# Allen's VScode setting & extensions

### 01.bracket pair colorizer2 settings

讓括號有顏色方便查找的工具，以下為偷來的設定，直接貼到 setting 即可。

{
  "bracket-pair-colorizer-2.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue",
    "Salmon",
    "LawnGreen",
    "DarkOrange",
    "Cornsilk"
  ],
  "bracket-pair-colorizer-2.highlightActiveScope": true,
  "bracket-pair-colorizer-2.activeScopeCSS": [
    "borderStyle : solid",
    "borderWidth : 1px",
    "borderColor : {color}",
    "opacity: 0.5"
  ],
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.showBracketsInRuler": true,
  "bracket-pair-colorizer-2.scopeLineRelativePosition":true,
  "bracket-pair-colorizer-2.scopeLineCSS": [
    "borderStyle : solid",
    "borderWidth : 1px",
    "borderColor : {color}",
    "opacity: 0.5"
  ]
}

---

### 02.Live Sass Compiler settings

* savePath : 編譯後儲存的路徑預設是 null 會直接跟 SCSS 同目錄
* <code>/</code> : 相對於根目錄 ex: <code>/content/css</code>
* <code>~</code> : 相對於每個 SCSS 檔 ex: <code>~/.\./content/css</code>

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded", // 原始未壓縮
      "extensionName": ".css", // 編譯後副檔名
      "savePath": "/css" // 存取的路徑位置
    },
    {
      "format": "compressed", // 壓縮（體積小，專案上線用）
      "extensionName": ".min.css",
      "savePath": "/style"
    }
  ],
  // 不編譯特定檔案
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**", // 所有資料夾中的 node_modules 內都不編譯
    ".vscode/**" // .vscode 內都不編譯
  ],
  // 是否產生 map 檔(對照行數用)
  "liveSassCompile.settings.generateMap": false,
  // 前綴設定
  "liveSassCompile.settings.autoprefix": [
    "> 1%", // 瀏覽器市佔率
    "last 2 versions" // 支援最新的版本數
  ]
}