VS Code:让你工作效率翻倍的23个插件和23个编辑技巧
VS Code:让你工作效率翻倍的23个插件和23个编辑技巧
总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来。
文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问。
外观
主题
这里我分享两款主题:
效果如图:
Material Theme
效果如图:
An Old Hope Theme
图标
- 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… 地址。
代码管理
格式化
- Beautify :格式化的时候,给出格式化文本选项,如下
Beautify
- Prettier :个人比较喜欢这个,看起来代码更清晰,如下
Prettier
当然,大家可以自定义快捷键,也可以按 ⌘ - ⇧ - P 来搜索相关命令
代码检查
- ESLint :检查
js
语法规范,你可以使用不同的规范,如 airbnb 、standard 、google。 - TSLint :检查
typescript
语法规范。 - Stylelint :检查
CSS/SCSS/Less
语法规范。 - Markdownlint :检查
markdown
语法规范。
自动补全
以下插件点击链接可以查看gif动图,详细了解具体功能。
- Emmet :大家应该很熟悉这个插件了(很好用),VS Code 已经内置了,很到位。
- Auto Close Tag :自动闭合
html
等标签 (</...>)。 - Auto Rename Tag :修改
html
标签时,自动修改闭合标签。 - Path Intellisense :自动提示补全路径。
代码片段
- snippets :搭建可以自己安装各种代码片段(vue、react、angular等),这里就不列举。
功能扩展
以下的功能扩展插件大部分都有gif动图,可点击链接了解详细功能
- Bracket Pair Colorizer :让代码的各种括号呈现不同的颜色。
- Code Runner :可以在编辑器里直接运行代码,查看结果。
- Color Picker :可以直接在编辑器里打开色板,选择各种模式的颜色。
- Document This :可以给函数、类等自动的加上详细的注释。
- Git History :方便的查看git版本管理的详细信息。
- Live Server :可以一键在本地启动服务器。
- Settings Sync :重点介绍下这个插件,如果你有两台电脑(比如,家里和公司)都使用 VS Code ,可是在公司或家里对 VS Code 安装了插件或者修改了配置,回到家或公司又要重新弄一次,这个插件就能解决问题,同步多台电脑设置。
只需要把配置上传到GitHub,在另一个地方下载配置即可,如下
Settings Sync
编辑技巧
光标
- 把光标移到文件的首部活尾部
⌘ - ↑ 或 ⌘ - ↓
- 把光标移动到行的首部或者尾部
⌘ - ← 或 ⌘ - →
- 按单词移动
⌥ - ← 或 ⌥ - →
- 按单词大小写分解移动光标
⌥ - ⌃ - ← 或 ⌥ - ⌃ - →
选择
- 选择行以上或以下全部内容
⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓
- 选择到行首或行尾的内容
⇧ - ⌘ - ← 或 ⇧ - ⌘ - →
- 按字母或单词选择
- ⇧ - ← 、 ⇧ - → 按字母选择
- ⇧ - ⌥ - ← 、 ⇧ - ⌥ - → 按单词选择
⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、 ⇧ - ⌥ - →
- 伸缩选择
⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →
- 选择匹配单词
⌘ - D 或 ⌘ - U
行
- 向上或向下移动行
⌥ - ↑ 或 ⌥ - ↓
- 复制或删除行
⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K
- 多行合并成一行
⌘ - J
- 缩进或伸缩行
⌘ - [ 或 ⌘ - ]
- 在当前行之上或下插入行
⌘ - ↩ 或 ⌘ - ⇧ - ↩
多行
- 鼠标点击,多行编辑
按 ⌘ 选择编辑点,按 ⎋ 退出多行编辑
⌘
- 使用快捷键多行编辑
⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑
- 在所选择的行的结尾插入编辑点
⇧ - ⌥ - I
- 选择栏位
按 ⇧ - ⌘ 再选择栏位
⇧ - ⌘
高级
- 查看类或方法的定义
- 按 ⌥ 点击,可以在新页面查看
- 按 ⇧ - ⌥ - ⌘ 点击,可以在新组查看
- 按 ⇧ - F12 点击,可以在当前页面查看
查看定义
- 折叠代码
⌥ - ⌘ - ] 或 ⌥ - ⌘ - [
- 去掉选择行的尾部空格
⌘ - K 、 ⌘ - X
- 定位到指定行号
⌃ - G
- 在文件里查找类或方法
@
最后,如果记不住这些快捷键,可以按 ⌘ - K 、 ⌘ - S 搜索对应快捷键绑定
搜索快捷键
VS Code:让你工作效率翻倍的23个插件和23个编辑技巧的更多相关文章
- 老师傅珍藏多年CAD常用快捷键合集,收藏,工作效率翻倍!
想要熟练操作CAD,做一名出色的CAD绘图员,少不了勤学苦练,还要掌握一些常用的绘图命令以及常用快捷键. 今天就来跟大家分享超全的CAD绘图命令,以及常用快捷键,学会涨工资! 常用快捷键: CTRL快 ...
- python virtual env 使用 jupyter ipython notebook,舒服了, 工作效率翻倍
话不多说,尊重原作者 知乎链接
- 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍
在Chrome网上应用店中查找扩展程序 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍 可扩展的Chrome Web浏览器比某些人认识的功能强大得多.您可以自定义浏览体验,使其 ...
- 掌握这些springboot的配置方式,让你工作效率翻个倍!
springboot的多种配置方式 java配置主要靠java类和一些注解,比较常用的注解有: @Configuration :声明一个类作为配置类,代替xml文件 @Bean :声明在方法上,将方法 ...
- 会了这十种Python优雅的写法,让你工作效率翻十倍,一人顶十人用!
我们都知道,Python 的设计哲学是「优雅」.「明确」.「简单」.这也许很多人选择 Python 的原因.但是我收到有些伙伴反馈,他写的 Python 并不优雅,甚至很臃肿,那可能是你的姿势不对 ...
- Goland 这些技巧,学会开发效率翻倍!
hi, 大家好,我是 hhf. <Goland 这些实操技巧,你可能还不会!>介绍了日常开发中一些比较好用的技巧.本篇文章继续介绍一些其他比较好用的技巧. 自定义结构 tag Goland ...
- Linux进阶:让效率翻倍的Bash技巧(一)
http://blog.tpircsboy.com/tech/bash-skills-part1/
- 程序员必备,一款让你提高工作效率N倍的神器uTools
下载地址:https://www.aliyundrive.com/s/f7PU7QxdxEz uTools 是什么? uTools = your tools(你的工具集) uTools 是一个极简.插 ...
- 干货:用好这13款VSCode插件,工作效率提升10倍
文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 大家好我是lemon, 马上进入我们今天的主题吧. 又 ...
随机推荐
- Linux 下监控用户最大进程数参数(nproc)是否到达上限的步骤:
https://www.cnblogs.com/autopenguin/p/6184886.html 1.查看各系统用户的进程(LWP)数: 注意:默认情况下采用 ps 命令并不能显示出所有的进程.因 ...
- jsp相关笔记(三)
在往数据库的表中写入数据时,一定要与表中的每一项对应,比如表中有三项,则写入的值也应该是三类: String getTitle=request.getParameter("title&quo ...
- 网络虚拟化技术(二): TUN/TAP MACVLAN MACVTAP (转)
网络虚拟化技术(二): TUN/TAP MACVLAN MACVTAP 27 March 2013 TUN 设备 TUN 设备是一种虚拟网络设备,通过此设备,程序可以方便得模拟网络行为.先来看看物理设 ...
- tar: Removing leading `/' from member names
解决办法使用 -P 参数 注意 -f 参数后面跟压缩后的文件名
- [Algorithm]Algorithm章1 排序算法
1.冒泡排序-相邻交换 (1)算法描述 冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也 ...
- thymeleaf学习笔记:总结
Thymeleaf定义:Thymeleaf is a modern server-side Java template engine for both web and standalone envir ...
- android 学习网站
菜鸟教程 http://www.runoob.com/android/android-tutorial.html Android基础入门教程 http://www.runoob.com/w3cnot ...
- using五大用法
1.命名空间 using namespace 命名空间;//这样每次使用命名空间中的变量时就不用指定命名空间了 注意:头文件中不应有using命名空间的声明 2.类型别名(C++11) using a ...
- 软件推荐-c#绘图插件echart
首先给出官网:http://echarts.baidu.com/examples/ 简单的教程:http://www.cnblogs.com/youmeng/p/4874897.html
- 1.8 新特性之 Lambda Expressions
Lambda expressions are allowed only at source level 1.8 or above The target type of this expression ...