从零开始配置VsCode环境，安装常用插件、主题和修改配置

每次换新的开发环境都要重新安装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中使用。