我来说说Vscode代码配色怎么更换。

Vscode代码配色怎么更换?有的小伙伴不知道怎么更换,下面小编就为大家带来了Vscode代码配色更换教程,一起来看看吧。

Vscode代码配色怎么更换?Vscode代码配色更换教程

1、首先,你要做的,就是知道你想要修改的代码,是属于什么基本类型。你可以将光标移动到某段你想要修改颜色的代码上,比如将光标移动到一段字符串上。

Vscode代码配色怎么更换?Vscode代码配色更换教程

2、然后,在命令面板里运行 “检查TM作用域”(Inspect TM Scopes)命令。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

3、此时,编辑器中出现一个新的悬浮窗。这个窗口里呈现的,就是当前这个代码片段所对应的语言、语法类型以及当前的颜色和背景色等。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

比如在上图里,这个窗口呈现了以下信息:

当前的 token 是 hello,它的类型是 String;

它的颜色是 #ce9178ff ,背景色是 #1e1e1eff;

它所属的语法作用域由内而外分别是 string.quoted.double.js,meta.var.expr.js,source.js。

4、如果你想要将所有字符串都变成红色,那么就需要修改String这个作用域的颜色。下面,你可以再次打开个人设置(JSON),输入
editor.tokenColorCustomizations;

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

5、接着把光标放入这个 JSON 对象中,按下 “Ctrl + Space” 触发建议列表,就能够看到如下的建议。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

6、建议列表中首先出现的,就是你可以在 VS Code
中使用的所有的主题的名字。通过选择它们,你可以只覆盖某个主题中的某个颜色。这里你可以滚动这个列表,看看下面还有别的什么建议。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

你可以看到如下几个选项:

comments 代表着注释的颜色;

functions 代表着函数的寒色;

keywords 代表着关键字的颜色;

numbers 代表着数字的颜色;

strings 代表着字符串的颜色;

types 代表着类型的颜色;

variables 代表着变量的颜色;

textMateRules 我下面会再介绍。

为了修改字符串的颜色,你只需选择 strings 即可,然后将其修改为红色,也就是:

"editor.tokenColorCustomizations": { "strings": "#FF0000", }

7、保存设置后,你再回到刚才的 JavaScript 文件时,就可以看到字符串颜色都变了。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

TextMate 规则修改

8、上面的建议列表里,还有个 textMateRules选项,这个属性是做什么用的呢?让我们再来看下刚才在 JavaScript 文件里运行
“Inspect TM Scopes” 看到的信息。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

在这个窗口的最下方,就是 TextMate 的语法规则作用域了。hello 这个词所处的 TextMate 语法作用域由内而外分别是
string.quoted.double.js,meta.var.expr.js,source.js。VS Code
的主题插件在配置编辑器内代码的颜色时,就是针对这些作用域进行设置的。而你要修改某个作用域所对应的颜色,就是在设置中修改 textMateRules 。

9、比如说,你只想修改双引号内的字符串的颜色为红色,其他的字符串都不修改,那么就需要修改 string.quoted.double.js
这个作用域的颜色。

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

10、最后在上面的动图里, 你可以看到:输入引号,然后自动补全填入了 TextMate 语法设置的模板,这之后,再将 scope 的值修改成了
string.quoted.double.js 。保存设置后,当你再次打开之前的 JavaScript 文件,

Vscode代码配色怎么更换?Vscode代码配色更换教程截图

“hello” 是红色的,但是如果你输入

var b = 'hello'

单引号内的 hello 依然是原来的颜色。

谢谢大家的观看,更多精彩教程请关注酷牛教程!

本文来自网络投稿,来自作者春天。不代表酷牛教程立场,如若转载,请注明出处:https://www.xukn.com/976064.html

(0)
春天春天
上一篇 2023-08-19 12:01
下一篇 2023-08-19 12:01

相关推荐

  • 聊聊Redmi。

    Redmi G游戏本2021屏幕怎么样?本章节就主要讲述了RedmiG游戏本2021屏幕怎么样的相关介绍,还不了解的朋友就跟着小编学习一下吧,希望对你们有所帮助。 Redmi G游...

    2023-08-19
    0110
  • 关于wps制作米字格的操作方法。

    有很多人不了解wps制作米字格的操作方法,那么今天小编就在这里给大家分享一点我的小经验,希望可以给你们带来帮助。 wps制作米字格的操作方法 打开wps演示,选择绘图工具栏(开始—...

    2023-08-16 PC教程
    0110
  • 我来分享Excel表格中怎么隐藏身份证号生日

    当需要统计大量人员信息的时候,经常会使用到Excel表格。那么当这些人员信息需要公示的时候,为了保护个人隐私,通常都会对身份证号的出生年月进行隐藏。本篇教程就给大家演示一下在Exc...

    2023-07-08 PC教程
    0160
  • 小编教你ocam怎么安装。

    近日有一些小伙伴咨询小编关于ocam怎么安装呢?下面就为大家带来了ocam进行快速安装的方法,有需要的小伙伴可以来了解了解哦。 ocam怎么安装 ocam进行快速安装的方法 1.在...

    2023-08-19 PC教程
    080
  • 小编教你双显示器怎么设置

    平时工作一个显示器不够用的时候都会选择再外接一个显示器,且现在的电脑显卡都很强大,基本都能支持多个显示器同时显示,可以有效提高工作效率,那我们要怎么设置双显示器呢?下面小编就来给大...

    2023-07-13 PC教程
    0180
  • 我来分享Win10重置系统后开始菜单打不开了如何解决

    使用电脑遇到难以解决的问题时,很多用户都会选择重置电脑,但是最近有win10系统的用户发现自己重置电脑后,开始菜单打不开了,这该如何解决?那针对这个问题,小编给大家整理了有效的解决...

    2023-07-16 PC教程
    0170
  • 我来教你会声会影X5安装闪退的处理操作讲解。

    现在很多网友还不熟悉会声会影X5安装闪退的处理操作,那么今天小编就带来了关于会声会影X5安装闪退的处理操作教程,一起来学习吧! 会声会影X5安装闪退的处理操作讲解 处理操作: 1、...

    2023-08-12
    0120
  • 经验分享搜狗高速浏览器怎么清空历史记录。

    很多小伙伴在使用搜狗高速浏览器的时候,想知道怎么清空历史记录,下面小编就为大家分享方法,感兴趣的小伙伴不要错过哦! 搜狗高速浏览器怎么清空历史记录?搜狗高速浏览器清空历史记录方法 ...

    2023-08-19 PC教程
    0110
  • 经验分享ps如何拆分文字笔画。

    ps如何拆分文字笔画?想必很多小伙伴对此都不太清楚,下面小编就为大家带来ps拆分文字笔画教程,有需要的可以来了解了解哦。 ps如何拆分文字笔画?ps拆分文字笔画教程 首先输入一个文...

    2023-08-19 PC教程
    090
  • 聊聊草图大师建模央视大楼的操作步骤。

    今天给大家讲的是草图大师建模央视大楼的设置方法,对草图大师感兴趣的同学们就一起学习下具体方法吧! 草图大师建模央视大楼的操作步骤 我们先画好如图所示的图形,m命令移走小正方形,形成...

    2023-08-13 PC教程
    0110
  • 我来教你墨墨背单词怎么进行签到

    墨墨背单词怎么进行签到?墨墨背单词是一款背单词软件,在墨墨背单词中很多用户想要进行签到,但是不知道要怎么签到,下面就给大家分享墨墨背单词签到方法,一起来看看吧! 方法 1.首先打开...

    2023-06-30
    0150
  • 教你如何安装CATTAV5

    CATIAV5是一款十分实用专业的3D建模设计软件,许多小伙伴在第一次使用这款软件的时候不知道如何安装,下面小编就带着大家一起来学习一下如何安装这款软件吧! 安装步骤: 1、打开压...

    2023-07-08 PC教程
    0150
  • 聊聊CorelDraw。

    大家使用CorelDraw X4过程中,想要撤销命令,怎么操作呢?下文就是CorelDraw X4中撤销命令的具体使用介绍,希望阅读过后对你有所启发。 CorelDraw X4中撤...

    2023-08-13 PC教程
    0120
  • 说说Blender安装插件的详细方法介绍。

    刚入手Blender的用户,不清楚怎么安装插件?现在就跟着小编一起来看一下Blender安装插件的详细方法介绍吧。 Blender安装插件的详细方法介绍 我们先打开blender窗...

    2023-08-13 PC教程
    0100
  • 分享小影视频画中画使用操作方法。

    小影的老用户,想必都熟悉视频画中画如何使用操作吧,对于新手可能感到陌生,下文就是小影视频画中画使用操作方法,大家可以了解一下。 小影视频画中画使用操作方法 第一步、打开小影手机客户...

    2023-08-18 PC教程
    0150

发表回复

登录后才能评论