按我說的來，讓 VS Code 更好用 10 倍 | VS Code 新手指南

• 2020 年 2 月 10 日
• 筆記

「

閱讀本文大概需要 5 分鐘。

」

「VS Code 寫程式碼是真好用、真爽。」

想必你也已經聽過身邊不止一個人這麼說。最近的 JS 2019 報告中，VS Code 也是以壓倒性的優勢獲勝第一，其他的編輯器只能被無情碾壓在地上摩擦……

JS 2019 報告

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

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

● 快捷鍵速查表

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

快捷鍵熟了，才能發現 VS Code 有多方便。真正的大神寫起程式碼來那是手不離鍵盤。

● 10個超好用插件

?Chinese(Simplified) Language Pack for Visual Studio Code

?‍?Microsoft

?3,505,217 下載量

安裝之後一秒漢化 VS code ，再也不用擔心看不懂英文。

?City Lights theme

?‍?Yummygum

?53,978 下載量

這是一個不錯的主題插件，不過挑選主題還是看個人，也可以在直接搜索 「theme」能得到很多主題，找到合適自己的。

?Beautify

?‍?HookyQR

?3,959,993下載量

可以放大標記，調整程式碼間距，快速格式化程式碼，可以讓雜亂的 HTML、CSS、JS程式碼瞬間變得整齊，利於他人閱讀，也方便後期維護。

?vscode-icons

?‍?VSCode Icons Team

?4,194,401 下載量

設置文件圖標，根據各種類型的文件，設置對應的文件圖標，我們看文件列表的時候，一目了然，能快速找到需要的文件（特別是文件多，類型也多的時候）。

?Image preview

?‍?Kiss Tamás

?123,791 下載量

游標懸浮在圖片路徑上時，顯示圖片預覽，這樣我們在敲程式碼的時候一下子就能知道有沒有引用了正確的圖片或圖標。

?Code Spell Checker

?‍?Street Side Software

?956,560下載量

我們日常敲程式碼很多命名都是使用英文單詞，粗心的小夥伴可能會拼錯，這個插件就是單詞拼寫錯時的拯救神器，它可以標誌錯的單詞，還可以提示單詞的正確拼法。有了它，就再也不用因為單詞拼錯找半天的 bug 了

?Live Server

?‍?Ritwick Server

?3,484,049 下載量

做前端開發的時候，我們需要打開瀏覽器進行預覽和調試頁面。這個插件就可以實現靜態、動態頁面的實時預覽，保存就能看見頁面更新，不需要手動去刷新。

?indent-rainbow

?‍?oderwat

?556,352 下載量

寫程式碼的時候，能提示我們的縮進是否到位，每步交替四種不同的顏色，沒有到位的話顏色變紅，看著程式碼整整齊齊的就很舒心。

?Rainbow Brackets

?‍?2gua

?361,077 下載量

為圓括弧，方括弧和彎曲的括弧提供彩色；相同顏色表示相同級別的括弧，孤立的右括弧以紅色突出顯示，對寫 JavaScript 的人比較有用。

?Polacode-2019

?‍?Jeff Hykin

? 4,548 下載量

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

● VS Code 新手使用教程

① 安裝 VS code

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

根據自己的電腦下載對應的版本，然後安裝即可。

② 進入 VS code

介面上分為這幾個部分，先整體了解下每個部分是做什麼的

③ 安裝 VS Code 插件

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

④ 開始寫程式碼

首先在自己的電腦新建一個文件夾

然後在 VScode 裡面打開這個文件夾，也可以按快捷鍵 (Command /Ctrl+ O)

新建文件（Command/Control + N)，要寫後綴名，VScode 才能識別出來是什麼類型的文件。

⑤ 開始運行程式碼

編輯程式碼，保存，用的是上面推薦的 Live Server 插件預覽，安裝插件後，右鍵選擇 " Open with Live Server "打開或點擊右下角的 "Go Live"。

● 寫在最後

這篇乾貨總結寫了很久，也是想把關於 VS Code 你應該知道的一切都在這一篇文章里告訴你。

如果你也感受到了 VS Code 的強大，就趕在 2020 年之前儘快用起來吧！