相關(guān)推薦：《vscode基礎(chǔ)教程》

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供東湖網(wǎng)站建設(shè)、東湖做網(wǎng)站、東湖網(wǎng)站設(shè)計(jì)、東湖網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、東湖企業(yè)網(wǎng)站模板建站服務(wù)，10余年東湖做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

“VS Code 寫(xiě)代碼是真好用、真爽?！?/p>

想必你也已經(jīng)聽(tīng)過(guò)身邊不止一個(gè)人這么說(shuō)。最近的 JS 2019 報(bào)告中，VS Code 也是以壓倒性的優(yōu)勢(shì)獲勝第一，其他的編輯器只能被無(wú)情碾壓在地上摩擦……

但是呢，VS Code 并不是像 PyCharm/WebStorm 那樣開(kāi)箱即用的，需要額外安裝一些插件、掌握一些快捷鍵和技巧，才能順手的用起來(lái)。

我們花了一周的時(shí)間，為你整理了可能是最全的 VS Code 新手指南，分為快捷鍵速查表、10個(gè)超好用插件、新手使用教程三部分，讓小白也能快速上手、效率加倍。

● 快捷鍵速查表

先上兩張我們整理的 VS Code 常用快捷鍵的速查表：

快捷鍵用熟了，才能發(fā)現(xiàn) VS Code 有多方便。真正的大神寫(xiě)起代碼來(lái)那是手不離鍵盤(pán)。

● 10個(gè)超好用插件

Chinese(Simplified) Language Pack for Visual Studio Code^[1]

? Microsoft

3,358,698 下載量

安裝之后一秒漢化 VS code ，再也不用擔(dān)心看不懂英文。

City Lights theme^[2]

? Yummygum

54,054 下載量

這是一個(gè)不錯(cuò)的主題插件，不過(guò)挑選主題還是看個(gè)人，也可以在直接搜索 “theme”能得到很多主題，找到合適自己的。

Beautify^[3]

? HookyQR

3,998,071 下載量

可以放大標(biāo)記，調(diào)整代碼間距，快速格式化代碼，可以讓雜亂的 HTML、CSS、JS代碼瞬間變得整齊，利于他人閱讀，也方便后期維護(hù)。

vscode-icons^[4]

? VSCode Icons Team

4,237,487 下載量

設(shè)置文件圖標(biāo)，根據(jù)各種類型的文件，設(shè)置對(duì)應(yīng)的文件圖標(biāo)，我們看文件列表的時(shí)候，一目了然，能快速找到需要的文件（特別是文件多，類型也多的時(shí)候）。

Image preview^[5]

? Kiss Tamás

123,990下載量

光標(biāo)懸浮在圖片路徑上時(shí)，顯示圖片預(yù)覽，這樣我們?cè)谇么a的時(shí)候一下子就能知道有沒(méi)有引用了正確的圖片或圖標(biāo)。

Code Spell Checker^[6]

? Street Side Software

970,955下載量

我們?nèi)粘Ｇ么a很多命名都是使用英文單詞，粗心的小伙伴可能會(huì)拼錯(cuò)，這個(gè)插件就是單詞拼寫(xiě)錯(cuò)時(shí)的拯救神器，它可以標(biāo)志錯(cuò)的單詞，還可以提示單詞的正確拼法。有了它，就再也不用因?yàn)閱卧~拼錯(cuò)找半天的 bug 了

Live Server^[7]

? Ritwick Server

3,551,236下載量

做前端開(kāi)發(fā)的時(shí)候，我們需要打開(kāi)瀏覽器進(jìn)行預(yù)覽和調(diào)試頁(yè)面。這個(gè)插件就可以實(shí)現(xiàn)靜態(tài)、動(dòng)態(tài)頁(yè)面的實(shí)時(shí)預(yù)覽，保存就能看見(jiàn)頁(yè)面更新，不需要手動(dòng)去刷新。

indent-rainbow^[8]

? oderwat

567,061下載量

寫(xiě)代碼的時(shí)候，能提示我們的縮進(jìn)是否到位，每步交替四種不同的顏色，沒(méi)有到位的話顏色變紅，看著代碼整整齊齊的就很舒心。

Rainbow Brackets^[9]

? 2gua

367,290下載量

為圓括號(hào)，方括號(hào)和彎曲的括號(hào)提供彩色；相同顏色表示相同級(jí)別的括號(hào)，孤立的右括號(hào)以紅色突出顯示，對(duì)寫(xiě) JavaScript 的人比較有用。

Polacode-2019^[10]

? Jeff Hykin

4,704下載量

可以把代碼保存成美觀的圖片，主題不同，代碼配色方案也不同，也可以自己設(shè)置邊框顏色、大小、陰影，在教程或者文檔中提供代碼示例時(shí)挺有用的。

● VS Code 新手使用教程

① 安裝 VS code

VS Code 官方下載地址：https://code.visualstudio.com

根據(jù)自己的電腦下載對(duì)應(yīng)的版本，然后安裝即可。

② 進(jìn)入 VS code

界面上分為這幾個(gè)部分，先整體了解下每個(gè)部分是做什么的

③ 安裝 VS Code 插件

上面提到的超好用的插件，在這里就可以安裝。

④ 開(kāi)始寫(xiě)代碼

首先在自己的電腦新建一個(gè)文件夾

然后在 VScode 里面打開(kāi)這個(gè)文件夾，也可以按快捷鍵 (Command /Ctrl+ O)

新建文件（Command/Control + N)，要寫(xiě)后綴名，VScode 才能識(shí)別出來(lái)是什么類型的文件。

⑤ 開(kāi)始運(yùn)行代碼

編輯代碼，保存，用的是上面推薦的 Live Server 插件預(yù)覽，安裝插件后，右鍵選擇 " Open with Live Server "打開(kāi)或點(diǎn)擊右下角的 "Go Live"。

● 寫(xiě)在最后

這篇干貨總結(jié)寫(xiě)了很久，也是想把關(guān)于 VS Code 你應(yīng)該知道的一切都在這一篇文章里告訴你。

如果你也感受到了 VS Code 的強(qiáng)大，就趕在 2020 年之前盡快用起來(lái)吧！

哪怕對(duì)你們有一點(diǎn)點(diǎn)幫助，我就很開(kāi)心啦

參考

^漢化包插件地址 https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

^City Lights theme https://marketplace.visualstudio.com/items?itemName=Yummygum.city-lights-theme

^Beautify https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

^vscode-icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

^Image preview https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

^Code Spell Checker https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

^Live Server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

^indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

^Rainbow Brackets https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

^Polacode https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode-2019

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)！！

名稱欄目：讓VSCode更好用10倍的小技巧（新手指南）
文章分享：http://www.rwnh.cn/article48/cppjhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、標(biāo)簽優(yōu)化、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)