{
  "editor.fontFamily": "Fira Code",   // 請先下載字型，否則無效
  "editor.fontSize": 16,
  "editor.fontLigatures": true,       // 變型自設定
  "editor.tabSize": 2,
  "editor.snippetSuggestions": "top", // code snippet 提示拉到最上面
  "files.autoSave": "onFocusChange",  // 離開檔案自動存檔
  "editor.folding": false,
  "editor.lineHeight": 26,
  "editor.lineNumbers": "off",
  "editor.matchBrackets": false,
  "editor.minimap.enabled": false,    // 關閉 miniMap
  "editor.occurrencesHighlight": false,
  "editor.overviewRulerBorder": false,
  "editor.renderIndentGuides": false,
  "editor.renderLineHighlight": "none",
  "editor.scrollbar.horizontal": "hidden",
  "explorer.openEditors.visible": 0,
  "window.zoomLevel": 0,
  "workbench.colorTheme": "Subliminal",
  "workbench.editor.showIcons": false,
  "prettier.singleQuote": true,
  "html.suggest.angular1": false,
  "html.suggest.ionic": false,
  "[html]": { "editor.autoIndent": false },
  "csharp.format.enable": false,
  "breadcrumbs.enabled": true,
  "workbench.statusBar.visible": true,
  "terminal.integrated.fontFamily": "Fira Mono for Powerline", // 跟你的 iTerm2 一樣就好
  "terminal.integrated.fontSize": 14
}

以上是我的 MacOS 的設定，如果在 Windows 上我還會多做一個設定 “terminal.integrated.shell.windows”: “C:\\Program Files\\Git\\bin\\bash.exe” 讓 Windows 的 Terminal Tab 使用 GitBash，因為會顯示 Git 現在的 Branch 名稱，使用體驗上比較好。

安裝 code 指令 Install ‘code’ command in path

這個應該只有 MacOS 有需要做，Windows 安裝完應該就會有了。

如果你習慣使用 Terminal，那麼你應該會想從 Terminal「當前位置」開啟 VS Code，步驟如下

使用 Command ⌘ + Shift ⇧ + P 開啟命令列
輸入 install
按下 Shell Command: Install ‘code’ command in PATH

如何使用 ‘code’ command 開啟 VS Code

如果你的 ‘code’ 指令都已經安裝好了，那麼 MacOS 與 Windows 的方法都是一樣的，在 Terminal 中，先跳到目的資料夾，接著下 code . 就可以「從該目錄打開 VS Code」。

如何在 Windows 資料夾網址列直接開啟 VS Code？

其實 Windows 版本 VS Code 安裝的時候會有一個選項是「在右鍵選單開啟 VS Code」，一樣可以做到同一件事情，但如果你想要從網址列開啟呢？

一種方法是在網址列輸入 cmd ，用 Windows Command 開啟當前資料夾位置，再輸入 code . ，就可以開啟 VS Code，但如果我們要直接開啟 VS Code，不要多開一個 Windows Command 呢？

在網址列輸入 code.cmd . 就可以做到這件事囉！

這個方法是從 Will 保哥的文章學到的，如何在檔案總管快速開啟 cmd 命令提示字元或 Visual Studio Code

片段程式碼產生 Code snippets Generator

這邊以「個人」片段程式碼為例，如果你要使用 Project Snippet，就是放在 Project Snippet 相對應的路徑就對了！

如何開啟個人程式碼片段？

一樣先使用 Command ⌘ + Shift ⇧ + P 開啟命令列，輸入 snippet，點下「Preferences: Configure User Snippets」

再輸入要寫入的語言，以 JavaScript React 為例，選擇 javascriptreact 這個選項

如何產生 Snippets

先到 snippet generator 網站，輸入你要的 code snippet 格式，包含縮排、空格等等，這邊以 React Component 為例，react component 就是我的描述， rc 就是我的觸發快捷鍵。

placeholder 宣告使用 ${數字:名稱} ，數字表示按了 Tab 會到下一個「數字」的 placeholder，名稱是幫助你再 coding 的時候顯示給你看的名稱，同一個 placeholder 可以放多個，如上圖 ${1:componentName} 放了 5 個不同的地方，這麼一來你在我第一個輸入 ComponentName 的時候就會一次改變五個地方的值。

快捷鍵 Key Binding

如果你跟我一樣有寫 Data Flow Pattern，例如：Redux、Flux 或是 Mobx，那麼 Action 的部分常會使用到「轉大寫」的功能，這算是一種習慣，而 VS Code 本身沒有預設「轉大寫與轉小寫」的 Key Binding，我們就透過設定自己調整！

轉大寫 To UpperCase：Ctrl + U + P
轉小寫 To LowerCase：Ctrl + L + P

團隊設定檔 settings.json

有個人的設定檔，當然也有團隊設定檔，算是可以強迫使用 VS Code 開啟這個 project 的人都套用這個設定，所以好不好用見仁見智囉，而且有 editorConfig，所以這個功能算是沒有一定必要。

設定檔名稱與位置：projectRoot/.vscode/settings.json

格式就跟個人的 settings.json 一樣，通常我只設定這兩個，增加團隊的工作效率即可。

{  
  "editor.tabSize": 2,
  "editor.snippetSuggestions": "top", // code snippet 提示拉到最上面
}

常用的快捷鍵 Shortcut

開啟命令列：Command ⌘ + Shift ⇧ + P
搜尋並開啟檔案：Command ⌘ + P
關閉當前檔案：Command ⌘ + W
開啟或關閉 Terminal：Command ⌘ + `

這幾個用的熟練就已經比 80% 的人快好幾倍了，如果其他你記不起來沒關係，就用「開啟命令列」搜尋你要的指令，這個功能幾乎涵蓋了所有快捷鍵，超級方便！

文章參考 Reference

結語

類似的文章其實我在 GitHub 有寫過類似的 Repository，但剛好利用這次，整理出除了設定以外，還有一些實用的小技巧，俗話說的好「自己的習慣只有自己才知道」所以把 IDE 設定為自己習慣的模式，絕對可以增加不少開發的速度！

Hi 我是 Ryan，如果這篇文章有幫助到你，請你不吝嗇的給予我鼓掌，那將是我進步的動力！👏

另外，你知道 Medium 一篇文章拍手其實可以拍 50 下嗎？如果你願意，請賜我掌聲，謝謝！

Chih-Chien(Ryan) Hsu - ITC - Xuenn Pte Ltd | LinkedIn

View Chih-Chien(Ryan) Hsu's profile on LinkedIn, the world's largest professional community. Chih-Chien(Ryan) has 3…

www.linkedin.com

2018 VS Code 設定大補帖與小技巧

分享我常用到的 VS Code 套件與設定，以我自己為例，平時寫 React、Redux、Flux、Vue、CSS、NodeJS、C# 與正在學的 Go，也分享一些我常使用 VS Code 的用法，與如何使用 VS Code 讓團隊協作更順利。

目錄

套件 Plugins

設定 Settings 與技巧 hints

Coding Enhancement

團隊合作 Team Cooperation

版本控制 Version Control

外觀 Theme

其他 Others

我的設定 settings.json