vscode 插件


vscode是一款開源且優秀的編輯器,接下來讓我吐血推薦一下我工作使用過的令人驚嘆的Visual Studio Code插件。

 

代碼編輯插件

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

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

vscode-copy-relative-path ------ 復制文件相對路徑。(輔助書寫路徑的工具)

vscode-Change Case ----- 變量名命名風格切換。(解決了命名風格不統一的工具)

vscode-removeEmptyLines ----- 能夠迅速刪除多行空白。(自動刪除所有代碼空行)

vscode-Trailing Spaces ----- 檢測並一鍵去除代碼中多余的空格。

vscode-ECMAScript Quotes Transformer ------ js中html轉義。(終於找到這個插件了,一直苦於手動去轉義js中的html)

vscode-Bracket Pair Colorizer ----- 自動標識相匹配括號的顏色。(增強了vscode的括號提示)

vscode-Prettier formatter ------ vscode代碼格式增強工具。(標准格式化工具)

PS:格式化工具請認准Prettier formatter。

vscode-change-case ------ 各種命名之間格式轉化工具。(不再擔心命名格式不統一的問題)

PS:1.選中需要轉換的變量。比如:let ABC_a = 0。(字符之間需要加一個任意符號才可以實現命名格式轉化。)

         2.執行vscode命令 Change Case Commands  命令。

         3.選擇轉化格式。

        

 

web前端插件

vscode-Debugger for Chrome ------ 在vscode與Chrome聯調。

vscode-Browser Preview ------ 在vscode進行瀏覽器預覽。(類似與eclipse IDE里面瀏覽頁面)

PS:vscode-Debugger for Chrome 與 vscode-Browser Preview插件仍然處於實驗階段,不夠穩定,建議直接使用Chrome調試較好。

vscode-ESLint ------ js代碼檢查工具。(標准化ESLint的插件,規范js代碼)

PS: 1.運行node環境命令。

 

         2.配置vscode設置文件。 (更多選項請參考ESLint官網)

復制代碼
 
         
復制代碼

vscode-stylelint------css代碼檢查工具。(標准化stylelint的插件,規范style代碼)

 

補充: ESLint + Prettier formatter (javascript整合格式化)

            1.運行node環境命令。

 

            2.配置vcode設置文件。(ESLint配置要與prettier配置相同)

 

           stylelint+Prettier formatter (css整合格式化)

           1.運行node環境命令。

 

           2.配置vcode設置文件。(stylelint配置要與prettier配置相同)

復制代碼
 
         
復制代碼

         3.創建一個.stylelintrc文件。(更多選項參考stylelint官網)

 

         4.使用shell命令測試一下stylelint是否能夠正常使用fix功能。

 

         5.如果stylelint正常工作,prettier-stylelint就可以使用fix功能。

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

vscode-Placeholder Images------插入占位圖。(多個占位圖站點都有)

vscode-Auto Rename Tag------修改html標簽的時候會自動匹配修改。

vscode-tag-wrapper-----選中區域添加包裹標簽。

PS:與Auto Rename Tag插件一起使用簡直就是perfect。

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

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

vscode-Sorting HTML and Jade attributes------html屬性排序(代碼潔癖症者使用)

vscode-Turbo Console Log----快速生成控制台輸出語句,支持批量添加,刪除,注釋打印語句。(以前我還一直手寫console.log語句,又刪又寫又注釋,這個插件簡直就是調試輸出的福音)

vscode-csscomb------css屬性排序。(代碼潔癖症者使用)

PS:1.運行node環境命令。

 

        2.配置vcode設置文件。

 

          設置排序模式,有"csscomb", "yandex", "zen"三種。

 

          設置優化配置項目排序模式。(更多選項參考CSSComb官網)

       3.選中css/less/scss文件,執行vscode命令 CSSComb:Format styles 命令。

vscode-CSS Peek ------ lass類定義跳轉。(終於擁有dw cc的這個css定義跳轉功能)

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

vscode-Image Sprites ----- 生成精靈圖片。

vscode-Quokka ------ js實時編譯。(相當於邊寫邊輸出控制台信息)

vscode-IntelliSense for CSS class names ----- 在工作區自動掃描css文件類名,自動提示class類名。(相當於一些css框架的class提示)

vscode-jQuery Code Snippets ------ jQuery的語法高亮,語法提示。

vscode-npm ------ npm與package.json的語法高亮,語法提示。

vscode-npm Intellisense ------ npm包路徑提示。

vscode-Auto Import ------ 自動導入模塊。

vscode-Vue.js Extension Pack ------ vuejs集成擴展包,依賴其他插件。

vscode-vue peek ------ 查找vue單文件定義處。

PS:關於vue單文件的格式化。(非使用cli工具)

       1.配置vscode編輯器的格式化。

       

      2.使用vscode-wpy-beauitfy插件進行格式化。(不要使用編輯器默認的格式化)

vscode-Reactjs code snippets------Reactjs的語法高亮,語法提示。

vscode-React Extension Pack------Reactjs集成擴展包,依賴其他插件。

vscode-styled-components ------styled-components高亮,語法提示。

vscode-TSLint------Typescript的語法高亮,語法提示。

vscode-Pug (Jade) snippets------pug模版語法提示。

 

數據庫插件

vscode-MySQL ------ mysql數據庫管理工具。

vscode-Azure Cosmos DB ----- MongoDB、Graph (Gremlin) 、Cosmos DB數據庫管理工具。

PS:這個插件比較適合使用mongodb數據庫。執行sql語句會自動格式化返回的結果,無需使用pretty()方法。

       使用MongoDB 一些不常見Shell命令,需要配置vscode設置文件。

 

 

代碼質量插件

vscode-Jest------jest語法提示,測試用例感應測試。

vscode-CodeMetrics------檢測代碼圈復雜度。(此插件支持ts/js/lua語法,檢測代碼中的代碼圈復雜度)

PS:圈復雜度是一種代碼復雜度的衡量標准。

        1.設置vscode配置文件。

復制代碼
 
         
復制代碼

        更多配置,請看vscode設置選項。

        使用效果如下:

        

        點擊可追蹤具體代碼結構。

        

 

遠程訪問插件

vscode-SSH FS------通過SSH協議登錄服務器,可以操作服務器文件。

PS:配置vscode設置文件。(如果需要使用Terminal的話,請使用第三方SSH客戶端SmarTTY或mobaXterm。)

復制代碼
 
         
復制代碼

        SSH連接服務。

        

        SSH連接成功之后,就可以操作文件了。

        

補充:如果需要使用Terminal的話,請使用第三方SSH客戶端(SmarTTY或mobaXterm)。

 

Java插件

vscode-Java Extension Pack------Java集成擴展包,依賴其他插件。(必須先安裝JDK,配置JDK系統環境)

PS: Language Support for Java(TM) by Red Hat ------ 利用Eclipse開源JDT等組件實現vscode java開發環境,主要是用於java項目創建,編譯工作,語法提示等功能。(適用於java SE、java SE、java EE)

         Debugger for Java------輕量級java斷點調試插件,主要是用於java程序斷點調試,配合vscode的調試功能。(適用於java SE、java EE)

         java SE  “mainClass” 設置

         

         Java EE “mainClass” 設置(Maven項目)

         

         Java Test Runner------輕量級java測試用例插件,主要是用於java單元測試。(適用於java SE、java EE)

         Maven for Java------針對java項目的Maven構建器,主要是用於Maven構建器的語法提示與構建命令,此插件需要依賴Apache-Maven,請移步到Apache-Maven官網下載。(適用於

java EE)

         Java開發配置選項

         

補充:輕量級單一Java項目可以使用VScode的Java插件進行開發,微服務Java項目建議使用IntelliJ IDEA進行開發。

 

其他插件

vscode-Comment Translate ----- vscode的Google翻譯(簡單又方便的文件內容翻譯插件)

vscode-ASCIIDecorator ------ ASCII字符生成。(代碼注釋逼格工具)

vscode-Banner Comments + ------ 另一款ASCII字符生成。(代碼注釋逼格工具)

vscode-fileheader ------ 快速生成文件頭注釋,保存文件自動添加修改時間。(容易跟蹤文件修改記錄)

vscode-REST Client ----- 輕量級http請求測試。(Api接口測試,類似於postman)

vscode-fake ----- 生成各種假數據類型。

vscode-SVG Viewer ------ svg預覽。

vscode-Image preview ------ 圖片預覽。(支持html、css中圖片資源預覽)

vscode-RegExp Preview and Editor ------ 正則表達式編寫與預覽。(靈活校驗正則表達式)

vscode-Live Server ----- http服務器(相當於使用nodejs的http-server )

vscode-Git Lens-----增強vscode的git管理工具。

           

使用建議

按需安裝Visual Studio Code插件,建議控制安裝數量在三十個插件以內,否則會影響Visual Studio Code使用性能。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM