您所在的位置:首页 / 行业动态

VS Code:让你工作效率翻倍的插件和编辑技巧

2018.10.18

7183

男神苟毅

总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来。

外观

主题

这里我分享两款主题:

  1. Material Theme

效果如图:

Material Theme

Material Theme

  1. An Old Hope Theme

效果如图:

An Old Hope ThemeAn Old Hope Theme

图标

  1. Material Icon Theme 当然,这两款主题的文件管理器(左侧)的 icon 小图标使用的是 Material Icon Theme

字体及其他

其他和外观相关的设置如下:

{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": false, "workbench.activityBar.visible": false, "workbench.iconTheme": "eq-material-theme-icons-darker", "workbench.colorCustomizations": {}, "materialTheme.cache.workbench.settings": { "themeColours": "Darker", "accentPrevious": "Acid Lime" }, "workbench.colorTheme": "Material Theme Darker", "material-icon-theme.angular.iconsEnabled": true, "material-icon-theme.folders.icons": "specific", "editor.lineHeight": 24, "editor.fontLigatures": true, "editor.fontFamily": "FiraCode-Medium" } 复制代码

特别注意的是"editor.lineHeight": 24,和"editor.fontFamily": "FiraCode-Medium"。

"editor.lineHeight": 24,: 设置代码的行间距,这里比默认的稍大些,就这一点小小的改变,让代码看起来清爽整洁。

"editor.fontFamily": "FiraCode-Medium": 设置字体,这种字体会让代码看起来更形象生动,如下

no-shadow

FiraCode-Medium字体

红色竖线左边是使用了 FiraCode-Medium 字体的效果,红色竖线右边是没有使用 FiraCode-Medium 字体的效果

关于 FiraCode-Medium 字体更多效果可查阅 github.com/tonsky/Fira… 地址。

代码管理

格式化

  1. Beautify :格式化的时候,给出格式化文本选项,如下

Beautify

  1. Prettier :个人比较喜欢这个,看起来代码更清晰,如下

Prettier

当然,大家可以自定义快捷键,也可以按⌘-⇧-P来搜索相关命令

代码检查

  1. ESLint :检查js语法规范,你可以使用不同的规范,如 airbnbstandardgoogle
  2. TSLint :检查typescript语法规范。
  3. Stylelint :检查CSS/SCSS/Less语法规范。
  4. Markdownlint :检查markdown语法规范。

自动补全

以下插件点击链接可以查看gif动图,详细了解具体功能。

  1. Emmet :大家应该很熟悉这个插件了(很好用),VS Code 已经内置了,很到位。
  2. Auto Close Tag :自动闭合html等标签 ()。
  3. Auto Rename Tag :修改html标签时,自动修改闭合标签。
  4. Path Intellisense :自动提示补全路径。

代码片段

  1. snippets :搭建可以自己安装各种代码片段(vue、react、angular等),这里就不列举。

功能扩展

以下的功能扩展插件大部分都有gif动图,可点击链接了解详细功能

  1. Bracket Pair Colorizer :让代码的各种括号呈现不同的颜色。
  2. Code Runner :可以在编辑器里直接运行代码,查看结果。
  3. Color Picker :可以直接在编辑器里打开色板,选择各种模式的颜色。
  4. Document This :可以给函数、类等自动的加上详细的注释。
  5. Git History :方便的查看git版本管理的详细信息。
  6. Live Server :可以一键在本地启动服务器。
  7. Settings Sync :重点介绍下这个插件,如果你有两台电脑(比如,家里和公司)都使用 VS Code ,可是在公司或家里对 VS Code 安装了插件或者修改了配置,回到家或公司又要重新弄一次,这个插件就能解决问题,同步多台电脑设置。

只需要把配置上传到GitHub,在另一个地方下载配置即可,如下

Settings Sync

  1. gi :可以给.gitignore文件添加各种语言忽略文件配置。
  2. Polacode :可以把代码生成图片(有些地方发代码结构会乱也没有代码高亮,这时候就可以生成图片再发)。


相关新闻

VS Code:让你工作效率翻倍的插件和编辑技巧

2018.10.18

7183

总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来。