Visual Studio Code 環境設定

下載 Visual Studio Code

官方載點
到官網之後別急著下載，如果你是 Windows 作業系統，按一下箭頭點選 Other downloads

接著選取Windows下方的 System Installer，選擇系統類型，大多數應該是 64bit 版本。

我的電腦按右鍵–>內容 ，應該就可叫出系統資訊看自己是64bit或32bit，至於他們有甚麼差別我就沒特別研究。

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

安裝

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

如果你是下載了 User Installer 的版本可能會出現以下警告，目前知道的差異似乎不大，版本區別說明，總之為了防止任何疑難雜症出現，還是統一安裝 System Installer 這個版本吧！

安裝外掛

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

• Chinese (Traditional) Language Pack for Visual Studio Code
  安裝完會提示你重新開啟VSCode，重開就會變成中文版了。如果沒有的話，參考官方說明文件 。
• cdnjs
  未來引入外掛的好幫手
• Live Server
  在本地端啟用伺服器預覽網站使用
• Live Sass Compiler
  編譯Sass/Scss
• 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)」，完成外掛安裝後，我們仍需要針對這些外掛做一些偏好設定。

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

"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"
]