快捷键
温馨提示:本文含有大量动图,请确保流量足够
快速打开指定文件
大多数前端开发,在找路由文件时可能时一级一级找,实际上在地址栏复制一下路由名称
按下ctrl + e
,再输入路由名称即可打开。IDEA 快捷键是双击 shfit
快捷跳转
当你在看别人代码时,是不是经常 ctrl + 鼠标左键 进去看,然后回来要滑半天?
那你看看我怎么做,是不是瞬间回来
这个只需要设置一下快捷键即可,默认是没有的,如下图所示
变量 | 文件重命名
大家设置一下对应的快捷键即可,我下图标红的就是。我设置的和 window 快捷键一样, IDEA 默认是shift + F6
如果你的 window 版本过高,那么shift + F6
又会和微软输入法冲突
需要注意的是,变量重命名需要编辑器分析你的代码。所以如果你的代码写的很烂,那么 VSCode 也会被弄得神志不清
所以这项功能在一些 JS 项目可能没有作用
快捷复制
很多人复制当前行,可能是先选中,然后再 CV,实在是太慢了
VSCode 快捷键是 alt + shfit + ↓
,IDEA 是ctrl + d
删除整行
快捷键是 ctrl + shift + k
,这个也能提高很多效率,不用每次都手动删除一行的最后一个空格
快速新开一行
假设你的鼠标不在行末,而在中间,如下图。那么你按下回车会破坏你的代码
此时你仅需按下 ctrl + enter
即可新开一行,IDEA 快捷键是 shift + enter
查看参数
在函数括号内,按下ctrl + shift + space
,即可查看参数类型,以及当前参数的注释
注意,微软输入法可能和这个快捷键冲突,你需要手动关闭微软输入法的快捷键,或者修改VSCode
IDEA 快捷键为 ctrl + p
代码提示
这个在强类型语言上非常实用,以 Typescript 为例。按下 ctrl + i
这个字符串枚举就出来了
批量操作
假设我从某个地方复制很多变量,我需要批量修改。比如说把 my 改成 test,
此时你可能按下 ctrl + f 批量搜索,再批量修改,而这时我已经改完了
在 VSCode 中,批量选中相同的快捷键是 ctrl + shift + l
我上面就是按下此快捷键批量修改的
批量大小写修改
不仅于此,我们再来发掘一下他的功能,比如批量修改大小写
这个需要手动配置,我用的是ctrl + shift + alt + u
扩选范围
如果你需要复制某一段文字,你可能先按下鼠标左键,然后不松手慢慢拖动选中。
但是这种体验太差了,需要非常精确的操作,能不能根据代码自动扩选的呢?
答案是可以的,不过同样要手动设置快捷键,这里我设置的和 IDEA 一样
双击分割
我敢说下面的双击全选,99.99% 的人的 VSCode 都做不到,而是会被 -
分开
仅需设置一下配置即可,按下 ctrl + , 打开配置 editor.wordSeparators
,把不要的分隔符删掉即可
批量移动光标到指定位置
下面这一套丝滑小连招是怎么做的呢?
- 先按住 alt + shift,即可开启列选择模式
- 拖动鼠标选择
- ctrl + →,可以快速跳到分隔位置,这里没有被分隔,所以直接到最后了
- ctl + shift + 左,快速选中并跳转到分隔位置
- 最后执行操作即可
基于上述操作,可以玩出花来,大家可以开动一下脑袋
值得注意的是,ctrl + [shift] + ←
这些快捷键不是编辑器带来的,基本上哪里都能用
快速选中整行
有时候你可能需要选中很长一行,比如打包后的代码,爬到的代码,如果有手拖动那可太折磨人了
于是你可以按下 shift + end 来选中,这个就不放动图,和上面差不多。shift 就是多选的意思
不过有的人的键盘可能没有 end 按键,这时候可以查一下官网,大多数都是配合 FN 键实现
选中指定行
按住 alt 不放,加上鼠标点击即可
而且你不必精确选中列的位置,可以用 end | home 回到开头或者结尾,再配合上面的技巧操作
批量修改正则指定内容
按下 ctrl + f ,把最右边的 .*
勾选上,就是开启正则的意思
然后再输入表达式,\d
即所有数字,$1即匹配到的第一组
按下最右边的全部修改,结果就会改成下图,所有数字都会加上 test 后缀
不止于此,还能整个文件夹批量检索操作
路径操作
很多人可能苦于导入路径没有智能提示,那是因为你的工程没有配置路径别名
比如 @
= /src
,那么你需要创建 tsconfig.json 或者 jsconfig.json
并写入如下配置
json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
最好下个插件 Path Intellisense ,然后在配置文件 setting.json
写入
json
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src",
},
JS 导入
当你需要导入模块时,仅需要输入前面几个字母,就有提示导入。
需要注意的是,你最好是具名导出,用默认导出它可能分析不了,因为没有名字
TS 导入
强类型语言,则多一个修复选项,VSCode 按下 ctrl + .
触发,IDEA 按下 alt + enter
触发
相对路径导入
很多人导入可能是手写 import xxx from '@/...'
这样不仅容易错,还很麻烦,实际上可以用快捷键复制一下,如图
如果你是 window ,那么你的斜杠是反的,你需要配置一下explorer.copyRelativePathSeparator
VScode 还有大量配置,光是 setting.json,我就写了 360 行,以后想起什么再更新吧