本篇文章給大家分享一些開發(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”選項。
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?模式有三種,csscomb, yandex, zen。任選其一。
? ? ? (3) 選中css/less/scss文件,運行按F1,輸入”csscomb”,回車即可。
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?特別注意一點,“csscomb.preset”選項還可以這樣配置的。
? ? ? ? ? ? ? ?
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底部可以點擊運行,十分方便。
? ? ? ? ??
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.文件搜索功能。
? ? ? ?
? ? ? ?有一個很好的文件瀏覽器去篩選文件,查找,修改,替換。
? ? ? ?2.文件拖拽移動。
? ? ? ?
? ? ? 3.默認集成終端。無需裝插件去打開終端。
補充:1.使用Visual Studio Code – Insiders版才有工作空間這功能,支持拖拽多項目。
? ? ? ? ?2.vscode顯示空格代碼。打開“查看”-“切換呈現(xiàn)空格”。
更多編程相關知識,請訪問:vscode!!