自動(dòng)添加HTML / XML關(guān)閉標(biāo)簽(必備)
自動(dòng)重命名配對(duì)的HTML / XML標(biāo)簽(必備)
格式化javascript,JSON,CSS,Sass,和HTML
包含Bootstrap 4&Font awesome 的代碼片段
顏色識(shí)別匹配括號(hào)
智能提示HTML class =“”屬性(必備)
非常強(qiáng)大的一款插件,能夠運(yùn)行多種語(yǔ)言的代碼片段或代碼文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安裝完成后,右上角出現(xiàn):
點(diǎn)擊這個(gè)按鈕就可以運(yùn)行你的文件了(必備)
能夠查看CSS ID和類(lèi)的字符串作為HTML文件中相應(yīng)的CSS定義(必備)
使用方法:將光標(biāo)放在class里面的屬性,右擊
查文檔必備,搭配 dash(不過(guò)似乎只有 mac 版)??快捷鍵
ctrl + h
它根據(jù)你當(dāng)前選中的語(yǔ)言查找 dash 里面的文檔
讓 vscode 映射 chrome 的 debug功能,使靜態(tài)頁(yè)面都可以用 vscode 來(lái)打斷點(diǎn)調(diào)試
簡(jiǎn)單使用:戳我
添加注釋塊
設(shè)置:
"docthis.includeAuthorTag": true,//出現(xiàn)@Author "docthis.includeDescriptionTag": true,//出現(xiàn)@Description "docthis.authorName": "shenzekun",//作者名字
快捷鍵: 按兩次Ctrl+alt+d
EsLint可以幫助我們檢查Javascript編程時(shí)的語(yǔ)法錯(cuò)誤。比如:在Javascript應(yīng)用中,你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼,找到bug并確保一定程度的JS語(yǔ)法書(shū)寫(xiě)的正確性。
配置:戳我
用于 html 的Font-awesome代碼片段
在底部狀態(tài)欄顯示當(dāng)前文件大小,點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建、修改時(shí)間
以圖表的形式查看git日志
使用 command+shift+p(Ctrl+shift+p) 輸入git log就可以看到了
git 日志插件
在 html 標(biāo)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式(必備)
html 代碼片段(必備)
html代碼檢測(cè)
可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽
使用:選擇一大段代碼,然后按“Alt + W”
突出目前的縮進(jìn)深度
智能提示 css 的 class 名
鼠標(biāo)移到路徑里顯示圖像預(yù)覽
es6代碼片段(必備)
js代碼片段(必備)
jQuery 代碼片段
實(shí)時(shí)編譯 sass ,不過(guò)需要配置,附上我的配置
"liveSassCompile.settings.formats":[ // You can add more { "format": "compressed",//壓縮 "extensionName": ".min.css",//編譯后綴名 "savePath": "./css"http://編譯保存的路徑 } ],
使用
markdown 語(yǔ)法檢查
可以在導(dǎo)入語(yǔ)句中自動(dòng)完成JavaScript / TypeScript模塊。
在導(dǎo)入語(yǔ)句中自動(dòng)填充npm模塊,跟Node.js Modules Intellisense差不多
當(dāng)前的 html 文件用瀏覽器打開(kāi),類(lèi)似 webstorm 的那四個(gè)小瀏覽器圖標(biāo)功能,前提條件html 文件必須保存
快捷鍵alt+b
輸出提示的文字顏色有一些變化,方便獲取關(guān)鍵信息
路徑自動(dòng)補(bǔ)全(必備)
格式化JavaScript / TypeScript / CSS 。
工程項(xiàng)目過(guò)多時(shí),shift+cmd+p(shift+ctrl+p) 然后輸入project,第一次選擇edit Project編輯自己的工程項(xiàng)目,之后就可以直接選擇open打開(kāi)你的項(xiàng)目
寫(xiě) sass 必備
生成假數(shù)據(jù),地址,電話,圖片等等
打開(kāi)方式shift+cmd+p(shift+ctrl+p)) 然后輸入faker 就可以選擇了
實(shí)時(shí)觀看 javascript 的變量的變化
使用:先shift+cmd+p (ctrl+shift+p)輸入 quokka 選擇 new javascript 就行了??
測(cè)試正則的插件
檢查typescript編程時(shí)的語(yǔ)法錯(cuò)誤語(yǔ)法
自動(dòng)搜索工作區(qū)文件中的TypeScript定義,并將所有已知符號(hào)作為完成項(xiàng),以允許代碼完成。
目錄樹(shù)圖標(biāo)
react代碼片段,下載人數(shù)超多??
格式化 javascript, JSX, typescript, TSX 文件
語(yǔ)法高亮、智能感知
vue代碼片段
vue的 typescript 代碼片段
vue 2代碼片段
個(gè)人最喜歡的主題,應(yīng)該是最好看的主題之一??
這個(gè)也好看??
這個(gè)和 One Dark Pro差不多,One Dark Pro顏色主題多一些
里面包含黑色和白色主題,這個(gè)白色主題感覺(jué)挺好看的
大家還有什么好的插件推薦嗎??
聯(lián)系客服