在大公司工作之后才真正领悟到它真的是宇宙级编辑器

我们在用vscode写代码时候经常需要选中文本,比如下图

但绝大多数情况下我们想选中的是整个类名,如下图 其实这个就牵扯到了vscode的分词机制,它认为-应该截断文本,其实不止-,还有其他字符都被vscode认为是分隔符,所以贴心的它提供了如下配置

js 复制代码
{
  // 如下是被vscode认为是分隔符的字符
  // 我们在设置中搜索editor.wordSeparators
  // 然后根据自己的需要删除不想要的分隔符即可
  // 比如删除@,这样我们就可以直接选中less变量和装饰器如@xxx
  "editor.wordSeparators": "`~#!@$%^&*()-=+[{]}\\|;:'\",<>/?."
}

如果你觉得上方这种小配置可以提升你的代码编写效率以及幸福感,那就继续往下看吧,一定不会让你失望>_<

与vscode的邂逅

本人是通过Java入门编程的,接触的第一个编辑器是ecilpse,后来idea越来越火,让我第一次接触到了了jetbrains家的编辑器,刚开始使用idea时我就受到了深深的震撼,原来编辑器之间亦有差距。后来机缘巧合成为了前端,第一次接触到真正的前端编辑器,由于idea使用的很熟,所以无缝切换。

因为本人一直对数学很感兴趣,小时候就参加过奥数比赛,接触过一些算法题,再加上有java开发经验,所以typescript上手也很快且很感兴趣。因为擅长这两项,所以即使学历平庸,甚至都不是计算机相关专业,但仍然可以得到jz及la的面试官认可并与他们成为同学

犹记得刚进jz的时候,因为公司有提供正版jetbrains开发工具,但我发现身边的同学都在使用免费的vscode,所以让我非常诧异,为什么放着webstorm不用,都去用vscode。肯定是收费的更好用啊!所以小组内只有我一个人在使用webstorm,后来因为安全原因我们组必须要安装一个插件,但是一开始只有vscode版本的,也就意味着必须要使用vscode,我有尝试使用,但是发现她就和一张白纸一样,令我很不习惯,所以我拒绝使用,甚至和mentor吵了一架。

现在想来,估计是我当初付费购买的时候就已经被它给CPU了,为了说服自己不是冤大头,自己也在催眠自己吧。在此不得不感谢那位mentor,我当时应该是魔怔了,但她仍然不离不弃,甚至找了心理部门的同学给我做心理辅导及插件开发组的同学为我讲解vscode的相关配置,让开发更搞笑。在此,对生命中遇到的那些给与过我帮助的人,说一声谢谢------这个世界并不温柔,但有些人真的很温柔^_^

话不多说,下面进入正题。因为前端开发领域各不相同,所以我会进行分类讲解

通用

更快捷的功能入口

资源管理器以及源代码管理面板里的功能tab是可以拖动或者隐藏的,可以隐藏不想要的tab让资源管理器更加清爽,也可以把一些常用的gitlens的tab拖出来,让git视图空间更大

让文件夹层级更清晰

默认情况下,如果一个文件夹下面只有一个文件夹,那么这两个文件夹会合并展示,如下图,style的下层文件夹是public吗?不,其实是css,这种不统一的展示至少会让我有些困惑

更改如下配置即可展示为下图样子

js 复制代码
"explorer.compactFolders": true

禁止通过拖放来移动选中内容

有时候选中了一些文本,但因为误触不小心把代码移到了别处,如下 这个因人而异,我是不需要这个功能,反而有时候因为误触让我很困惑,配置如下

js 复制代码
// 改为false即可禁止拖动
"editor.dragAndDrop": false

自动复制终端中选择的文本

有时候我们在启动项目时会出现一些报错需要通过百度去解决,这时候就需要去搜索一些终端打印的关键字,配置自动复制的话就可以省去手动复制的操作

js 复制代码
"terminal.integrated.copyOnSelection": true

代码提示与跳转

package.json

有些包的版本使用了^修饰,导致版本并未完全锁定,有时候可能某个小版本有问题需要我们排查,这个时候就需要知道我们具体安装了哪个版本,通过下图我们可以知道当前安装的版本,最新版本,也可以直接进入查看细节 我们知道有些包是间接依赖的,并没有列在package.json里,我想知道我要的有没有,可以直接搜索,以lodash为例,如下图

Vue

属性与方法等跳转和提示

css类名提示和跳转

vuex跳转

文件路径提示与跳转

React

本人主用react,个人认为vscode对react的支持比vue更好,上面vue能做到的,react也都能做到,就不赘述了。这里简单再举个css的例子

总结

作为一个使用webstorm远超两年半的开发者,vscode仅用半个月就通过它强大的代码提示与搜索及代码跳转让我有更加高效的开发效率,难怪大公司的员工可以免费使用的情况下都不愿意看webstorm一眼,基本都在使用vscode。

本人最近在准备晋升材料,所以有点忙。且由于配置稍微有点多,为了不耽误大家阅读,我只截取了一部分功能。如果读者老爷有遇到什么痛点都可以在评论区留言,我会一一解决,请相信我的没能力!webstorm在某些人眼里或许很好用,但我愿称vscode为宇宙级编辑器(#^.^#)

相关推荐
Cyltcc2 天前
如何安装和使用 Claude Code 教程 - Windows 用户篇
人工智能·claude·visual studio code
UrbanJazzerati2 天前
使用 Thunder Client 调用 Salesforce API 的完整指南
面试·visual studio code
清沫5 天前
键盘效率提升指南(VSCode+Vim+SurfingKeys)
前端·vim·visual studio code
OLong6 天前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
一眼万年046 天前
每天都在使用的VS Code Copilot Chat 开源啦!
aigc·ai编程·visual studio code
pe7er16 天前
vscode插件Hybrid Mode混合模式不兼容导致vue3项目在vscode爆红、类型推导失效的解决方案
vue.js·visual studio code
是紫焅呢18 天前
I排序算法.go
开发语言·后端·算法·golang·排序算法·学习方法·visual studio code
是紫焅呢19 天前
E结构体基础.go
开发语言·后端·golang·学习方法·visual studio code
是紫焅呢20 天前
F接口基础.go
开发语言·后端·青少年编程·golang·visual studio code
攀登的牵牛花20 天前
🚀【效率利器】Spine动画瘦身秘籍:一键批量PNG To WebP,Atlas自动更新!
前端·visual studio code