其實就如同java一樣，Node可以選擇的IDE不止一種，常見的比如webstorm，Visual Studio Code，其實都可以應付日常的工作需求，今天我要介紹的IDE，其實就是Visual Studio Code(接下來簡稱vs code)。怎麼評價vs code呢？其實vs code優點很多，它的文件目錄管理非常強大，還可以之定義配置，我們更改代碼後可以自動保存，不用擔心代碼丟失，而且vs code集成Git,這對於我們版本控制可以說省了很多功夫，這也是我很喜歡這個編譯器的原因。而且，vs code智能提示功能很強大，還自帶強大的調試功能，這解決了Node缺少調試工具的不足。像大多數 IDE 一樣，VSCode 也有一個擴展和主題市場，包含了數以千計質量不同的插件。爲了幫助大家挑選出值得下載的插件，我會針對性的講述一些實用、有趣的插件與大家分享。我們在IDE中集成插件，大幅度的提升了我們的開發速度。接下來，我們慢慢來說下這個編譯器如何去使用。
Visual Studio Code安裝
首先進入vs code的官方網站：https://code.visualstudio.com
其實默認就是window系統 x64版本的，直接進行下載，然後一直next安裝直到finish結束就可以，因爲vs code默認會自己將bin路徑加到path環境變量中，所以所以省去了配置環境變量的步驟。
安裝成功後進入vs code主界面，vs code 默認語言是英文，如果想將IDE漢化成中文需要安裝插件，接下來我們就來說說在vs code中如何進行插件的安裝。
必備插件安裝
在編譯器的右側側邊欄最下方的按鈕其實就是進行插件安裝，點擊這個按鈕，可以進入圖二的界面，將插件名稱輸入到搜索框，然後點擊安裝，安裝成功後重啓IDE我們的插件就可以成功生效了。那我們進行Node開發需要用到什麼必備插件呢？
1.Chinese Language Pack for Visual Stidio Code
第一個必備插件自然是vs code的中文簡體包，新手一開始不適應vs code，建議可以先行使用中文版。
2.open-in-browser
由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項。
3.vscode-icons
好的代碼始於顏值，vscode-icons是能夠讓右側文件夾與不同文件都顯示圖標。
4.Auto Rename Tag
當HTML標籤被修改其中之一時，另一半標籤會跟着被修改。
5.beautify
良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS代碼,比內置格式化好用
6.Quokka
Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變量的函數和計算值結果。
7.CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 id定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會跳轉到你樣式定義的地方。
8.HTML BoilerPlate
通過使用 HTML 模版插件，你只需在空文件中輸入 html，並按 Tab 鍵，即可自動生成乾淨的HTML文檔結構。
9.Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化爲統一的代碼樣式。
10.Themes
在衆多的實用插件中，豈能少了漂亮的主題呢？你每天都會與你的 VSCode 編輯器進行“親密的接觸”，爲何不把它打扮得更漂亮些呢？這個插件可以更改頁面主題。
11.Auto Close Tag
匹配標籤，關閉對應的標籤。很實用【適用於HTML/XML】。
12.Path AutoComplete
路徑自動補全，這個是必須插件之一。
13.HTML CSS Support
讓 html 標籤上寫class 智能提示當前項目所支持的樣式。新版已經支持scss文件檢索。
我們工作必須的插件基本都包括在上面了，當然如果你要使用vue，react之類的js框架，vs code當然也有類似的插件支持，在這裏我就不詳細述說了。
常用快捷鍵
打開一個新窗口：
Ctrl+Shift+N關閉窗口：
Ctrl+Shift+W新建文件
Ctrl+N文件之間切換
Ctrl+TabCtrl+C、Ctrl+V複製或剪切當前行/當前選中內容代碼格式化：
Shift+Alt+F上下移動一行：
Alt+Up或Alt+Down向上向下複製一行：
Shift+Alt+Up或Shift+Alt+Down在當前行下方插入一行
Ctrl+Enter在當前行上方插入一行
Ctrl+Shift+Enter移動到行首： Home
移動到行尾： End
移動到文件結尾：
Ctrl+End移動到文件開頭：
Ctrl+Home移動到定義處： F12
定義處縮略圖：只看一眼而不跳轉過去
Alt+F12找到所有的引用：
Shift+F12同時修改本文件中所有匹配的：
Ctrl+F12重命名：比如要修改一個方法名，可以選中後按
F2，輸入新名字，回車，則所有該方法的引用也都同步更新了跳轉到下一個 Error 或 Warning：當有多個錯誤時可以按
F8逐個跳轉查找
Ctrl+F查找替換
Ctrl+H整個文件夾中查找
Ctrl+Shift+F
快捷鍵我這裏只介紹一些我們經常被使用的，vs code快捷鍵功能非常齊全，如果想了解可以訪問https://blog.csdn.net/p358278505/article/details/74221214，這裏面介紹了目前vs code包含的大部分快捷鍵。
到這裏我們對於vs code的 配置就差不多告一段落了，就可以真正開始vs code的學習之旅了。下一篇再見!
本文分享自微信公衆號 - 程序猿周先森（zhanyue_org）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。