原文網址:VS Code--常用的插件_IT利刃出鞘的博客-CSDN博客
簡介
本文介紹VS Code(Visual Studio Code)常用的插件。
插件的配置
默認情況下,插件會放到這里:C:\Users\xxx\.vscode\extensions
修改插件位置的方法
- 新建一個目錄(不要放到vscode安裝目錄),比如:D:\software_data\vscode\extensions
- 將原插件目錄的內容復制到新目錄
- 修改vscode軟件快捷方式:右擊快捷方式=> 屬性=> 快捷方式=> 修改“目標”(后邊加上:--extensions-dir "D:\software_data\vscode\extensions")(例:D:\software\vscode\Code.exe --extensions-dir "D:\software_data\vscode\extensions"
)
注意:本處只修改雙擊VSCode快捷方式的插件位置。右鍵用VSCode打開需要改注冊表,這里就不改了。
編輯
| 插件 | 說明 |
| Auto Rename Tag | 修改html標簽自動補全,改了首標簽,尾部自動變。webstorm自帶 |
| Auto Close Tag | 輸入完整左標簽后,結束標簽將被自動插入。 |
| Auto Import | 自動導入包 |
| Bracket Select | 選擇括號內的內容。關鍵字:bracket。快捷鍵:Alt+A |
| Bracket Jumper | 跳轉到對應的括號。比如:左括號跳到右括號。關鍵字:bracket,快捷鍵:ctrl+alt+uparrow |
| Prettier | 默認不開啟,需要手動啟動:editor.formatOnSave": true。自己按保存會自動格式化。 |
| Beautify | 同Prettier十分類似,是一種出色的代碼格式化擴展插件。可以用它格式化以JavaScript,JSON,CSS,Sass和HTML編寫的代碼。 |
| eslint | 代碼檢測 |
跳轉
| 插件 | 說明 |
| vscode-elm-jump | 常規的代碼跳轉定義,按ctrl,和webstorm一樣 |
| CSS Peek(也可能叫 VUE css peek) | 按ctrl可以跳轉css和id定義,按ctrl,和webstorm一樣。 |
| Vue - Official | vue官方插件(支持跳轉等) |
| vue-helper | 類似Vue - Official |
| vscode-element-helper | 針對Element的VSCode插件 |
| 路徑別名跳轉 | 名字就是這個,提供關于import定義的跳轉 |
顯示
| 插件 | 說明 |
| 樣式Material Theme | webstorm也有這樣的插件,但是vscode丑好多 |
| TODO Highlight | 待辦高亮 |
| Bracket Pair Colorizer 2 | 標識各種不一樣的括號 |
| Image preview | 絕對路徑下直接預覽圖片,vue文件的@就沒用了 |
| Solarized Light | 太陽燈主題(淺色主題,vscode自帶) |
調試
| 插件 | 說明 |
| Open in Browser | 快速在瀏覽器打開 |
| Debugger for Chrome | 直接在VS Code中進行測試和調試代碼 |
| JavaScript (ES6) code snippets | ES6 語法的 JavaScript 代碼片段 |
包
| 插件 | 說明 |
| Code Runner | 自動檢測packjson文件執行npm命令。webstrom自帶 |
| NPM | 幫助管理依賴包的。有助于管理Package.json,當生產環境依賴包未安裝時會發出警告,并確保安裝的版本正確 |
| Live Sass Compiler | 它可以將SASS /SCSS文件實時編譯為CSS文件,并在瀏覽器中展示已編譯樣式的實時預覽 |
版本管理
| 插件 | 說明 |
| GitLens — Git supercharged | 可以查看git所有提交記錄,并且代碼上面自動有提示 |
其他
| 插件 | 說明 |
| Project Manager | 多項目管理 |
| Live Server | 開啟一個本地開發服務器,為靜態網頁和動態網頁提供服務。使用編輯器中的go-live按鈕,開發者可以立即把代碼放到服務器上,該擴展插件還支持實時刷新頁面 |