使人驚歎的Visual Studio Code插件

時間 2019-11-19

標籤使人驚歎 visual studio code 插件欄目 Visual Studio 简体版

原文原文鏈接

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

代碼編輯插件

vscode-color-highlight ------ 顏色代碼高亮插件。（sublime text也有）css

vscode-Path Intellisense ----- 文件路徑提示。（sublime text也有）html

vscode-copy-relative-path ------ 複製文件相對路徑。（輔助書寫路徑的工具）前端

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

vscode-removeEmptyLines ----- 可以迅速刪除多行空白。（自動刪除全部代碼空行）java

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

vscode-ECMAScript Quotes Transformer ------ js中html轉義。（終於找到這個插件了，一直苦於手動去轉義js中的html）mysql

vscode-Bracket Pair Colorizer ----- 自動標識相匹配括號的顏色。（加強了vscode的括號提示）git

vscode-Prettier formatter ------ vscode代碼格式加強工具。（標準格式化工具）web

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-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環境命令。

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定義跳轉功能）

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-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-SSH FS------經過SSH協議登陸服務器，能夠操做服務器文件。

PS：配置vscode設置文件。（若是須要使用Terminal的話，請使用第三方SSH客戶端SmarTTY或mobaXterm。）

{
    "sshfs.configs": [
        {
            "name": "test",
            "label": "test",
            "root": "/root",
            "host": "192.168.0.1",
            "port": 22,
            "username": "root",
            "agent": "pageant",
            "password": "********"
        }
    ]
}

SSH鏈接服務。

SSH鏈接成功以後，就能夠操做文件了。

補充：若是須要使用Terminal的話，請使用第三方SSH客戶端（SmarTTY或mobaXterm）。