作者：涼皮 | 編輯：西西姐
“VS Code 寫代碼是真好用、真爽?！?/p>
想必你也已經(jīng)聽過身邊不止一個(gè)人這么說。最近的 JS 2019 報(bào)告中，VS Code 也是以壓倒性的優(yōu)勢獲勝第一，其他的編輯器只能被無情碾壓在地上摩擦……
但是呢，VS Code 并不是像 PyCharm/WebStorm 那樣開箱即用的，需要額外安裝一些插件、掌握一些快捷鍵和技巧，才能順手的用起來。
我們花了一周的時(shí)間，為你整理了可能是最全的 VS Code 新手指南，分為快捷鍵速查表、10個(gè)超好用插件、新手使用教程三部分，讓小白也能快速上手、效率加倍。
● 快捷鍵速查表
先上兩張我們整理的 VS Code 常用快捷鍵的速查表：
快捷鍵熟了，才能發(fā)現(xiàn) VS Code 有多方便。真正的大神寫起代碼來那是手不離鍵盤。
● 10個(gè)超好用插件
??Chinese(Simplified) Language Pack for?Visual Studio Code
?????Microsoft
??3,505,217 下載量
安裝之后一秒漢化 VS code ，再也不用擔(dān)心看不懂英文。
??City Lights theme
?????Yummygum
??53,978?下載量
這是一個(gè)不錯(cuò)的主題插件，不過挑選主題還是看個(gè)人，也可以在直接搜索 “theme”能得到很多主題，找到合適自己的。
??Beautify
?????HookyQR
??3,959,993下載量
可以放大標(biāo)記，調(diào)整代碼間距，快速格式化代碼，可以讓雜亂的 HTML、CSS、JS代碼瞬間變得整齊，利于他人閱讀，也方便后期維護(hù)。
??vscode-icons
?????VSCode Icons Team
??4,194,401 下載量
設(shè)置文件圖標(biāo)，根據(jù)各種類型的文件，設(shè)置對(duì)應(yīng)的文件圖標(biāo)，我們看文件列表的時(shí)候，一目了然，能快速找到需要的文件（特別是文件多，類型也多的時(shí)候）。
??Image preview
?????Kiss Tamás
??123,791?下載量
光標(biāo)懸浮在圖片路徑上時(shí)，顯示圖片預(yù)覽，這樣我們在敲代碼的時(shí)候一下子就能知道有沒有引用了正確的圖片或圖標(biāo)。
??Code Spell Checker
?????Street Side Software
??956,560下載量
我們?nèi)粘Ｇ么a很多命名都是使用英文單詞，粗心的小伙伴可能會(huì)拼錯(cuò)，這個(gè)插件就是單詞拼寫錯(cuò)時(shí)的拯救神器，它可以標(biāo)志錯(cuò)的單詞，還可以提示單詞的正確拼法。有了它，就再也不用因?yàn)閱卧~拼錯(cuò)找半天的 bug 了
??Live Server
?????Ritwick Server
??3,484,049?下載量
做前端開發(fā)的時(shí)候，我們需要打開瀏覽器進(jìn)行預(yù)覽和調(diào)試頁面。這個(gè)插件就可以實(shí)現(xiàn)靜態(tài)、動(dòng)態(tài)頁面的實(shí)時(shí)預(yù)覽，保存就能看見頁面更新，不需要手動(dòng)去刷新。
??indent-rainbow
?????oderwat
??556,352?下載量
寫代碼的時(shí)候，能提示我們的縮進(jìn)是否到位，每步交替四種不同的顏色，沒有到位的話顏色變紅，看著代碼整整齊齊的就很舒心。
??Rainbow Brackets
?????2gua
??361,077?下載量
為圓括號(hào)，方括號(hào)和彎曲的括號(hào)提供彩色；相同顏色表示相同級(jí)別的括號(hào)，孤立的右括號(hào)以紅色突出顯示，對(duì)寫 JavaScript 的人比較有用。
??Polacode-2019
?????Jeff Hykin
?? 4,548?下載量
可以把代碼保存成美觀的圖片，主題不同，代碼配色方案也不同，也可以自己設(shè)置邊框顏色、大小、陰影，在教程或者文檔中提供代碼示例時(shí)挺有用的。
● VS Code 新手使用教程
① 安裝 VS code
VS Code 官方下載地址：https://code.visualstudio.com
根據(jù)自己的電腦下載對(duì)應(yīng)的版本，然后安裝即可。
② 進(jìn)入 VS code
界面上分為這幾個(gè)部分，先整體了解下每個(gè)部分是做什么的
③ 安裝 VS Code 插件
上面提到的超好用的插件，在這里就可以安裝。
④ 開始寫代碼
首先在自己的電腦新建一個(gè)文件夾
然后在 VScode 里面打開這個(gè)文件夾，也可以按快捷鍵 (Command /Ctrl+ O)
新建文件（Command/Control?+ N)，要寫后綴名，VScode 才能識(shí)別出來是什么類型的文件。
⑤ 開始運(yùn)行代碼
編輯代碼，保存，用的是上面推薦的 Live Server 插件預(yù)覽，安裝插件后，右鍵選擇 " Open with Live Server "打開或點(diǎn)擊右下角的 "Go Live"。
●?寫在最后
這篇干貨總結(jié)寫了很久，也是想把關(guān)于 VS Code 你應(yīng)該知道的一切都在這一篇文章里告訴你。
如果你也感受到了 VS Code 的強(qiáng)大，就趕在 2020 年之前盡快用起來吧！
如果你身邊也有使用 ?VS Code 的小伙伴，歡迎把這篇文章分享給 TA，哪怕對(duì)你們有一點(diǎn)點(diǎn)幫助，我就很開心啦 ??
如果需要快捷鍵原圖，可以添加侯爵老師的微信回復(fù)「快捷鍵」獲取。侯爵老師的個(gè)人微信號(hào)是 muggle_ok
