macOS版VSCode实用技巧,巧用快捷键,让你的编码飞起来

VSCode功能很强大,这里只列举了一些常用的技巧,更多黑科技请移步官方文档

一、快捷键

1.查看快捷键

菜单路径:Code / Preferences / KeyboardShortCuts
快捷键:[⌘ K] [⌘ S]

2.macOS常用快捷键

特殊符号映射关系
⌘ - Command
⇧ - Shift
⌃  - Control
⌥ - Option

========= 官方推荐 =========
所有命令:[⇧ ⌘ P]
打开文件:[⌘ P]
文件中搜索:[⇧ ⌘ F]
开始Debug:[F5]
打开 / 隐藏命令行:[⌃ `]
========= 编辑操作 =========
向上复制行:[⇧ ⌥ ↑]
向下复制行:[⇧ ⌥ ↓]
删除所选行:[⇧ ⌘ K]
向上移动行:[⌥ ↑]
向下移动行:[⌥ ↓]
选中一个词:[⌘ D]
多行注释:[⇧ ⌥ A]
单行注释:[⌘ /]
========= 其它操作 =========
跳转到某行:[⌃ G]
收起代码块:⌥ + ⌘ + [
展开代码块:⌥ + ⌘ + ]
展开 / 收起代码块:[⌘ K] [⌘ L]
打开Settings: [⌘ ,]
开启多行编辑:[⇧ ⌥]
打开 / 隐藏侧边栏:[⌘ B]
打开Explorer面板:[⇧ ⌘ E]
打开插件面板:[⇧ ⌘ X]
删除文件:[⌘ Delete]
==========================

3.多行操作

上下排列整齐时,直接按住 [⇧ ⌥],同时鼠标垂直向下划动,划出一条闪烁的垂直线,这时直接编辑即可,编辑过程中,按方向键←或→可以移动到目标位置
VSCode多行操作
对于开头规则但结尾不规则的行,编辑过程中,可以再次按住 [⇧ ⌥],同时通过方向键←或→选择不等长的单词。比如这里可以把 clickBaidu, clickGoogle, clickBing 改成同名函数 handleClick
在这里插入图片描述
对于不是很规则的行,先按住⌥,再依次点击不同行需要编辑的位置,然后释放 ⌥ 并开始编辑
VSCode多行操作

二、格式化

进行代码格式化之前,需要先配置 Formatter。但对于JavaScript, TypeScript, JSON, 和 HTML,VSCode 有默认的格式化器,不需要额外的配置

全局格式化

格式化整个文件中的代码,快捷键为 [⇧ ⌥ F]

局部格式化

如果要使用局部格式化,建议先取消保存自动格式化
只格式化选中的代码,快捷键为 [⌘ K] [⌘ F]

三、代码片段

代码片段可以大大简化重复代码的编写,在VSCode中可以很方便地维护自定义的代码片段,这些代码片段是一些JSON格式的模板,定义在 ~/Library/Application Support/Code/User/snippets 目录下

比如,在 javascript.json 文件中定义了如下代码片段

{
    
    
	"Axios Get Request": {
    
    
		"prefix": "axios-get",
		"body": [
			"axios.get(${1:url})",
			"\t.then(function (res) {",
			"\t\t$2// 按Tab键会跳转到这一行",
			"\t})",
			"\t.catch(function (err) {",
			"\t\t$3// 再次按Tab键会跳转到这一行",
			"\t})"
		],
		"description": "Generate axios GET request"
	}
}

使用时,只需要输入 axios-get / ag 并按Tab / Enter 键,就可以自动生成代码
在这里插入图片描述
代码生成后,光标会停在 url 所在的位置($1),按下 Tab 键会依次切换到 res 和 err 所在的代码块,这是由代码片段中的$2, $3 占位符绑定的

四、常用插件

VSCode有非常丰富的插件库,可以到 官网 查看,这里只列举一些常用的插件

indent-rainbow

增加代码缩进的层次感
indent-rainbow

Vetur / Volar

Vue开发助手
Vetur

Live Server

快速启动本地服务器,并支持动态更新静态资源
Live Server

open in browser

快速选择浏览器并打开HTML文件,这个插件有好几个,选择下载量最大那个就行了open in browser

Auto Rename Tag

Auto Rename Tag
一个案例

<div>test line</div>

<!-- 修改为如下代码 -->
<p>test line</p>

如果没有这个插件,需要先修改 div 开始标签,再修改 div 结束标签

Local History

Local History
使用示例
Local History

参考文档

VSCode官方文档:链接
VSCode插件库:链接

猜你喜欢

转载自blog.csdn.net/u013481793/article/details/127456865