簡介
VSCode是微軟出的一款輕量級代碼編輯器，免費而且功能強大，對JavaScript和NodeJS的支持非常好，自帶很多功能，例如代碼格式化，代碼智能提示補全、Emmet插件等。VSCode推薦一個項目以文件夾的方式打開。
一、設置首選項
下載安裝完成后，打開編輯器，首先要設置主題、字體大小等。
1. 設置主題
文件→首選項→顏色主題
2. 設置字體大小
文件→首選項→設置，打開了一個setting.json文件，將左邊的設置復制到右邊進行覆蓋生效，所有編輯器的設置都在這里修改。 
二、常用插件Emmet插件
RN常用插件
1. Open-In-Browser
由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項。
2. Quokka
Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用。
3. Faker
使用流行的 JavaScript 庫 – Faker，能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，並且每個類別還包含了各種子類別，你可以根據自身的需求來使用這些數據。
4. CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。
5. HTML Boilerplate
通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，即可生成干凈的文檔結構。
6. Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那么還有個 Prettier – Eslint 插件，你可不要錯過咯！
7. Color Info
這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。
8. SVG Viewer
此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。
9. TODO Highlight
這個插件能夠在你的代碼中標記出所有的 TODO 注釋，以便更容易追蹤任何未完成的業務。在默認的情況下，它會查找 TODO 和 FIXME 關鍵字。當然，你也可以添加自定義表達式。
10. Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
11. Minify
這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。
12. Change Case
雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峰命名、下划線分隔命名，snake_case 命名以及 CONST_CAS 命名等。
13. Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上，並高亮所有的匹配項。
14. Language and Framework Packs
VSCode 默認支持大量的主流編程語言，但如果你所使用的編程語言不包括在內，也可以通過下載擴展包來自動添加。同時，你還可以添加一些像 React Native 與 Vue 的相關 Web 開發插件包。
15. Themes 主題
16.vscode-Path Intellisense------文件路徑提示。
17.vscode-JS-CSS-HTML Formatting------js-css-html格式化。
18.vscode-csscomb------css屬性排序。（sublime text也有）
19.vscode-Vue 2 Snippets------vue2的語法高亮，語法提示。
最新版集成了Emmet 2.0，在文件→首選項→設置可以開啟或者關閉功能 
三、快捷鍵
所有快捷鍵設置：文件→首選項→鍵盤快捷方式
1. 在當前行中間換行到下一行：ctrl+enter
2. 當光標點擊到某一行時，默認選中全行，可以直接復制剪切
3. 直接刪除某一行：shift+delete或者ctrl+shift+k
4. 多行光標選擇：alt+鼠標左鍵
5. 自動生成html結構和meta聲明：首先輸入“!”，然后按tab鍵
6. 標簽自動補全：tab鍵
7. 折疊所有代碼：ctrl+k、ctrl+0
8. 拆分編輯器：ctrl+\
查找框右邊的3個參數分別為：區分大小寫，全字匹配，使用正則 
9. 跳轉行號：ctrl+G
10. 添加函數注釋：在函數上方輸入“/**”，然后點擊enter 
11. 格式化：alt+shift+f
12. 注釋：ctrl+/
13. 全部保存：ctrl+k, 然后只按s一個鍵
14. 向上移動一行：alt+↑
15. 向下移動一行：alt+↓
16. 向上復制一行：alt+shift+↑
17. 向下復制一行：alt+shift+↓
18. 查找：ctrl+F
19. 替換：ctrl+H
20. 文件中查找：ctrl+shift+f
可以在打開的文件夾中搜索所有文件內容
21. 文件中替換：ctrl+shift+h
22. 轉到定義：F12
23. 轉到實現：ctrl+F12
24. 打開文件夾：ctrl+k, ctrl+o
25. 關閉文件夾：ctrl+k, 然后單按一個f
26. 選中一段代碼，通過“ctrl+[”可以左移，“ctrl+]”可以右移
四、vscode運行別人開源項目方法
