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

VS Code

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

文章详情可查阅我的博客：https://lishaoy.net

外观

主题

这里我分享两款主题：

1.Material Theme

效果如图：

Material Theme

2.An Old Hope Theme

效果如图：

An Old Hope Theme

图标

3.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 字体更多效果可查阅 https://github.com/tonsky/FiraCode 地址。

代码管理

格式化

4.Beautify ：格式化的时候，给出格式化文本选项，如下

Beautify

5.Prettier ：个人比较喜欢这个，看起来代码更清晰，如下

Prettier

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

代码检查

6.ESLint ：检查 js 语法规范，你可以使用不同的规范，如 airbnb 、standard 、google。
7.TSLint ：检查 typescript 语法规范。
8.Stylelint ：检查 CSS/SCSS/Less 语法规范。
9.Markdownlint ：检查 markdown 语法规范。

自动补全

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

10.Emmet ：大家应该很熟悉这个插件了（很好用），VS Code 已经内置了，很到位。
11.Auto Close Tag ：自动闭合 html 等标签（</...>）。
12.Auto Rename Tag ：修改 html 标签时，自动修改闭合标签。
13.Path Intellisense ：自动提示补全路径。

代码片段

14.snippets ：搭建可以自己安装各种代码片段（vue、react、angular等），这里就不列举。

功能扩展

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

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