精华内容
下载资源
问答
  • 自学前端刚开始的时候使用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自定义配色文件

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

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

    前言

      转载参考于博客:https://www.jianshu.com/p/975b009f9c4a
      vscode 的扩展插件十分强大,在里面可以找到许多自己喜欢的插件,如:代码主题风格等。博主很喜欢 Monokai 的代码主题风格,但是也有美中不足的地方。该主题的注释是灰色的,在黑色的代码面板里面很难看清楚;可是又不想换掉 Monokai 的整体风格。

    更改步骤

    1. 文件 > 首选项 > 设置 或者 直接默认快捷键 "ctrl + , " 打开设置面板
      在这里插入图片描述
    2. 打开常用设置面板 左上角的 json 设置文件
      在这里插入图片描述
    3. 在原 json 文件中追加如下代码 (颜色需求自定义):
     "editor.tokenColorCustomizations": {
        "comments": "#82e0aa", // 注释
        "keywords": "#0a0", // 关键字
        "variables": "#f00", // 变量名
        "strings": "#e2d75dbd", // 字符串
        "functions": "#5b99fcc9", // 函数名
        "numbers": "#AE81FF" // 数字
      },
      // 选中高亮的颜色
         "workbench.colorCustomizations": {
          "editor.selectionBackground": "#aa0000"
      }
    

      保存即可,希望能帮助到大家~

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

    2021-11-02 17:50:01
  • vscode自定义主题颜色

    千次阅读 2020-06-29 16:09:16
    vscode绿色护眼主题 简单明了 1.文件→首选项→设置→右上角第二个图标打开setting.json // A code block { "editor.fontSize": 16, "editor.mouseWheelZoom": true, "editor.tabSize": 2, "workbench....

    vscode绿色护眼主题(绿绿绿)

    简单明了

    1.文件→首选项→设置→右上角第二个图标打开setting.json

    // A code block
    {
        "editor.fontSize": 16,
        "editor.mouseWheelZoom": true,
        "editor.tabSize": 2,
        "workbench.colorCustomizations": {
        	// 写在 Atom One Light  里面则只对该主题有效
            "[Atom One Light]": {
                "editor.background": "#c5f3cb",  
    	        "sideBar.background": "#d9f1d1",
                "activityBar.background": "#ddeedd", 
                // 终端前景背景色
                "terminal.foreground" : "#141416",
                "terminal.background" : "#a0ecd9"
            },
            "editorLineNumber.foreground": "#f19012",
        },
        "workbench.statusBar.feedback.visible": false,
        "workbench.colorTheme": "Atom One Light",
    }
    

    直接复制粘贴进去,鼠标左键点击就可以自己设置喜欢的颜色。

    这是上面代码的效果↓↓↓↓↓ 可以根据自己的喜欢随便改。

    在这里插入图片描述
    记录一下。在这里插入图片描述

    展开全文
  • vscode自定义背景颜色

    千次阅读 2018-12-13 15:02:00
    vscode自定义背景颜色    大概做前端的builder(只会打代码的才是coder,嘻嘻~)一半以上都会使用vscode编辑代码吧,vscode很轻量,支持的文件拖拽加入编辑区功能我个人认为很方便很强大。 下面我写一下怎么...
  • vscode自定义注释颜色

    千次阅读 2020-08-03 12:32:39
    3、粘贴代码(直接粘贴到最底部就行了,注意写逗号分隔哦) { "workbench.colorTheme": "Solarized Light", "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "editor
  • VS Code自定义代码颜色,看这一篇就够了 众所周知,VS Code是一款自定义空间很大的开发工具,需要的功能都在插件里,可谓非常方便,但是主题这个东西每个人的喜好都不同,即便是在拓展插件里找了许多主题拓展,也很...
  • 绿色活动栏,纯黑代码背景更加护眼,绿色高亮关键字,错误提醒黄色波浪线更加醒目和护眼 加压后,将压缩包内的文件夹拷贝到vscode安装目录-->resources-->app-->extensions内,在vscode中设置-->颜色...
  • 自定义设置 VSCode 编辑器各种颜色

    万次阅读 2019-11-03 17:06:12
    该主题的注释和背景稍有不搭,在浅蓝色的代码面板里面很难看清楚, 可是又不想换掉 Solarized Light 的整体风格, 于是写下下面的代码方便自定义修改各种颜色 : 步骤: 文件 > 首选项 > 设置 或者 直接默认快.....
  • 把这段代码加到文件末尾(图片下方有代码) { "workbench.colorTheme": "Solarized Light", "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "editor.tokenColorCustomizations...
  • [VSCode] 自定义选中代码的高亮颜色

    千次阅读 2020-12-17 13:54:19
    高亮效果: 实现方法: 打开VSCODE的设置界面(在左下角或者快捷键ctrl + ,),在右上角打开 settings.json,见图第一个按钮。...具体颜色可以看你的喜好,这里再推荐给大家一个挑选颜色的网站:Color Hunt 保存sett
  • 一行代码教会你VS Code自定义注释 关键字 字符串 变量名 函数名 数字颜色 step 1 step 2 step 3 在setting.json 中加入以下代码 "editor.tokenColorCustomizations": { "comments": "#16e716", // 注释 ...
  • vscode 自定义编辑器样式

    千次阅读 2019-07-12 13:20:48
    将 下面的代码 复制 到 VS code 中 settings.json 文件中 (什么不知道 setting.json 在哪? 往下滑
  • vscode 自定义护眼配置方案 由于自己的眼睛不好,所以配置了一个比较护眼的颜色方案。vscode自带的 light 主题挺不错的,但就是语法高亮很浅色(很难看)。于是自己折腾了一个基于github light theme的配置,先贴个...
  • VSCode自定义配色方案

    千次阅读 2018-11-08 10:00:54
      说明 本文更新于2017-07-24,使用VSCode 1.14.1,操作系统为Windows。 配置文件 ...“文件-首选项-颜色主题”即可显示所有...记VSCode的安装目录为$RELEASE,默认的颜色主题配置文件都位于$RELEASE/resources...
  • 怎么说呢就是,因为学校用的是codeblocks,中考之后学c语言用的是vc++6.0, 大一上学期摸索过vc2010,vs2019这几个用过时间不一,但是个人感觉都不是...而且经过本人实践vs在写c上不是很理想,VScode最吸引我的是那种自定义
  • Search:Vscode 如何自定义Python代码高亮

    千次阅读 2021-04-22 15:18:53
    IDLE Shell的高亮倒是不错,可是VScode的插件里没搜到 上网搜索,感谢B站up白月黑羽的分享, 最终使用[AtomOneLight]主题,添加自定义高亮,虽然没有完全如idle高亮 但是改了一些字体颜色后,清晰多了 示例:...
  • 一、再打开settings.json文件 ...配置下面代码 "[markdown]": { "editor.formatOnSave": true, "editor.renderWhitespace": "all", "editor.quickSuggestions": { "other": true, "comments": true, "strings":
  • 【1】VScode中文界面方法-------超简单教程 【2】VScode搭建python和tensorflow环境 【3】VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色 【4】VScode最全面最实用的插件推荐,用了你就爱上了! 【5】...
  • VSCode 如何操作用户自定义代码片段(快捷键) 第一步:文件==>首选项==>用户代码片段 第二步:选择代码片段文件 html.json 第三步:输入要自定义的快捷键 和 模板代码段 { "vh": { "prefix": "vh", //...
  • #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": false, ...
  • vscode自定义代码字体与颜色风格 在setting.json中修改即可: "editor.semanticTokenColorCustomizations": { "enabled": true, // enable for all themes "rules": { "*.static": { "foreground": "#ff0000", ...
  • vscode自定义注释字体样式

    千次阅读 2019-12-06 16:31:26
    vscode文件 => 首选项 => 设置 => 右上角点击打开设置(json), 追加一下一项: "comments": { // 设置字体样式 加粗 下划线 斜体等 "fontStyle": "", // bold italic underline // 设置字体颜色 ...
  • vscode 自定义编辑器样式 css修改

    千次阅读 2019-12-23 16:22:27
    vscode 自定义编辑器样式 CSS修改进入正题backgroundbackground-cover 进入正题 首先讲一下为什么会写这个,在某年某月某天,突然觉得vscode编辑器样式‘“看腻了”,就想着改改样式,比如背景啥的。先找了一下插件...
  • VScode用户自定义代码块 用户自定义代码块 { /* prefix :代码片段名字,即输入此名字就可以调用代码片段。 body :这个是代码段的主体.需要编写的代码放在这里,  $1 :生成代码后光标的初始位置. $2 :生成代码...

空空如也

空空如也

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

vscode自定义代码颜色