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

34次阅读

共计 2236 个字符,预计需要花费 6 分钟才能阅读完成。

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

正文完
 0