提升開發(fā)效率的實(shí)用vscode插件有哪些

這篇文章主要介紹提升開發(fā)效率的實(shí)用vscode插件有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

實(shí)用的 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代碼格式增強(qiáng)工具。（右鍵格式化）

6、vscode-Sass------sass/scss文件語(yǔ)法提示。（sublime text也有）

7、vscode-Easy Sass------scss編譯成css，min.css。(不錯(cuò)的一個(gè)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

              打開“文件”-“首選項(xiàng)”-“設(shè)置”。找到“csscomb configuration”選項(xiàng)。添加“csscomb.preset”選項(xiàng)。

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

     （3） 選中css/less/scss文件,運(yùn)行按F1，輸入"csscomb"，回車即可。

              特別注意一點(diǎn)，“csscomb.preset”選項(xiàng)還可以這樣配置的。

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

11.vscode-CSS Peek------class名字定義跳轉(zhuǎn)。（終于擁有dw cc的這個(gè)css定義跳轉(zhuǎn)功能）

12.vscode-eCSStractor-----抽取頁(yè)面的class，生成一個(gè)css文檔。

13.vscode-Regex Previewer------正則匹配預(yù)覽。

14.vscode-Quokka------js實(shí)時(shí)編譯。（相當(dāng)于邊寫邊輸出控制臺(tái)信息）。

15.vscode-SVG Viewer------svg預(yù)覽。

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

17.vscode-Document This-----jsdoc注釋生成。

18.vscode-Live Server-----http服務(wù)器（相當(dāng)于使用nodejs的http-server ）。

PS：vscode底部可以點(diǎn)擊運(yùn)行，十分方便。

vue框架

18.vscode-Vue 2 Snippets------vue2的語(yǔ)法高亮，語(yǔ)法提示。

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

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

PS：vscode確實(shí)是一個(gè)不錯(cuò)的編輯器。

與sublime text3對(duì)比，有以下優(yōu)點(diǎn)。

1.文件搜索功能。

有一個(gè)很好的文件瀏覽器去篩選文件，查找，修改，替換。

2.文件拖拽移動(dòng)。

3.默認(rèn)集成終端。無(wú)需裝插件去打開終端。

補(bǔ)充：1.使用Visual Studio Code - Insiders版才有工作空間這功能，支持拖拽多項(xiàng)目。

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

以上是“提升開發(fā)效率的實(shí)用vscode插件有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！