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

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

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

外观

主题

这里我分享两款主题：

1.Material Theme

效果如图：

2.An Old Hope Theme

效果如图：

图标

3.Material Icon Theme

当然，这两款主题的文件管理器（左侧）的 icon 小图标使用的是 Material Icon Theme。

字体及其他

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

1. {

2.    "editor.multiCursorModifier": "ctrlCmd",

3.    "editor.formatOnPaste": false,

4.    "workbench.activityBar.visible": false,

5.    "workbench.iconTheme": "eq-material-theme-icons-darker",

6.    "workbench.colorCustomizations": {},

7.    "materialTheme.cache.workbench.settings": {

8.        "themeColours": "Darker",

9.        "accentPrevious": "Acid Lime"

10.    },

11.    "workbench.colorTheme": "Material Theme Darker",

12.    "material-icon-theme.angular.iconsEnabled": true,

13.    "material-icon-theme.folders.icons": "specific",

14.    "editor.lineHeight": 24,

15.    "editor.fontLigatures": true,

16.    "editor.fontFamily": "FiraCode-Medium"

17. }

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

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

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

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

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

代码管理

格式化

4.Beautify

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

5.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 安装了插件或者修改了配置，回到家或公司又要重新弄一次，这个插件就能解决问题，同步多台电脑设置。

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

22.gi

可以给 .gitignore 文件添加各种语言忽略文件配置。

23.Polacode

可以把代码生成图片（有些地方发代码结构会乱也没有代码高亮，这时候就可以生成图片再发）。

编辑技巧

光标

1.把光标移到文件的首部活尾部

2.把光标移动到行的首部或者尾部

3.按单词移动

4.按单词大小写分解移动光标

选择

5.选择行以上或以下全部内容

6.选择到行首或行尾的内容

7.按字母或单词选择

• ⇧ - ← 、 ⇧ - → 按字母选择

• ⇧ - ⌥ - ← 、 ⇧ - ⌥ - → 按单词选择

8.伸缩选择

9.选择匹配单词

行

10.向上或向下移动行

11.复制或删除行

12.多行合并成一行

13.缩进或伸缩行

14.在当前行之上或下插入行

多行

15.鼠标点击，多行编辑

按⌘选择编辑点，按⎋退出多行编辑：

16.使用快捷键多行编辑

17.在所选择的行的结尾插入编辑点

18.选择栏位

按⇧-⌘再选择栏位：

高级

19.查看类或方法的定义

• 按 ⌥ 点击，可以在新页面查看

• 按 ⇧ - ⌥ - ⌘ 点击，可以在新组查看

• 按 ⇧ - F12 点击，可以在当前页面查看

20.折叠代码

21. 去掉选择行的尾部空格

22.定位到指定行号

23.在文件里查找类或方法

最后，如果记不住这些快捷键，可以按⌘-K、⌘-S搜索对应快捷键绑定：