一些能让你提升幸福度的vscode插件（持续更新）

记录一些平时开发感觉还不错的vscode插件（持续更新）

1、Material Theme：主题颜色

2、Material Theme Icons：文件夹主题颜色 

3、Better Comments ：给注释加上不同颜色

4、indent-rainbow：给你的缩进空格处加上不同的颜色，方便查看

5、Bracket Pair Colorizer：标签匹配加颜色，JS括号匹配加颜色插件，附上配置如下：

    "bracketPairColorizer.activeScopeCSS": [
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}"
    ]

6、Highlight Matching Tag：html标签匹配加颜色，附上配置如下

 "highlight-matching-tag.styles": {
        "opening": {
          "name": {
            "highlight": "yellow",
            "custom": {
                "borderWidth": "1px 1px 1px 1px",
                "borderStyle": "dotted",
                "borderColor": "red",
                "borderRadius": "5px",
                "overviewRulerColor": "red"
            }
          }
        }
      },

7、hightlight-selections-vscode：给你选中的相同代码加上颜色，附上配置如下

      "highlightSelections.borderWidth": "2px",
      "highlightSelections.borderColor": "red",

8、background：给你的vscode背景图加上一个背景图

9、Chinese (Simplified) Language Pack for Visual Studio Code：汉化插件

10、Easy Sass：快速把scss文件自动生成css文件的插件，保存后自动生成

11、GitLens — Git supercharged：git的集成插件，可快速切换分支，提交，查看提交记录等

12、Import Cost： 可显示导入文件包的大小

13、javascript console utils：快速生成console.log()的插件

14、open in browser

15、Vetur

16、Image preview：实时预览图片

 

在配上setting.json的代码 

{
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Monokai",
    "gitlens.views.repositories.files.layout": "tree",
    "gitlens.gitCommands.skipConfirmations": [
        "fetch:command",
        "stash-push:command",
        "switch:command",
        "push:command"
    ],
    "bracketPairColorizer.activeScopeCSS": [
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}"
    ],
    "highlight-matching-tag.styles": {
        "opening": {
          "name": {
            "highlight": "yellow",
            "custom": {
                "borderWidth": "1px 1px 1px 1px",
                "borderStyle": "dotted",
                "borderColor": "red",
                "borderRadius": "5px",
                "overviewRulerColor": "red"
            }
          }
        }
      },
      "bracketPairColorizer.forceIterationColorCycle": true,
      "bracketPairColorizer.forceUniqueOpeningColor": true,
      "bracketPairColorizer.highlightActiveScope": true,
      "bracketPairColorizer.showBracketsInGutter": true,
      "editor.occurrencesHighlight": false,
      "editor.selectionHighlight": false,
      "highlightSelections.borderWidth": "2px",
      "highlightSelections.borderColor": "red",
}