Visual Studio Code (簡(jiǎn)稱(chēng) VS Code / VSC) 是一款免費(fèi)開(kāi)源的現(xiàn)代化輕量級(jí)代碼編輯器，支持幾乎所有主流的開(kāi)發(fā)語(yǔ)言的語(yǔ)法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配、代碼片段、代碼對(duì)比 Diff、GIT 等特性，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁(yè)開(kāi)發(fā)和云端應(yīng)用開(kāi)發(fā)做了優(yōu)化。軟件跨平臺(tái)支持 Win、Mac 以及 Linux。
vscode 作為一款逐漸火熱的編輯器。它的特點(diǎn)免費(fèi)、開(kāi)源、多平臺(tái)，以及集成git，代碼調(diào)試，插件豐富等有點(diǎn)，被大家逐漸熟知和認(rèn)可。

前端常用插件

Auto Rename Tag
　　自動(dòng)重命名配對(duì)的HTML / XML標(biāo)簽

background
　　修改背景，設(shè)置編輯器界面的背景圖片。但是好像現(xiàn)在會(huì)出錯(cuò)，具體設(shè)置內(nèi)容在vsc找到插件看詳細(xì)信息。

Bootstrap 4 & Font awesome snippets
　　bootstrap4和font awesome 快速引用和代碼生成。

Color-Highlight
　　在編輯器中高亮顯示顏色。

Color Picker
　　代碼的顏色選擇器。

Css Peek
　　能在源代碼中的字符串中找到對(duì)應(yīng)的css（類(lèi)和ID）。顯示在那個(gè)css文件里，還有在第幾行。

Csscomb
　　css 、less、sass 的代碼格式化。

Debugger for Chrome
　　js調(diào)試的插件，前端項(xiàng)目在Chrome中運(yùn)行起來(lái)之后，可以直接在VSCode中打斷點(diǎn)、查看輸出、查看控制臺(tái)，詳細(xì)配置見(jiàn)插件說(shuō)明。

Document This
　　為js文件生成文檔的代碼注釋。

ESLint
　　檢查Javascript編程時(shí)的語(yǔ)法錯(cuò)誤。

Git Easy
　　增加了vscode中自帶的git操作，安裝后按F1調(diào)出控制臺(tái)，輸入git easy [options]完成git操作，代替git bash。

**Git History **
　　查看git日志以及圖表和詳細(xì)信息。
　　查看文件的歷史記錄（Git日志）或文件中的行歷史（Git Blame）

Guides
　　代碼的標(biāo)簽對(duì)齊線(xiàn)。

HTML CSS Class Completion
　　為基于工作空間上的CSS文件的HTML類(lèi)屬性提供CSS類(lèi)名稱(chēng)提示。

HTML Boilerplate
　　提供生成標(biāo)準(zhǔn)HTML樣板代碼。

HTML CSS support
　　css 自動(dòng)補(bǔ)齊

HTML Snippets
　　支持HTML5標(biāo)簽提示

JavaScript (ES6) snippets
　　支持JavaScript ES6 語(yǔ)法

jQuery Code Snippets
　　jq代碼段提示。

JS-CSS-HTML Formatter
　　代碼格式化。

Lodash
　　lodash 函數(shù)提示。

Lorem ipsum
　　快速填充文本

Npm Intellisense
　　在import語(yǔ)句中自動(dòng)完成npm模塊引入的代碼插件。

open in browser
　　在瀏覽器中打開(kāi)，安裝后在左側(cè)目錄中右鍵點(diǎn)擊會(huì)出現(xiàn) open in browser 選項(xiàng)。

Path Intellisense
　　文件路徑提示。

Settings Sync
　　編輯器設(shè)置同步，包括插件，配置等。

詳情點(diǎn)擊=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

VS Code CSS Comments
　　css代碼注釋。

vscode-browser-plugin
　　在編輯器內(nèi)預(yù)覽HTML，通過(guò)開(kāi)啟端口(3000)監(jiān)聽(tīng)當(dāng)前打開(kāi)項(xiàng)目的根目錄，在編輯器內(nèi)預(yù)覽網(wǎng)站，省去了頻繁切換瀏覽器、編輯器看頁(yè)面效果，修改代碼后自動(dòng)刷新頁(yè)面。

vscode-icons
　　文件圖標(biāo)。

Vue 2 Snippets
　　　vue 代碼提示，高亮。

（ps：使用其他框架，直接搜就好，像是react，angular，就會(huì)出現(xiàn)相關(guān)的代碼提示和語(yǔ)法支持常用插件）

主題插件：

Material-theme；
　　monokai-light;
　　Monokai++;
　　One Dark Theme;

以上就是我的前端常用插件，有些插件的功能相互交叉重復(fù)，自己可以有選擇的安裝使用。

vsc常用快捷鍵：

同時(shí)打開(kāi)多個(gè)窗口（查看多個(gè)項(xiàng)目）

打開(kāi)一個(gè)新窗口： Ctrl+Shift+N
關(guān)閉窗口： Ctrl+Shift+W

同時(shí)打開(kāi)多個(gè)編輯器（查看多個(gè)文件）

新建文件 Ctrl+N
歷史打開(kāi)文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
切出一個(gè)新的編輯器（最多3個(gè)）Ctrl+\，也可以按住Ctrl鼠標(biāo)點(diǎn)擊Explorer里的文件名
左中右3個(gè)編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
3個(gè)編輯器之間循環(huán)切換 Ctrl+`
編輯器換位置，Ctrl+k然后按Left或Right

格式調(diào)整

代碼行縮進(jìn)Ctrl+[， Ctrl+]
折疊打開(kāi)代碼塊 Ctrl+Shift+[， Ctrl+Shift+]
Ctrl+C Ctrl+V如果不選中，默認(rèn)復(fù)制或剪切一整行
代碼格式化：Shift+Alt+F，或Ctrl+Shift+P后輸入format code
修剪空格Ctrl+Shift+X
上下移動(dòng)一行： Alt+Up 或 Alt+Down
向上向下復(fù)制一行： Shift+Alt+Up或Shift+Alt+Down
在當(dāng)前行下邊插入一行Ctrl+Enter
在當(dāng)前行上方插入一行Ctrl+Shift+Enter

光標(biāo)相關(guān)

移動(dòng)到行首：Home
移動(dòng)到行尾：End
移動(dòng)到文件結(jié)尾：Ctrl+End
移動(dòng)到文件開(kāi)頭：Ctrl+Home
移動(dòng)到后半個(gè)括號(hào) Ctrl+Shift+]
選中當(dāng)前行Ctrl+i（雙擊）
選擇從光標(biāo)到行尾Shift+End
選擇從行首到光標(biāo)處Shift+Home
刪除光標(biāo)右側(cè)的所有字Ctrl+Delete
Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor：可以連續(xù)選擇多處，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
同時(shí)選中所有匹配的Ctrl+Shift+L
Ctrl+D下一個(gè)匹配的也被選中(被我自定義成刪除當(dāng)前行了，見(jiàn)下邊Ctrl+Shift+K)
回退上一個(gè)光標(biāo)操作Ctrl+U

重構(gòu)代碼

跳轉(zhuǎn)到定義處：F12
定義處縮略圖：只看一眼而不跳轉(zhuǎn)過(guò)去Alt+F12
列出所有的引用：Shift+F12
同時(shí)修改本文件中所有匹配的：Ctrl+F12
重命名：比如要修改一個(gè)方法名，可以選中后按F2，輸入新的名字，回車(chē)，會(huì)發(fā)現(xiàn)所有的文件都修改過(guò)了。
跳轉(zhuǎn)到下一個(gè)Error或Warning：當(dāng)有多個(gè)錯(cuò)誤時(shí)可以按F8逐個(gè)跳轉(zhuǎn)
查看diff 在explorer里選擇文件右鍵 Set file to compare，然后需要對(duì)比的文件上右鍵選擇Compare with 'file_name_you_chose'.

查找替換

查找 Ctrl+F
查找替換 Ctrl+H
整個(gè)文件夾中查找 Ctrl+Shift+F
顯示相關(guān)

全屏：F11
zoomIn/zoomOut：Ctrl + =/Ctrl + -
側(cè)邊欄顯/隱：Ctrl+B
預(yù)覽markdown Ctrl+Shift+V
其他

自動(dòng)保存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto

作者：amyloverice
來(lái)源：CSDN
原文：https://blog.csdn.net/amyloverice/article/details/79388270
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！