提升開發(fā)效率的實用vscode插件(分享)

本篇文章給大家分享一些開發(fā)過程中實用的vscode插件。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

提升開發(fā)效率的實用vscode插件(分享)

相關推薦:《vscode

實用的 visual studio Code 插件

1、vscode-color-highlight——顏色代碼高亮插件。(sublime text也有)

2、vscode-Open in Browser——右鍵在瀏覽器打開。(sublime text也有)

3、vscode-Path Intellisense——文件路徑提示。(sublime text也有)

4、vscode-JS-css-html formatting——js-css-html格式化。(sublime text也有)

5、vscode-visual studio code Format——vscode代碼格式增強工具。(右鍵格式化)

6、vscode-sass——sass/scss文件語法提示。(sublime text也有)

7、vscode-Easy Sass——scss編譯成css,min.css。(不錯的一個sass編譯工具)

8、vscode-csscomb——css屬性排序。(sublime text也有)

9、vscode-HTML class Suggestions——工作空間class代碼提示。

PS:(1)npm install csscomb -g ?

? ? ? ? ? ? ? ?npm install csscomb –save-dev

? ? ? ? ? ? ? ?這兩步是必須的。

? ? ? ?(2)配置vscode

? ? ? ? ? ? ? ?打開“文件”-“首選項”-“設置”。找到“csscomb configuration”選項。添加“csscomb.preset”選項。

? ? ? ? ? ? ? ?提升開發(fā)效率的實用vscode插件(分享)

? ? ? ? ? ? ? ?模式有三種,csscomb, yandex, zen。任選其一。

? ? ? (3) 選中css/less/scss文件,運行按F1,輸入”csscomb”,回車即可。

? ? ? ? ? ? ? ?提升開發(fā)效率的實用vscode插件(分享)

? ? ? ? ? ? ? ?特別注意一點,“csscomb.preset”選項還可以這樣配置的。

? ? ? ? ? ? ? ?提升開發(fā)效率的實用vscode插件(分享)

10.vscode-fake——生成各種假數(shù)據(jù)類型。(姓名,電話)

11.vscode-CSS Peek——class名字定義跳轉。(終于擁有dw cc的這個css定義跳轉功能)

12.vscode-eCSStractor—–抽取頁面的class,生成一個css文檔。

13.vscode-Regex Previewer——正則匹配預覽。

14.vscode-Quokka——js實時編譯。(相當于邊寫邊輸出控制臺信息)。

15.vscode-SVG Viewer——svg預覽。

16.vscode-Change Case—–變量名命名風格切換。(解決了命名風格不統(tǒng)一的工具)

17.vscode-Document this—–jsdoc注釋生成。

18.vscode-Live Server—–http服務器(相當于使用nodejs的http-server?)。

?PS:vscode底部可以點擊運行,十分方便。

? ? ? ? ??提升開發(fā)效率的實用vscode插件(分享)

vue框架

18.vscode-Vue 2 Snippets——vue2的語法高亮,語法提示。

19.vscode-Vetur——vue單文件能夠像html,js,css一樣編寫,注釋。

20.vscode-wpy-beautify——vue2單文件格式化。

PS:vscode確實是一個不錯的編輯器。

? ? ? 與sublime text3對比,有以下優(yōu)點。

? ? ? 1.文件搜索功能。

? ? ? ?提升開發(fā)效率的實用vscode插件(分享)

? ? ? ?有一個很好的文件瀏覽器去篩選文件,查找,修改,替換。

? ? ? ?2.文件拖拽移動。

? ? ? ?提升開發(fā)效率的實用vscode插件(分享)

? ? ? 3.默認集成終端。無需裝插件去打開終端。

補充:1.使用Visual Studio Code – Insiders版才有工作空間這功能,支持拖拽多項目。

? ? ? ? ?2.vscode顯示空格代碼。打開“查看”-“切換呈現(xiàn)空格”。

更多編程相關知識,請訪問:vscode!!

以上就是提升開發(fā)效率的實用

? 版權聲明
THE END
喜歡就支持一下吧
點贊5 分享