我们在用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为例，如下图