Visual Studio Code?(簡稱?VS Code?/?VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac?以及?Linux。

?

VSC中文網：http://www.vscode.org/

?

vscode ?作為一款逐漸火熱的編輯器。它的特點免費、開源、多平臺，以及集成git，代碼調試，插件豐富等有點，被大家逐漸熟知和認可。

這里主要說一下前端常用插件。

?

Auto Rename Tag
　　自動重命名配對的HTML / XML標簽

background
　　修改背景，設置編輯器界面的背景圖片。但是好像現在會出錯，具體設置內容在vsc找到插件看詳細信息。

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

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

Color Picker
　　代碼的顏色選擇器。

Css Peek
　　能在源代碼中的字符串中找到對應的css（類和ID）。顯示在那個css文件里，還有在第幾行。

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

Debugger for Chrome
　　js調試的插件，前端項目在Chrome中運行起來之后，可以直接在VSCode中打斷點、查看輸出、查看控制臺，詳細配置見插件說明。

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

?ESLint
　　檢查Javascript編程時的語法錯誤。

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

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

Guides
　　代碼的標簽對齊線。

HTML CSS Class Completion
　　為基于工作空間上的CSS文件的HTML類屬性提供CSS類名稱提示。

HTML Boilerplate
　　提供生成標準HTML樣板代碼。

HTML CSS support
　　css 自動補齊

HTML Snippets
　　支持HTML5標簽提示

JavaScript (ES6) snippets
?　　支持JavaScript ?ES6 語法

jQuery Code Snippets
?　　jq代碼段提示。

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

Lodash
　　lodash 函數提示。

Lorem ipsum
　　快速填充文本

Npm Intellisense
　　在import語句中自動完成npm模塊引入的代碼插件。

open in browser
　　在瀏覽器中打開，安裝后在左側目錄中右鍵點擊會出現 open in browser 選項。

Path Intellisense
　　文件路徑提示。

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

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

VS Code CSS Comments
　　css代碼注釋。

vscode-browser-plugin
　　在編輯器內預覽HTML，

　　通過開啟端口(3000)監聽當前打開項目的根目錄，在編輯器內預覽網站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改代碼后自動刷新頁面。

vscode-icons
　　文件圖標。

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

　　（ps：使用其他框架，直接搜就好，像是react，angular，就會出現相關的代碼提示和語法支持常用插件）

主題插件：
　　Material-theme；
　　monokai-light;
　　Monokai++;
　　One Dark Theme;
　　　個人審美不同，大家自己體會并選擇。

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

?

以下內容轉自：https://zhuanlan.zhihu.com/p/22880087

vscode常用快捷鍵：

同時打開多個窗口（查看多個項目）

打開一個新窗口： Ctrl+Shift+N
關閉窗口： Ctrl+Shift+W
同時打開多個編輯器（查看多個文件）

新建文件 Ctrl+N
歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
切出一個新的編輯器（最多3個）Ctrl+\，也可以按住Ctrl鼠標點擊Explorer里的文件名
左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
3個編輯器之間循環切換 Ctrl+`
編輯器換位置，Ctrl+k然后按Left或Right
格式調整

代碼行縮進Ctrl+[， Ctrl+]
折疊打開代碼塊 Ctrl+Shift+[， Ctrl+Shift+]
Ctrl+C Ctrl+V如果不選中，默認復制或剪切一整行
代碼格式化：Shift+Alt+F，或Ctrl+Shift+P后輸入format code
修剪空格Ctrl+Shift+X
上下移動一行： Alt+Up 或 Alt+Down
向上向下復制一行： Shift+Alt+Up或Shift+Alt+Down
在當前行下邊插入一行Ctrl+Enter
在當前行上方插入一行Ctrl+Shift+Enter
光標相關

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

跳轉到定義處：F12
定義處縮略圖：只看一眼而不跳轉過去Alt+F12
列出所有的引用：Shift+F12
同時修改本文件中所有匹配的：Ctrl+F12
重命名：比如要修改一個方法名，可以選中后按F2，輸入新的名字，回車，會發現所有的文件都修改過了。
跳轉到下一個Error或Warning：當有多個錯誤時可以按F8逐個跳轉
查看diff 在explorer里選擇文件右鍵 Set file to compare，然后需要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.
查找替換

查找 Ctrl+F
查找替換 Ctrl+H
整個文件夾中查找 Ctrl+Shift+F
顯示相關

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

自動保存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto
---------------------?
作者：amyloverice?
來源：CSDN?
原文：https://blog.csdn.net/amyloverice/article/details/79388270?
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

總結

以上是生活随笔為你收集整理的vscode 一些基本知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。