# 1. Visual Studio Code 環境設定

### 下載 Visual Studio Code
[官方載點](https://code.visualstudio.com/)
到官網之後別急著下載，如果你是 Windows 作業系統，按一下箭頭點選 Other downloads


接著選取Windows下方的 System Installer，選擇系統類型，大多數應該是 64bit 版本。
> 我的電腦按右鍵-->內容 ，應該就可叫出系統資訊看自己是64bit或32bit，至於他們有甚麼差別我就沒特別研究。


Mac就比較簡單，也沒有其他選項了，直接下載 Mac

### 安裝
不用猶豫一路按到底，或是過程中可以加入桌面捷徑。

>如果你是下載了User Installer的版本可能會出現以下警告，目前知道的差異似乎不大，[版本區別說明](https://www.twblogs.net/a/5bf32842bd9eee040518a2f9)，總之為了防止任何疑難雜症出現，還是統一安裝 System Installer 這個版本吧！


### 安裝外掛
左方工具列最下面一個就是外掛區，上面輸入關鍵字就可以找到相對應的外掛，按下Install就會安裝完成。（偶爾會發現外掛失效的狀況可以關閉VSCode再開啟試試。）


* Chinese (Traditional) Language Pack for Visual Studio Code
安裝完會提示你重新開啟VSCode，重開就會變成中文版了。如果沒有的話，[參考官方說明文件](https://code.visualstudio.com/docs/getstarted/locales)。
* cdnjs
未來引入外掛的好幫手
* Live Server
在本地端啟用伺服器預覽網站使用
* Live Sass Compiler
編譯Sass/S

* Prettier - Code formatter
協助將你的程式碼排整齊。
> Window : Shift + Alt + F
> Mac : Shift + Commend + F
* indent-rainbow
顯示縮排顏色的小工具
* vscode-icons
讓資料夾和檔案有漂亮的 icons
* One Dark (Sublime Babel) or One Dark Pro
主題顏色，還有很多外掛可自由選擇。
變更方式：檔案-->喜好設定-->色彩佈景主題，即可選擇主題。
* GlassIt-VSC
整個VSCode視窗透明度 Ctrl + Alt + ZorC

### 開啟使用者喜好設定（json）
`Ctrl + Shift + P`，後輸入setting，選擇「喜好設定:開啟設定(JSON)」，完成外掛安裝後，我們仍需要針對這些外掛做一些(加入)偏好設定。將相對應的內容複製貼入josn 檔內即可。

* 老人模式，全部視窗字體放大

"window.zoomLevel": 1,　//0.8 or 2 etc...

* 編輯器字體

"editor.fontFamily": "'Source Code Pro'",

* Coding Style 提示線

"editor.rulers": [80,120],

* LiveServer

// 一般來說我們常用8080
"liveServer.settings.port": 8080,
// 不用每次開起LiveServer就跳出通知
"liveServer.settings.donotShowInfoMsg": true,

* LiveSassCompiler

// 自訂編譯後產出的css檔案放置路徑
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/assets/style"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/assets/style"
    }
],
// 以下資料夾內的檔案不要編譯
"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],
// 不要產出 map 檔
"liveSassCompile.settings.generateMap": false,
// 協助編譯兼容99%瀏覽器，且向下相容兩個版本
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],