精华内容
下载资源
问答
  • 【VSCode】VScode修改代码颜色

    千次阅读 2020-11-06 21:32:17
    5.将以下代码放到括号内 "editor.tokenColorCustomizations": { "comments": "#82e0aa", // 注释 "keywords": "#0a0", // 关键字 "variables": "#f00", // 变量名 "strings": "#e2d75dbd", // 字符串

    流程:

    1.左上角 选择文件
    2.找到 首选项
    3.点击 设置
    如图所示
    4.界面右上角 点击json
    如图所示
    5.将以下代码放到括号内

    "editor.tokenColorCustomizations": {
            "comments": "#82e0aa", // 注释
            "keywords": "#0a0", // 关键字
            "variables": "#f00", // 变量名
            "strings": "#e2d75dbd", // 字符串
            "functions": "#5b99fcc9", // 函数名
            "numbers": "#AE81FF" // 数字
          },  
           // 选中高亮的颜色
             "workbench.colorCustomizations": {
              "editor.selectionBackground": "#aa0000"
          }
    ```![如图所示](https://img-blog.csdnimg.cn/20201106213120261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bvc3NpYmxlOTk5,size_16,color_FFFFFF,t_70#pic_center)
    
    
    
    展开全文
  • 自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,...于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。 于是后来又接触了sublime,sublime相比...

    自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,代码提示啥方面做的也特别好,很好上手,作为小白我用了很长一段时间。
    后来浅浅学习微信小程序开发,得写wxml,Hbilder上没有wxml格式的代码提示,代码高亮等。于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。
    于是后来又接触了sublime,sublime相比vscode界面比较简洁,但是界面没有Hbuilder那般小清新,是比较炫酷的界面。sublime我也用了好长一段时间了。
    昨天我决定开始拾起我一直没好好用的觉得不好上手的vscode。

    我是个女生,我喜好偏向于浅色的主题,虽然那些深色主题看起来特别有逼格。vscode几个默认的浅色主题给我的感觉就是代码比较糊,颜色特别的浅,特别是 quiet light 这个主题写HTML时,tag标签颜色特别浅,标签名称颜色和HTML属性名称颜色都是小清新彩色,虽然颜色不同但是颜色比较相近。再加上背景颜色就很浅浅的小清新颜色,导致整体看起来特别糊,没有那种很强烈的对比感,这样代码看起来感觉糊到一起去了,这种视觉上给我的感觉特别糟糕,有种这种看着这种界面就不想码代码的感觉。于是我查阅网上各种资料决定改改代码颜色。

    好了废话说了一大堆。开始正题。
    对于vscode默认的几个浅主题,我挑选了 quiet light 这个框框为浅紫色的主题下手。

    效果图如下
    在这里插入图片描述
    File–Preference–color theme
    设置默认主题为 Quiet Light
    在这里插入图片描述
    在这里插入图片描述
    fIle–Preference–settings
    在这里插入图片描述
    点击右上角如下图所示圈起来的小图标 打开settings.json文件
    在这里插入图片描述
    接下来在settings.json文件中添加json代码:
    贴一下我添加的:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    好久没有看自己的CSDN了,今天无意留意到居然有人评论自己的博客,感觉自己被需要呀,这种感觉不错,如果自己写的东西能帮到大家太棒了,评论的小伙伴问方法名颜色怎么修改,如下请参考:
    在这里插入图片描述
    我的setting.json文件内容:

    {   
        "workbench.iconTheme": "vscode-icons",
        "files.associations": {
            "*.cjson": "jsonc",
            "*.wxss": "css",
            "*.wxs": "javascript"
        },
        "emmet.includeLanguages": {
            "wxml": "html"
        },
        "minapp-vscode.disableAutoConfig": true,
        "editor.renderIndentGuides": false,
        "window.zoomLevel": 1,
        "editor.autoClosingBrackets": "always",
        "editor.autoClosingQuotes": "always",
        "files.autoSave": "afterDelay",
        "editor.minimap.enabled": true,
        "breadcrumbs.enabled": true,
        "workbench.colorTheme": "Quiet Light",
        "editor.mouseWheelZoom": true,
    
        
        
    
        "update.enableWindowsBackgroundUpdates":true,
        "background.enabled":true,
        "background.customImages": [""],
    
        "background.style": {
            "content": "''",
            "pointer-events": "none",
            "position": "absolute",
            "z-index": "99999",
            "width": "100%",
            "height": "100%",
            "background-position": "100% 100%",
            "background-repeat": "no-repeat",
            "opacity": 0.2
        },
        "background.useFront": true,
        "background.useDefault": false,
        "git.ignoreMissingGitWarning": true,
        "editor.fontFamily": "Consolas, mononoki,'Courier New', monospace",
        "editor.renderLineHighlight": "none",
        "editor.lineHeight": 18,
        "editor.roundedSelection": false,
        "editor.fontSize": 14,
        "workbench.colorCustomizations": {
            "[Quiet Light]":{
                "editor.foreground": "#201515",
                
                
                "editor.selectionHighlightBorder": "#94767c00",
                "editor.selectionHighlightBackground": "#ff000078",
                "editorIndentGuide.activeBackground":"#81868d",
                "editorBracketMatch.background": "#ca9fdb5e",
                "editorBracketMatch.border": "#ff0000",
                "tab.activeBackground": "#ad9cd4b2",
                "textLink.foreground": "#d6561ac4",
                "descriptionForeground": "#ff0000",
                "selection.background": "#b98cd693",
                "textBlockQuote.background":"#b89a9a",
                "textSeparator.foreground": "#86c2df"
                
            },
            
            
        },
        "editor.tokenColorCustomizations": {
            "[Quiet Light]":{
                "comments": "#7e3648",
                "strings": "#519657",
                "functions": "#7e57c2",
                "keywords": "#8e1da1",
                "variables":"#e57373",
                "numbers": "#e62020",
                
                
                "textMateRules": [
                    {
                        "name": "Comment",
                        "scope":[
                            "comment" 
                        ],
                        "settings": {
                            "foreground": "#a7cca8",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
                        "scope": "punctuation.definition.variable.php",
                        "settings": {
                            "foreground": "#e57373"
                        }
                    },
                    {
                        "name": "String",
                        "scope":[
                            "string"
                        ],
                        "settings": {
                            "foreground": "#32a504",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "HTML:Tags",
                        "scope":[
                            "meta.tag",
                            "punctuation.definition.tag.html",
                            "punctuation.definition.tag.begin.html",
                            "punctuation.definition.tag.end.html"
                        ],
                        "settings": {
                            "foreground": "#4b4444",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "HTML:Tag Names",
                        "scope":"entity.name.tag",
                        "settings": {
                            "foreground": "#a617e9",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "HTML: Attribute Names",
                        "scope": [
                            "meta.tag entity.other.attribute-name",
                            "entity.other.attribute-name.html"
                        ],
                        "settings": {
                            "fontStyle": "italic",
                            "foreground": "#f31616"
                        }
                    },
                    {
                        "name": "Operator",
                        "scope":"keyword.operator",
                        "settings": {
                            "foreground": "#e21d1d",
                            "fontStyle": ""
                        }
                    }
                    
                ]
            }
        },
        "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
        
        
    }
    
    

    小白解释不好,有什么错误的地方请大佬指出呢。
    贴上参考资料链接:
    启蒙篇
    https://www.liu.app/2018/08/29/VSCode/%E4%BF%AE%E6%94%B9VSCode%E7%9A%84%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2%E4%B8%BA%E6%8A%A4%E7%9C%BC%E7%BB%BF/
    vscode官网扩展自定义主题说明链接
    https://code.visualstudio.com/api/references/theme-color#text-colors
    下面这一篇写的很详细
    https://www.cnblogs.com/garvenc/p/vscode_customize_color_theme.html

    展开全文
  • 刚开始用vscode软件编程的同学们有没有感觉这个软件缺少一种亲和力,没错,就是因为代码的默认颜色太丑了,下面来看一下如该修改vscode颜色吧。 效果图: 教程: 第一步点击拓展模块 第二步搜索vetur...

    刚开始用vscode软件编程的同学们有没有感觉这个软件缺少一种亲和力,没错,就是因为代码的默认颜色太丑了,下面来看一下如该修改vscode的颜色吧。

    效果图:

    教程:

     第一步点击拓展模块

    第二步搜索vetur后点击第一个

    第三部点击安装(忘记需不需要重启软件了)

    展开全文
  • 自定义 vscode代码颜色

    2021-11-02 17:50:01
  • vscode自定义代码注释颜色

    万次阅读 多人点赞 2019-03-26 22:34:32
      vscode 的扩展插件十分强大,在里面可以找到许多自己喜欢的插件,如:代码主题风格等。博主很喜欢 Monokai 的代码主题风格,但是也有美中不足的地方。该主题的注释是灰色的,在黑色的代码面板里面很难看清楚;...
  • vscode更改注释颜色

    千次阅读 2021-01-29 16:47:12
    3、在原 json 文件中追加如下代码 "editor.tokenColorCustomizations": { "comments": "#82e0aa", // 注释 "keywords": "#0a0", // 关键字 "variables": "#f00", // 变量名 "strings": "#e2d75dbd", // 字符串 ...
  • vscode 修改注释颜色

    千次阅读 2019-11-06 12:15:45
    结合上面的栗子 若没有找到json 文件则到你安装的 vscode 目录下去寻找 我的是在 resources /app/extensions/ 下面 然后更具你自己所选的风格寻找 我的是 theme-monikai 所以进入到theme-monikai / thems文件夹下...
  • 1.在setting.json中设置 在设置文件中添加下以下代码 "editor.tokenColorCustomizations": { "comments": "#17e917" //绿色 }
  • 以设置vue代码字体颜色高亮为例:首先打开vs code软件,然后点击左侧中的扩展功能,如下图所示: 在扩展功能窗口中输入Vetur,在搜索出的插件中选择第一个后面的Install,如下图所示: 安装成...
  • VSCode修改注释颜色

    万次阅读 2019-10-23 18:58:41
    VSCode修改注释颜色 VSCode颜色主题在设置里面就可以设置 ,但是对于想要自定义注释颜色的同志们来说,可以通过修改注释颜色来实现,操作起来也并不复杂: 操作 1.首先我们打开Microsoft VS Code文件所在位置,进入\...
  • vscode怎么实现代码的高亮颜色插件

    千次阅读 2021-10-18 11:50:09
    vscode怎么实现代码的高亮颜色插件 首先需要安装扩展插件:vetur实现代码高亮. 如果不成功设置调整一下: 打开文件——首选项——设置直接搜索vetur——vetur,进入到 settings.json文件编辑之中,将以下代码复制进去...
  • 1、打开右下角齿轮图标(设置) 2、选择颜色主题 “Color Theme” 3、上下键预览各种主题效果 推荐两种:浅色+(默认浅色) 深色+(默认深色),主题简洁,并且代码中变量的使用有颜色
  • 修改VSCode编辑器的主题和代码颜色

    千次阅读 2021-06-04 10:21:27
    修改Visual Studio Code编辑器的主题和代码颜色 摘要:自定义Visual Studio Code(VSCode)的主题和代码颜色 在VS Code 的左下角,点击设置。 打开设置后,在搜索栏搜索关键字:主题。 搜索结果显示有许多个...
  • 所以我以Monokai为例介绍如何进行修改颜色主题选中代码背景色。方法大同小异。 在下面的安装目录里(根据你自己的改),用vscode打开【monokai-color-theme.json】文件。然后进行如下修改(注释部分为原来的代码)...
  • VS Code修改选中文字或代码颜色

    万次阅读 热门讨论 2017-08-16 15:27:41
    1.修改选中文字或代码颜色 //设置用户选中代码段的颜色 "workbench.colorCustomizations": { "editor.selectionBackground": "#aa0000" } 修改后立即生效不用重启VsCode 更多: VsCode 插件整理之C# VS
  • VSCode自定义配色文件

    2018-11-08 09:58:09
    目前在使用的一种配色方案,只要将该文件复制到VSCode的主体文件目录中($RELEASE/resources/app/extensions),以theme-开头的目录即为颜色主题配置 打开vscode,按键选择ctrl+k,ctrl+t,选择Monokai-My即可切换...
  • vscode中控制台代码颜色设置

    千次阅读 2020-08-10 15:08:33
    设置vscode的终端颜色,字体的设置 code-> preferences -> setting --> 搜索workbench 选择第二个 workbench.colorCustomizations 修改 edit in setting.json 添加如下内容(只需要添加一对key, value即可)...
  • VS Code自定义代码颜色,看这一篇就够了 众所周知,VS Code是一款自定义空间很大的开发工具,需要的功能都在插件里,可谓非常方便,但是主题这个东西每个人的喜好都不同,即便是在拓展插件里找了许多主题拓展,也很...
  • 注释很重要, 能体现和记录自己的代码思路.所有,改变一下comment的颜色很重要. 在vscode图标右键点击属性 ---> 文件夹所在位置: 然后按照这个找,我的在d盘安装程序文件夹下, D:\安装程序\Microso...
  • 主要介绍了VSCode自定义配色方案的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 详细步骤vscode修改注释颜色(入门vscode的小白菜) 有时候vscode的注释颜色是灰色 看的不是很清楚! 所以下面介绍详细的修改注释的颜色 1-找到桌面vscode图标 打开文件文件所在的位置 打开到resource\app\...
  • Open Default Settings为默认设置(只读,不能修改的) 选中Open Settings(JSON)后按回车 下面为我的自定义设置 { "editor.wordWrap": "on", "window.zoomLevel": 0, "[csharp]": { "editor....
  • VSCode改变字体颜色

    千次阅读 2021-04-29 16:42:05
    VSCode改变字体颜色 Visual Studio Code: V1.55.2 1. 打开命令面板(ctrl+shift+P)输入settings打开settings.json 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了...
  • setting.json文件代码如下(直接复制进去保存就可): `{ “workbench.iconTheme”: “vscode-icons”, “files.associations”: { “.cjson": “jsonc”, ".wxss”: “css”, “*.wxs”: “javascript” }, “emmet...
  • VSCode-》首选项-》设置->... 加上 选中的文字内容的 配置 "workbench.... //设置用户选中代码段的颜色 "editor.selectionBackground": "#f5f113", "editor.selectionHighlightBackground": "#f
  • vscode改变窗口颜色

    2021-04-25 15:45:53
    vscode打开多个(不同机器上的/不同目录下的)同名工程文件时,容易混淆,希望通过窗口颜色加以区分。 解决方法: 更改整体主题颜色(所有窗口都改变)或更改单个窗口颜色,后者更有用。 一、更改整体主题颜色 ...
  • vscode自定义背景颜色

    千次阅读 2021-01-15 15:23:26
    大概做前端的builder(只会打代码的才是coder,嘻嘻~)...1. 首先vscode的背景颜色的定义都是放在每个主题的文件里面的,所以我们是无法通过设置来更改背景颜色的。2. 那就只能进入到相应的主题文件内部去进行更改喽。...
  • vscode改变选中字体颜色高亮的方法

    千次阅读 2021-07-11 04:05:48
    vscode改变选中字体颜色高亮的方法发布时间:2021-01-07 10:42:04来源:亿速云阅读:168作者:小新这篇文章将为大家详细讲解有关vscode改变选中字体颜色高亮的方法,小编觉得挺实用的,因此分享给大家做个参考,希望...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,112
精华内容 2,044
关键字:

vscode修改代码颜色