vscode（visual studio code）是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 diff、git 等特性，支持插件擴展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。
vscode安裝插件只需要點擊圖片所示按鈕，即可進入拓展，在搜索框中輸入插件名點擊安裝后，等待安裝好即可點擊重新加載重啟vscode使得插件生效。
當(dāng)你不需要某個插件時只需要進入擴展，點擊對應(yīng)插件右下角的齒輪按鈕即可選擇禁用或卸載該插件。
?vscode常用插件有哪些？
| 插件 | 說明 | 備注 |
|---|---|---|
| auto Close Tag | 自動添加html / xml關(guān)閉標簽 | @@##@@ |
| Auto Rename Tag | 自動重命名配對的HTML / XML標簽 | @@##@@ |
| Beautify | 格式化代碼 | |
| Bracket Pair Colorizer | 顏色識別匹配括號 | @@##@@ |
| Code Runner | 非常強大的一款插件，能夠運行多種語言的代碼片段或代碼文件：C，C ++，Java，JavaScript，php，python，perl，ruby，Go等等 安裝完成后，右上角會出現(xiàn)：? |
@@##@@ |
| change-case | 雖然 VSCode 內(nèi)置了開箱即用的文本轉(zhuǎn)換選項，但其只能進行文本大小寫的轉(zhuǎn)換。而此插件則添加了用于修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等 | @@##@@ |
| Chinese (Simplified) Language Pack for visual studio code | 中文簡體語言包 | |
| Color Info | 這個便捷的插件，將為你提供你在 css 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息了 | @@##@@ |
| CSS Peek | 使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發(fā)送樣式設(shè)置的 CSS 代碼 | @@##@@ |
| Debugger for chrome | 前端調(diào)試, 查看使用方法 | @@##@@ |
| ESLint | EsLint可以幫助我們檢查Javascript編程時的語法錯誤。比如：在Javascript應(yīng)用中，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼，找到bug并確保一定程度的JS語法書寫的正確性 | |
| filesize | 在底部狀態(tài)欄顯示當(dāng)前文件大小，點擊后還可以看到詳細創(chuàng)建、修改時間 | @@##@@ |
| Git history | 以圖表的形式查看 git 日志 | @@##@@ |
| GitLens — Git supercharged | 顯示文件最近的 commit 和作者，顯示當(dāng)前行 commit 信息 | @@##@@ |
| HTML Boilerplate | 通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，并按 Tab 鍵，即可生成干凈的文檔結(jié)構(gòu) | @@##@@ |
| HTMLHint | HTML 代碼格式檢測 | @@##@@ |
| HTML Snippets | 代碼自動填充 | @@##@@ |
| htmltagwrap | 在選中HTML標簽中外面套一層標簽 ”Alt + W” ?(“Option + W” for Mac) |
@@##@@ |
| Image Preview | 鼠標移到路徑里顯示圖像預(yù)覽 | @@##@@ |
| Indenticator | 突出目前的縮進深度 | @@##@@ |
| intelliSense for CSS class names in HTML | 把項目中 css 文件里的名稱智能提示在 html 中 | @@##@@ |
| JavaScript (es6) code snippets | es6代碼片段 | |
| Live Server | 瀏覽器實時刷新 | @@##@@ |
| node.js Modules Intellisense | 可以在導(dǎo)入語句中自動完成JavaScript / typescript模塊 | @@##@@ |
| npm Intellisense | require 時的包提示 | @@##@@ |
| Path Intellisense | 路徑自動補全 | @@##@@ |
| Quokka.js | Quokka 是一個調(diào)試工具插件，能夠根據(jù)你正在編寫的代碼提供實時反饋 使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就可以了 |
@@##@@ |
| Regex Previewer | 這是一個用于實時測試正則表達式的實用工具。它可以將正則表達式模式應(yīng)用在任何打開的文件上，并高亮所有的匹配項 | @@##@@ |
| SVG Viewer | 此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件并查看它們。同時，它還包含了用于轉(zhuǎn)換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項 | @@##@@ |
| Vetur | Vue 語法高亮顯示, 語法錯誤檢查, 代碼自動補全 (配合 ESLint 插件效果更佳) |
|
| vscode-fileheader | 頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間 快捷鍵: Ctrl+Alt+i (默認信息可在 文件→首選項→設(shè)置 中修改) |
@@##@@ |
相關(guān)推薦：vscode入門教程
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
喜歡就支持一下吧
相關(guān)推薦
