【最高效编码指南】也许你不会用VSCode | IDEA

快捷键

温馨提示:本文含有大量动图,请确保流量足够

快速打开指定文件

大多数前端开发,在找路由文件时可能时一级一级找,实际上在地址栏复制一下路由名称

按下ctrl + e,再输入路由名称即可打开。IDEA 快捷键是双击 shfit

快捷跳转

当你在看别人代码时,是不是经常 ctrl + 鼠标左键 进去看,然后回来要滑半天?

那你看看我怎么做,是不是瞬间回来

这个只需要设置一下快捷键即可,默认是没有的,如下图所示

变量 | 文件重命名

大家设置一下对应的快捷键即可,我下图标红的就是。我设置的和 window 快捷键一样, IDEA 默认是shift + F6

如果你的 window 版本过高,那么shift + F6又会和微软输入法冲突

需要注意的是,变量重命名需要编辑器分析你的代码。所以如果你的代码写的很烂,那么 VSCode 也会被弄得神志不清

所以这项功能在一些 JS 项目可能没有作用

快捷复制

很多人复制当前行,可能是先选中,然后再 CV,实在是太慢了

VSCode 快捷键是 alt + shfit + ↓IDEActrl + 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,把不要的分隔符删掉即可

批量移动光标到指定位置

下面这一套丝滑小连招是怎么做的呢?

  1. 先按住 alt + shift,即可开启列选择模式
  2. 拖动鼠标选择
  3. ctrl + →,可以快速跳到分隔位置,这里没有被分隔,所以直接到最后了
  4. ctl + shift + 左,快速选中并跳转到分隔位置
  5. 最后执行操作即可

基于上述操作,可以玩出花来,大家可以开动一下脑袋

值得注意的是,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 行,以后想起什么再更新吧

相关推荐
kirito学长-Java15 分钟前
springboot/ssm网上宠物店系统Java代码编写web宠物用品商城项目
java·spring boot·后端
海绵波波10722 分钟前
flask后端开发(9):ORM模型外键+迁移ORM模型
后端·python·flask
余生H26 分钟前
前端Python应用指南(二)深入Flask:理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
outstanding木槿31 分钟前
JS中for循环里的ajax请求不数据
前端·javascript·react.js·ajax
酥饼~38 分钟前
html固定头和第一列简单例子
前端·javascript·html
一只不会编程的猫41 分钟前
高德地图自定义折线矢量图形
前端·vue.js·vue
m0_7482509343 分钟前
html 通用错误页面
前端·html
来吧~1 小时前
vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)
前端·vue.js·音视频
魔术师卡颂1 小时前
最近看到太多 cursor 带来的焦虑,有些话想说
前端·aigc·openai