VS Code 必備插件推薦

插件 說明 效果
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è)置 中修改)
最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容