Visual Studio Code 是由微軟開發的一款免費、跨平台的文本編輯器。由於其卓越的性能和豐富的功能,它很快就受到了大家的喜愛。
但工欲善其事必先利其器,以下是本人為前端開發收集的常用的vscode插件,有需要的話趕緊mark起來吧~
一、下載
vscode官網:https://code.visualstudio.com/
解決vscode下載很慢的問題
- 在官網根據自己電腦 點擊下載
2.下載時可以去瀏覽器的下載內容里面,看到正在下載的vscode,然后點擊上面的鏈接,會發生跳轉
2. 然后在瀏覽器上的地址上會發現這個鏈接,這個時候直接復制 vscode.cdn.azure.cn 替換地址上面的
會發現速度起飛,這里用vscode.cdn.azure.cn 是采用的國內鏡像,直接起飛
二、安裝插件的方法
- 使用
ctrl + shift + x
- 使用
Ctrl+P
, 輸入ext install xxxx
,搜索要安裝的插件,點擊安裝按鈕即可 - 點擊擴展圖標,如下圖
三、常用插件
(1)Chinese (Simplified) Language Pack for Visual Studio Code
軟件漢化
(2)Auto Close Tag
自動閉合HTML/XML標簽
效果:
(3)Auto Rename Tag
自動完成另一側標簽的同步修改
效果:
(4)Bracket Pair Colorizer
給嵌套的各種括號加上不同的顏色
效果:
(5)Path Intellisense
智能路徑提示,可以在你輸入文件路徑時智能提示
效果:
(6)HTML Snippets
HTML代碼片段,該插件可為你提供html標簽的代碼提示,不用鍵入尖括號了
效果:
(7)filesize
效果:
(8)Prettier - Code formatter
保存的時候自動格式化代碼
(9)JavaScript(ES6) code snippets
ES6語法智能提示以及快速輸入,除js外還支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各種包含js代碼文件的時間
四、VUE插件
(1)Vetur
Vue多功能集成插件,包括:語法高亮,智能提示,emmet,錯誤提示,格式化,自動補全,debugger。vscode官方欽定Vue插件,Vue開發者必備。
效果:
(2)EsLint
語法糾錯
效果:
五、微信小程序插件
(1)wechat-snippet
微信小程序代碼輔助,代碼片段自動完成
(2)minapp
- 微信小程序標簽、屬性的智能補全(同時支持原生小程序、mpvue 和 wepy 框架,並提供 snippets)
- 需要輸入<才會觸發標簽補全
- 輸入空格會觸發對應標簽的屬性補全
(3) wxapp-helper
選擇創建wx組件,自動生成配套的文件,簡直不要太爽