如何设置炫彩的 vscode,来看这篇文章就行了

1,044 阅读2分钟

大家好,我是 Simon,一个前端程序员,活跃在开源社区,这篇文章是来分享一个好东西,将你的 vscode 打造的与众不同~

这是一个我简单设置的效果,大家如果觉得不行,可以按照我分享的插件的规则自己设置独一无二的风格 1736775706276.jpg

这个插件上过阮一峰周刊推荐,能够给 vscode 中任意规则的文字实现颜色的高亮

vscode-highlight-text 自如其名就是高亮文字的,将你觉得不重要的内容可以设置的暗一些,重要的高亮突出,也能提升你开发的视觉效果

接下来分析一下如何去配置上图中的效果吧,其实就是通过正则去 match, 然后指定颜色,很容易理解吧,当然考虑到可能有同学不熟悉正则,可以通过 regexp101 提前调试好,当然针对纯新手用户,我们也提供了别人已经写过的 案例,直接修改颜色部分即可

第一步在 vscode settings 中搜索打开vscode-highlight-text:rules

image.png

你可以清楚的看到,他可以将多个语种合并设置也可以单独设置,第一项就是表明文件类型

image.png

其次,要应对不同的明亮主题,需要有 lightdark 下的不同配置

第二步,如何配置规则

指定一个 dark 后,上来第一个 key 就是颜色,这个颜色可以被 value 中的 color 覆盖,当你不需要更复杂的配置时,你只需要一个 color: [RegexpMatch],即可完成高亮

image.png

value 中的 match 是一个数组支持针对多个正则匹配使用同一个高亮颜色

第三步,如何配置同一个正则中的多个 match

当我们需要针对前缀 exportexport default 高亮使用第一个颜色规则渲染,然后 function 用第二个颜色规则渲染,functionName 用第三个颜色规则渲染时,就可以使用 matchCss 数组中的每一项对应 match 中正则规则的每一项

image.png

第四步,如果遇到复杂场景,正则没办法指定到怎么解决

我们可以使用 ignoreReg,将一部分影响,我们正则匹配的内容摘除出去,再匹配

image.png

以上几种方案基本能涵盖你们所有的场景了,如果文字你们消化不了,可以在 B 站 视频中了解到

今天的分享就到这了,记得给我的插件和视频点赞哦~,留下一个小作业,把你们配置的炫酷的 ide 贴图放到评论区,下次再见 👋