安裝

從官網(wǎng)下載安裝包

安裝時(shí)把以下選項(xiàng)選中：

使用

1. 找個(gè)地方新建一個(gè)目錄（目錄名不要中文），假設(shè)目錄名為 vs-demo
2. 右鍵點(diǎn)擊該目錄，open with code
3. 使用 Ctrl+Shift+E 打開資源管理器，在 vs-demo 目錄里新建 HTML 文件，文件名為 index.html
4. 在 index.html 依次輸入：英文感嘆號(hào)、<kbd>回車</kbd> 鍵，即可看到一個(gè)完整的 HTML 頁面
   • 由于 vscode 時(shí)常更新，如果 回車 鍵不行，就試試 Tab 鍵

這種快捷寫法叫做 Emmet，目前所有的前端編輯器都支持 Emmet。換句話說，如果一個(gè)編輯器沒有默認(rèn)支持 Emmet，你就可以卸載這款編輯器了（比如 Sublime Text 括弧笑）。

關(guān)于 Emmet 的更多快捷寫法，見：

1. 官網(wǎng)的視頻介紹
2. Emmet 作弊表

配置

VSCode 的配置方式就寫編輯一個(gè)配置文件，打開「文件 - 首選項(xiàng) - 設(shè)置」，對應(yīng)快捷鍵為 Ctrl + ,

左側(cè)為系統(tǒng)默認(rèn)配置項(xiàng)，右側(cè)為你要覆蓋的配置項(xiàng)。把你要修改的項(xiàng)從左邊拷貝到右邊，然后保存，即可生效。

設(shè)置字體與字號(hào)

在右側(cè)文件中添加一行（注意末尾要有英文逗號(hào)）

"editor.fontSize": 18,

保存，字號(hào)就變大了。

設(shè)置字體也是類似，添加

"editor.fontFamily": "Consolas, 'Courier New', monospace",

即可將字體設(shè)置為你想要的。這里推薦「10大最適合編程的字體推薦下載」，夠你玩一上午了。我用的編程字體一般是 Source Code Pro 和 M Plus 這兩款。

其實(shí) VSCode 默認(rèn)的配置就挺好的。

插件安裝

VSCode 自帶 Emmet、Git 繼承和 JS 調(diào)試功能，已經(jīng)十分完善了，但是還是有一些特殊的需求，這個(gè)時(shí)候我們就可以安裝第三方插件了。由于第三方插件不是微軟生產(chǎn)的，所以質(zhì)量良莠不齊，請注意甄別。

安裝 open in browser

按Ctrl + Shift + X 打開擴(kuò)展面板，然后輸入 open in browser，點(diǎn)擊第一個(gè)結(jié)果的「安裝」按鈕，稍等片刻就安裝好了（相比之下 Sublime 的插件安裝體驗(yàn)就差很多）。

然后你在任意 HTML 文件右鍵，就可以看到 Open In Default Browser 這個(gè)按鈕了，點(diǎn)就試試看。

Git 操作

要在 VSCode 里面操作 Git，前提是你已經(jīng)配置好了 Git，如果你沒有配置過，那么就在 Git Bash 里輸入以下命令：

git config --global user.name 你的英文名
git config --global user.email 你的郵箱
git config --global push.default matching 
git config --global core.quotepath false
git config --global core.editor "vim"

然后你就愉快地使用 VSCode 的 Git 功能了。