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

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

文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问。

外观

主题

这里我分享两款主题:

  1. Material Theme

效果如图:

Material Theme

  1. An Old Hope Theme

效果如图:

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

FiraCode-Medium字体

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

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

代码管理

格式化

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

Beautify

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

Prettier

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

代码检查

  1. ESLint :检查 js 语法规范,你可以使用不同的规范,如 airbnb 、standard 、google
  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 :可以把代码生成图片(有些地方发代码结构会乱也没有代码高亮,这时候就可以生成图片再发)。

编辑技巧

光标

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

⌘ - ↑ 或 ⌘ - ↓

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

⌘ - ← 或 ⌘ - →

  1. 按单词移动

⌥ - ← 或 ⌥ - →

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

⌥ - ⌃ - ← 或 ⌥ - ⌃ - →

选择

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

⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓

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

⇧ - ⌘ - ← 或 ⇧ - ⌘ - →

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

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

  1. 伸缩选择

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

  1. 选择匹配单词

⌘ - D 或 ⌘ - U

  1. 向上或向下移动行

⌥ - ↑ 或 ⌥ - ↓

  1. 复制或删除行

⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K

  1. 多行合并成一行

⌘ - J

  1. 缩进或伸缩行

⌘ - [ 或 ⌘ - ]

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

⌘ - ↩ 或 ⌘ - ⇧ - ↩

多行

  1. 鼠标点击,多行编辑

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

  1. 使用快捷键多行编辑

⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑

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

⇧ - ⌥ - I

  1. 选择栏位

按 ⇧ - ⌘ 再选择栏位

⇧ - ⌘

高级

  1. 查看类或方法的定义
  • 按 ⌥ 点击,可以在新页面查看
  • 按 ⇧ - ⌥ - ⌘ 点击,可以在新组查看
  • 按 ⇧ - F12 点击,可以在当前页面查看

查看定义

  1. 折叠代码

⌥ - ⌘ - ] 或 ⌥ - ⌘ - [

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

⌘ - K 、 ⌘ - X

  1. 定位到指定行号

⌃ - G

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

@

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

搜索快捷键

关注下面的标签,发现更多相似文章

VS Code:让你工作效率翻倍的23个插件和23个编辑技巧的更多相关文章

  1. 老师傅珍藏多年CAD常用快捷键合集,收藏,工作效率翻倍!

    想要熟练操作CAD,做一名出色的CAD绘图员,少不了勤学苦练,还要掌握一些常用的绘图命令以及常用快捷键. 今天就来跟大家分享超全的CAD绘图命令,以及常用快捷键,学会涨工资! 常用快捷键: CTRL快 ...

  2. python virtual env 使用 jupyter ipython notebook,舒服了, 工作效率翻倍

    话不多说,尊重原作者 知乎链接

  3. 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍

    在Chrome网上应用店中查找扩展程序 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍 可扩展的Chrome Web浏览器比某些人认识的功能强大得多.您可以自定义浏览体验,使其 ...

  4. 掌握这些springboot的配置方式,让你工作效率翻个倍!

    springboot的多种配置方式 java配置主要靠java类和一些注解,比较常用的注解有: @Configuration :声明一个类作为配置类,代替xml文件 @Bean :声明在方法上,将方法 ...

  5. 会了这十种Python优雅的写法,让你工作效率翻十倍,一人顶十人用!

      我们都知道,Python 的设计哲学是「优雅」.「明确」.「简单」.这也许很多人选择 Python 的原因.但是我收到有些伙伴反馈,他写的 Python 并不优雅,甚至很臃肿,那可能是你的姿势不对 ...

  6. Goland 这些技巧,学会开发效率翻倍!

    hi, 大家好,我是 hhf. <Goland 这些实操技巧,你可能还不会!>介绍了日常开发中一些比较好用的技巧.本篇文章继续介绍一些其他比较好用的技巧. 自定义结构 tag Goland ...

  7. Linux进阶:让效率翻倍的Bash技巧(一)

    http://blog.tpircsboy.com/tech/bash-skills-part1/

  8. 程序员必备,一款让你提高工作效率N倍的神器uTools

    下载地址:https://www.aliyundrive.com/s/f7PU7QxdxEz uTools 是什么? uTools = your tools(你的工具集) uTools 是一个极简.插 ...

  9. 干货:用好这13款VSCode插件,工作效率提升10倍

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 大家好我是lemon, 马上进入我们今天的主题吧. 又 ...

随机推荐

  1. django + nginx + uwsgi

    server{ listen ; server_name 0.0.0.0; charset utf-; access_log /var/log/nginx/access.log main; locat ...

  2. 【Django】重定向

    view函数中使用重定向方法 return HttpResponseRedirect('redir2.html')的时候不自觉的在前面加了request参数,结果报错: TypeError at /b ...

  3. 大数据学习笔记2 - 分布式文件系统HDFS(待续)

    分布式文件系统结构 分布式文件系统是一种通过网络实现文件在多台主机上进行分布式存储的文件系统,采用C/S模式实现文件系统数据访问,目前广泛应用的分布式文件系统主要包括GFS和HDFS,后者是前者的开源 ...

  4. SpriteKit 关于categoryBitMask collisionBitMask contactTestBitMask 遇到的一些问题

    手写copy一下官方解释 首先是categoryBitMask /** 定义了这个物理刚体是属于哪个类别的掩码 .在一个场景中的每个物理刚体可以分配给达到 32 不同的类别(参数 int bitmas ...

  5. HDU 4780 Candy Factory(拆点费用流)

    Problem Description   A new candy factory opens in pku-town. The factory import M machines to produc ...

  6. stark组件开发之列表页面应用示例

    已经解决的,自定义的扩展函数,功能.但是 不可能返回. 一个 固定的页面把!  应该是,点击那条 记录之后的编辑, 就会跳转到相应的,编辑页面.所以 这个标签的  <a href="/ ...

  7. centos中单进程监控

    [root@k8s6 proc]# ps aux|grep -v PID|sort -rn -k +|head - root ? Ssl : : /usr/bin/dockerd root ? Ssl ...

  8. Zip包解压工具类

    最近在做项目的自动检测离线升级,使用到了解压zip包的操作,本着拿来主义精神,搞了个工具类(同事那边拿的),用着还不错. package com.winning.polaris.admin.utils ...

  9. 自己封装的简单DbDao

    首先,DbDao是一个用来操作数据库的类.需要对数据库的驱动包 要操作数据库首先要获得链接,这时候就需要链接数据库的所有参数了,包括driver,url,user,password.(全部定义为pri ...

  10. mysql数据库到底是什么?!

    MySql是MySql.AB公司开发的,采用客户/服务器模型的开放源码关系型SQL数据库管理系统,它可以在多种操作系统上运行. 客户端/服务器:C/S.需要给不同系统安装不同的软件,是专用的协议,比较 ...