前端开发工具 VSCode 让你工作效率翻倍的 23 个插件和技巧

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

总结了一些平时常用且好用的 VSCode 的插件和编辑技巧分享出来，使你的工作效率翻倍。

外观

主题

这里我分享两款主题：

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" ： 设置字体，这种字体会让代码看起来更形象生动，如下

FiraCode-Medium 字体

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

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

Settings Sync

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

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

编辑技巧

光标

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

⌘ - ↑ 或 ⌘ - ↓

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

3. 按单词移动

⌥ - ← 或 ⌥ - →

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

⌥ - ⌃ - ← 或 ⌥ - ⌃ - →

选择

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

⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓

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

⇧ - ⌘ - ← 或 ⇧ - ⌘ - →

7. 按字母或单词选择

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

⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、⇧ - ⌥ - →

8. 伸缩选择

⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →

9. 选择匹配单词

⌘ - D 或 ⌘ - U

行

10. 向上或向下移动行

⌥ - ↑ 或 ⌥ - ↓

11. 复制或删除行

⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K

12. 多行合并成一行

⌘ - J

13. 缩进或伸缩行

⌘ - [ 或 ⌘ - ]

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

⌘ - ↩ 或 ⌘ - ⇧ - ↩

多行

15. 鼠标点击，多行编辑

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

⌘

16. 使用快捷键多行编辑

⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑

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

⇧ - ⌥ - I

18. 选择栏位

按 ⇧ - ⌘ 再选择栏位

⇧ - ⌘

高级

19. 查看类或方法的定义

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

查看定义

20. 折叠代码

![⌥ - ⌘ - ] 或 ⌥ - ⌘ -
⌥ - ⌘ - ] 或 ⌥ - ⌘ - [

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

⌘ - K 、 ⌘ - X

22. 定位到指定行号

⌃ - G

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

@

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

搜索快捷键

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