實用的Visual Studio Code插件

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

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

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

4.vscode-JS-CSS-HTML Formatting------js-css-html格式化。(sublime text也有)node

5.vscode-Visual Studio Code Format------vscode代碼格式加強工具。(右鍵格式化)npm

6.vscode-Sass------sass/scss文件語法提示。(sublime text也有)瀏覽器

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

8.vscode-csscomb------css屬性排序。(sublime text也有)服務器

9.vscode-HTML Class Suggestions------工做空間class代碼提示。框架

PS:(1)npm install csscomb -g  less

               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------生成各類假數據類型。(姓名,電話)

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-----變量名命名風格切換。(解決了命名風格不統一的工具)

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對比,有如下優勢。

      1.文件搜索功能。

       

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

       2.文件拖拽移動。

       

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

相關文章
相關標籤/搜索