每次换新的开发环境都要重新安装vscode的插件，而且之前更改的配置项也要重新配置。在这里把罕用的VsCode插件和配置都记录下来，留着当前查看。

设施同步

Settings Sync, 能够把本人装置的插件和配置都同步到Github上，到新的环境中间接装置Settings Sync之后同步就好了。罢黜了每到新环境都要重新配置VsCode的难堪。

同步步骤
  • 装置插件之后，首先会让你登录Github帐号，把以后配置和Github帐号关联起来
  • 在老的环境中装置Setting Sync之后，通过Ctrl|Cmd + P之后输出> sync,抉择Update/Upload Settings，会把以后的配置同步到Github上。
  • 在新的环境中装置Setting Sync之后，通过Ctrl|Cmd + P之后输出> sync,抉择Download Settings，会把配置从Github同步到本地并主动装置插件。
罕用插件
Bookmarks

Bookmarks，能够在文件中做标记，能够在以后文件中在标记高低来回跳转。我的项目右边也会有一个Bookmarks的标签，能够点击后看到我的项目中所有的标记。

indent-rainbow

indent-rainbow, 我的项目中如果代码太多，而且层级不一样的话，很难看进去成果，这个会在每一级的空格上增加不同的色彩，不便肉眼查看。

Bracket Pair Colorizer 2

[Bracket Pair Colorizer 2
](https://github.com/CoenraadS/... 个别配合indent-rainbow应用，不同的是这个会在每一级的括号上上增加不同的色彩，不便肉眼查看。

GitLens — Git supercharged

GitLens, VsCode的git插件，会有一个独自gitlens标签，能够看到以后分支的提交记录，以及文件的提交记录，也能够和别的分支比照，在文件上点击也会有以后的提交记录。应用很不便。

TODO
  • TODO Highlight, 会高亮 TODO: 、 FIXME： , 然而要留神只能辨认大写，分号也须要带着。曾经有3、4年没有保护了，能够应用todo-tree
  • todo-tree, 高亮todo、fixme并在tree view中显示。
vscode-pdf

vscode-pdf, 能够在VsCode中间接查看PDF文件。

Vue插件
Vetur

Vetur, 对Vue文件的插件工具，包含语法高亮、Emmet、格式化等。在VsCode中关上vue文件也会提醒你要不要装置这个插件。

vue-format

vue-format, vue文件的格式化工具，外面默认应用了js-beautify的配置。

在外面应用的配置：

"vue-format.break_attr_limit": 5,  // 标签中多于几个属性才换行"vue-format.js-beautify": {    "indent_size": "editor.tabSize",    "indent_char": " ",    "indent_with_tabs": false,    "brace-style": "collapse-preserve-inline", // 代码款式，可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline    "wrap_line_length": 12000, //依据须要设置换行长度    "space_after_anon_function": true,    "css": {},    "js": {},    "html": {        "force_format": [            "template"        ]    }}
Vue CSS Peek

Vue CSS Peek, 为单页面的vue文件提供css转定义的反对。在vue template中点击class会浮现相应的款式定义。

Vue文件门路跳转

在Vue中，很多设置了根目录的别名为@，能够装置门路跳转工具辨认，也能够在jsconfig.json中配置paths, paths是绝对于绝对于baseUrl选项计算的门路映射。具体能够参考vscode中的 jsconfig.json。

插件：

  • 别名门路跳转，反对任何我的项目，能够自在配置映射规定，自在配置可缺省后缀名列表
  • Path Intellisense，门路主动补全，最初一次更新曾经是2017年了。不太举荐应用。
VsCode护眼主题

看代码应用默认的主题看了一天之后，感觉眼睛很不难受，涩涩的。就换了护眼主题，用了之后的确感觉难受很多。尽管也比拟喜爱彩色冷酷风，然而为了难受还是换了。

  • tiny light，从H5Builder导过去的主题，和H5Builder配色统一，还有一些个性是从solarized导过去的，用起来挺舒服。当初用的这个主题。
  • Solarized, solarized主题，有dark和light能够抉择，light就是护眼的主题，应用起来也比拟难受。

用了护眼主题之后，下面的indent-rainbow的色彩也须要更改，要不然看起来不太难受。上面是批改的配置：

"indentRainbow.colors": [    "rgba(25, 181, 77, 0.09)",    "rgba(228, 18, 140, 0.15)",    "rgba(255,127,255,0.15)",    "rgba(199, 26, 5, 0.08)",    "rgba(31, 84, 213, 0.15)"]

能够拷贝到Setting.json中应用。