大家好,我是 Simon,一个前端程序员,活跃在开源社区,这篇文章是来分享一个好东西,将你的 vscode 打造的与众不同~
这是一个我简单设置的效果,大家如果觉得不行,可以按照我分享的插件的规则自己设置独一无二的风格
这个插件上过阮一峰周刊推荐,能够给 vscode 中任意规则的文字实现颜色的高亮
vscode-highlight-text 自如其名就是高亮文字的,将你觉得不重要的内容可以设置的暗一些,重要的高亮突出,也能提升你开发的视觉效果
接下来分析一下如何去配置上图中的效果吧,其实就是通过正则去 match
, 然后指定颜色,很容易理解吧,当然考虑到可能有同学不熟悉正则,可以通过 regexp101 提前调试好,当然针对纯新手用户,我们也提供了别人已经写过的 案例,直接修改颜色部分即可
第一步在 vscode settings 中搜索打开vscode-highlight-text:rules
你可以清楚的看到,他可以将多个语种合并设置也可以单独设置,第一项就是表明文件类型
其次,要应对不同的明亮主题,需要有 light
和 dark
下的不同配置
第二步,如何配置规则
指定一个 dark
后,上来第一个 key 就是颜色,这个颜色可以被 value 中的 color 覆盖,当你不需要更复杂的配置时,你只需要一个 color: [RegexpMatch],即可完成高亮
value
中的 match
是一个数组支持针对多个正则匹配使用同一个高亮颜色
第三步,如何配置同一个正则中的多个 match
当我们需要针对前缀 export
或 export default
高亮使用第一个颜色规则渲染,然后 function
用第二个颜色规则渲染,functionName
用第三个颜色规则渲染时,就可以使用 matchCss
数组中的每一项对应 match 中正则规则的每一项
第四步,如果遇到复杂场景,正则没办法指定到怎么解决
我们可以使用 ignoreReg
,将一部分影响,我们正则匹配的内容摘除出去,再匹配
以上几种方案基本能涵盖你们所有的场景了,如果文字你们消化不了,可以在 B 站 视频中了解到
今天的分享就到这了,记得给我的插件和视频点赞哦~,留下一个小作业,把你们配置的炫酷的 ide 贴图放到评论区,下次再见 👋