vscode是一款開源且優秀的編輯器，接下來讓我吐血推薦一下我工作使用過的令人驚嘆的Visual Studio Code插件。
代碼編輯插件
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環境命令。
npm install eslint -g
2.配置vscode設置文件。 （更多選項請參考ESLint官網）
{ "eslint.autoFixOnSave": true, "eslint.options": { "root": true, "env": { "browser": true, "node": true }, "parserOptions": { "parser": "babel-eslint", "ecmaVersion": 2017, "sourceType": "module" }, "rules": { "indent": [ "error", 2 ], "jsx-quotes": [ "error", "prefer-single" ], "quotes": [ "error", "single" ], "semi": [ "error", "never" ] } }, "eslint.validate": [ { "language": "javascript", "autoFix": true }, { "language": "html", "autoFix": true } ] }
vscode-stylelint------css代碼檢查工具。（標准化stylelint的插件，規范style代碼）
補充： ESLint + Prettier formatter （javascript整合格式化）
1.運行node環境命令。
npm install eslint prettier-eslint --save-dev
2.配置vcode設置文件。（ESLint配置要與prettier配置相同）
{ "prettier.eslintIntegration": true, "prettier.semi": false, "prettier.stylelintIntegration": true, "prettier.singleQuote": true }
stylelint+Prettier formatter （css整合格式化）
1.運行node環境命令。
npm install stylelint prettier-stylelint --save-dev
2.配置vcode設置文件。（stylelint配置要與prettier配置相同）
{ "prettier.stylelintIntegration": true, "stylelint.config":{ "rules":{ "color-no-hex":true } } }
3.創建一個.stylelintrc文件。（更多選項參考stylelint官網）
{ "rules": { "color-no-hex": true } }
4.使用shell命令測試一下stylelint是否能夠正常使用fix功能。
stylelint "*/*.css" --fix
5.如果stylelint正常工作，prettier-stylelint就可以使用fix功能。
vscode-Document This-----jsdoc注釋生成。
vscode-Placeholder Images------插入占位圖。（多個占位圖站點都有）
vscode-tag-wrapper-----選中區域添加包裹標簽。
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環境命令。
npm install csscomb -g npm install csscomb --save-dev`
2.配置vcode設置文件。
{ "csscomb.preset": "csscomb" }
設置排序模式，有"csscomb", "yandex", "zen"三種。
{ "csscomb.preset": { "remove-empty-rulesets": true, "always-semicolon": true } }
設置優化配置項目排序模式。（更多選項參考CSSComb官網）
3.選中css/less/scss文件，執行vscode命令 CSSComb:Format styles 命令。
vscode-CSS Peek ------ class類定義跳轉。（終於擁有dw cc的這個css定義跳轉功能）
PS：vscode-CSS Navigation ------ class類定義跳轉 （適用於react/vue/angluar）
vscode-BEM Helper ------ 輔助編寫符合BEM規范的class類名。
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-Version Lens ------ 顯示包版本信息。
PS：需要自己手動升級包版本。
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設置文件。
{ "mongo.shell.path": "E:\\bin\\mongo.exe", }
代碼質量插件
vscode-Jest------jest語法提示，測試用例感應測試。
vscode-CodeMetrics------檢測代碼圈復雜度。（此插件支持ts/js/lua語法，檢測代碼中的代碼圈復雜度）
PS：圈復雜度是一種代碼復雜度的衡量標准。
1.設置vscode配置文件。
{ "codemetrics.basics.ComplexityLevelExtremeDescription": "代碼需要優化", "codemetrics.nodeconfiguration.AnyKeyword": 150, "codemetrics.nodeconfiguration.AnyKeywordDescription": "盡量控制在150個字符內", "codemetrics.basics.ComplexityLevelHighDescription": "代碼質量不錯", "codemetrics.basics.ComplexityLevelLow": 1, "codemetrics.basics.ComplexityLevelLowDescription": "代碼已優化", "codemetrics.basics.DiagnosticsEnabled": true, "codemetrics.basics.ComplexityLevelNormalDescription": "代碼達標", "codemetrics.nodeconfiguration.CallExpressionDescription": "Cakoexpression", "codemetrics.nodeconfiguration.BreakStatementDescription": "Break atement", "codemetrics.nodeconfiguration.CaseClauseDescription": "Case 語句", "codemetrics.nodeconfiguration.JsxSelfClosingElementDescription": "Jsx元素閉合", "codemetrics.nodeconfiguration.JsxElementDescription": "這是Jsx元素", "codemetrics.nodeconfiguration.LabeledStatementDescription": "標記語句", "codemetrics.nodeconfiguration.MethodDeclarationDescription": "方法聲明", "codemetrics.nodeconfiguration.MethodSignatureDescription": "Method Signature", "codemetrics.nodeconfiguration.NamedImports": 1, "codemetrics.nodeconfiguration.ModuleDeclaration": 1, "codemetrics.nodeconfiguration.ModuleDeclarationDescription": "模塊聲明", "codemetrics.nodeconfiguration.NamedImportsDescription": "命名導入", "codemetrics.nodeconfiguration.NamespaceImport": 1, "codemetrics.nodeconfiguration.NamespaceImportDescription": "命名空間導入", "codemetrics.nodeconfiguration.SwitchStatementDescription": "Switch 語句", "codemetrics.nodeconfiguration.ThrowStatementDescription": "Throw語句", "codemetrics.nodeconfiguration.TryStatementDescription": "Try catch語句", "codemetrics.nodeconfiguration.VariableStatementDescription": "變量聲明", "codemetrics.nodeconfiguration.VariableStatement": 1, "codemetrics.nodeconfiguration.ClassDeclarationDescription": "類聲明", "codemetrics.nodeconfiguration.ClassDeclaration": 1, "codemetrics.nodeconfiguration.ReturnStatementDescription": "返回語句", "codemetrics.nodeconfiguration.IfStatementDescription": "if 語句", "codemetrics.nodeconfiguration.ArrowFunctionDescription": "箭頭函數", "codemetrics.nodeconfiguration.ConditionalExpressionDescription": "三目運算語句", "codemetrics.nodeconfiguration.CatchClauseDescription": "Catch Case語句", "codemetrics.nodeconfiguration.ConstructorDescription": "構造函數", "codemetrics.basics.ComplexityLevelNormal": 3, "codemetrics.basics.ComplexityTemplate": "圈復雜度為 {0}，{1}", "codemetrics.basics.ComplexityColorExtreme": "#ff0000", "codemetrics.basics.ComplexityColorHigh": "#e6a23c", "codemetrics.basics.ComplexityColorNormal": "#4bb14f", }
更多配置，請看vscode設置選項。
使用效果如下：
點擊可追蹤具體代碼結構。
遠程訪問插件
vscode-SFTP------ 方便快捷的通過FTP/SFTP連接服務器。
PS：配置vscode設置文件。（命令創建）
會在項目根目錄生成一個配置文件 （.vscode/sftp.json），配置完會自動連接。
{ "name": "xxx", "host": "192.168.0.1", "protocol": "ftp", "port": 21, "username": "abc", "password": "******", "remotePath": "/home/statics", "watcher": { "files": "dist/*.{js,css}", "autoUpload": false, "autoDelete": false } }
更多配置，請看vscode設置選項。
使用效果如下：
可以在側邊菜單欄查看ftp文件管理器。
只有對文件刪除操作，沒有其他操作。（刪除之后，如果看到文件還存在的話，建議刷新或是關閉項目再打開，文件管理器更新不及時）
可以在項目管理器快速將文件或文件夾上傳/下載到服務器。（文件是上傳/下載，文件夾是同步/上傳/下載）
補充：如果需要使用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-Copy Relative Path ----- 復制相對路徑 。（vscode的自帶復制路徑功能是反斜杠的）
vscode-ASCIIDecorator ------ ASCII字符生成。（代碼注釋逼格工具）
vscode-Banner Comments + ------ 另一款ASCII字符生成。（代碼注釋逼格工具）
vscode-fileheader ------ 快速生成文件頭注釋，保存文件自動添加修改時間。（容易跟蹤文件修改記錄）
vscode-REST Client ----- 輕量級http請求測試。（Api接口測試，類似於postman）
PS：復雜數據提交（圖片，視頻）建議還是用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管理工具。
vscode-git-commit-plugin ----- 書寫git提交規范消息。
PS：git消息規范來自AngularJS社區。
vscode-Version Lens -----增強vscode的npm包版本管理工具。
vscode-Dependency Analytics ------ 依賴分析第三庫的漏洞。
vscode-Code Spell Checker ----- 檢查拼寫工具。
vscode-Local History ----- 本地文件歷史記錄。（不用版本控制也能檢查文件修改歷史）
使用建議
按需安裝Visual Studio Code插件，建議控制安裝數量在三十個插件以內，否則會影響Visual Studio Code使用性能。