乐趣区

关于编辑器:从零开始配置VsCode环境安装常用插件主题和修改配置

jiezi

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

退出移动版