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 语法规范,你可以使用不同的规范,如 airbnbstandardgoogle
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.折叠代码

⌥ - ⌘ - ] 或 ⌥ - ⌘ - [

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

⌘ - K 、 ⌘ - X

22.定位到指定行号

⌃ - G

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

@

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

搜索快捷键

阅读 13.8k

前端专业搬砖
专注于前端技术分享

爱好摄影的程序猿

1.7k 声望
946 粉丝
0 条评论
你知道吗?

爱好摄影的程序猿

1.7k 声望
946 粉丝
宣传栏