| 插件 | 說明 | 效果 |
|---|---|---|
| Atom One Dark Theme | 一款很漂亮的主題插件 | |
| 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 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時,選擇“ Go to Definition 和 Peek definition ”選項,它便會給你發(fā)送樣式設(shè)置的 CSS 代碼 | ![]() |
| Debugger for Chrome | 前端調(diào)試 (查看使用方法) | ![]() |
| Easy LESS | 使用 less 語法開發(fā), 對于不支持 less 的項目非常有用 (比如: 微信小程序) | 微信小程序配置: 1. 進入 setings.json, 在 less.compile 中添加 "outExt": ".wxss"2. 新建一個 .less 文件, 寫入樣式后會在同級目錄自動生成 .wxss 文件 |
| ESLint | EsLint可以幫助我們檢查Javascript編程時的語法錯誤。比如:在Javascript應(yīng)用中,你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼,找到bug并確保一定程度的JS語法書寫的正確性 | |
| filesize | 在底部狀態(tài)欄顯示當前文件大小,點擊后還可以看到詳細創(chuàng)建、修改時間 | ![]() |
| Git History | 以圖表的形式查看 git 日志 | ![]() |
| GitLens — Git supercharged | 顯示文件最近的 commit 和作者,顯示當前行 commit 信息 | ![]() |
| HTML Boilerplate | 通過使用 HTML 模版插件,你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html,并按 Tab 鍵,即可生成干凈的文檔結(jié)構(gòu) | ![]() |
| HTML CSS Support | html 代碼自動補全以及 class 智能提示 | |
| 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代碼片段 | |
| koroFileHeader | 文件頭部注釋 (不會被格式化) | |
| Live Server | 瀏覽器實時刷新 | ![]() |
| Markdown Image | 將粘貼板中的圖片以本地存儲的方式創(chuàng)建 快捷鍵: Shift + Alt + V
|
![]() |
| Markdown All in One | 超級強大的 Markdown 插件, 可生成目錄 (Ctrl + Shift + P, 輸入 >Markdown All in One: 創(chuàng)建目錄) |
![]() |
| minapp | 微信小程序標簽、屬性的智能補全(同時支持原生小程序、mpvue 和 wepy 框架,并提供 snippets) | ![]() |
| Node.js Modules Intellisense | 可以在導(dǎo)入語句中自動完成JavaScript / TypeScript模塊 | ![]() |
| npm Intellisense | require 時的包提示 | ![]() |
| One Dark Pro | 一款非常漂亮的主題插件 | ![]() |
| Path Intellisense | 路徑自動補全 | ![]() |
| Power Mode | 代碼輸入特效 | ![]() |
| Prettier - Code formatter | 格式化工具, 統(tǒng)一代碼規(guī)范, 團隊開發(fā)必備 | |
| Quokka.js | Quokka 是一個調(diào)試工具插件,能夠根據(jù)你正在編寫的代碼提供實時反饋 使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就可以了 |
![]() |
| Regex Previewer | 這是一個用于實時測試正則表達式的實用工具。它可以將正則表達式模式應(yīng)用在任何打開的文件上,并高亮所有的匹配項 | ![]() |
| Settings Sync | 個人配置同步 查看使用方法 |
|
| SVG Viewer | 此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序,你無需離開編輯器,便可以打開 SVG 文件并查看它們。同時,它還包含了用于轉(zhuǎn)換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項 | ![]() |
| Vue 2 Snippets | Vue2 代碼片段補全 | ![]() |
| Vue Pug Enhanced | 支持 html 與 pug 語法相互轉(zhuǎn)換 | ![]() |
| Vetur | Vue 語法高亮顯示, 語法錯誤檢查, 代碼自動補全 (配合 ESLint 插件效果更佳) |
|
| vscode-fileheader | 頂部注釋模板,可定義作者、時間等信息,并會自動更新最后修改時間 快捷鍵: Ctrl+Alt+i (默認信息可在 文件→首選項→設(shè)置 中修改) |
![]() |
VS Code 必備插件推薦
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 安裝插件 有兩種方式,隨便一種就好。 F1 輸入 extensions: || ext install。exten...
- 前言VSCode 目前已經(jīng)更新到 1.15.1,變得越發(fā)完善;時隔三個月,我又搜羅了一波感覺比較實用的.當然我也干...
- 前言 VSCode大法好啊,平均一個月更新一個小版本,每次都可以直觀的看到優(yōu)化的地方和特性。 距離上次的文章已經(jīng)過...
- 今年3月,平臺的工作人員聯(lián)系了我,所說的話語都是對我的關(guān)心。我很久都沒有感受到除了我娘家人對我的關(guān)心。只因...
































