精华内容
下载资源
问答
  • 设置 -> 用户设置栏 -> 扩展 -> Vetur 打开文件加入如下配置: { // tab 大小为2个空格 "editor.tabSize": 2, // 字體大小 "editor.fontSize": 16, // 設置行高 "editor.lineHeight": 25, // 保存...

    配置

    VS Code 文件 -> 首选项 -> 设置 -> 用户设置栏 -> 扩展 -> Vetur
    在这里插入图片描述
    打开文件加入如下配置:

    {
        // tab 大小为2个空格
        "editor.tabSize": 2,
        // 字體大小
        "editor.fontSize": 16,
        // 設置行高
        "editor.lineHeight": 25,
        // 保存时格式化
        "editor.formatOnSave": true,
        // 开启 vscode 文件路径导航
        "breadcrumbs.enabled": true,
        // 显示 markdown 中英文切换时产生的特殊字符 
        "editor.renderControlCharacters": true,
        // 设置 eslint 保存时自动修复
        "eslint.autoFixOnSave": true,
        // 添加 vue 支持
        "eslint.validate": [
            "javascriptreact",
            "vue",
            "javascript",
            {
                "language": "vue",
                "autoFix": true
            },
            "html",
            {
                "language": "html",
                "autoFix": true
            }
        ],
        // #让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        // #选择 vue 文件中 template 的格式化工具
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // #让vue中的js按编辑器自带的ts格式进行格式化
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        // vetur 的自定义设置
        "vetur.format.defaultFormatterOptions": {
            "prettier": {
                "singleQuote": false,
                "semi": true
            }
        },
        //颜色配置
        "editor.tokenColorCustomizations": {
            "comments": "#858c99", // 注释
            "keywords": "#c678dd", // 关键字
            "variables": "#9fb2bf", // 变量名
            "strings": "#98c379", // 字符串
            "functions": "#e06c75", // 函数名
            "numbers": "#d19a66", // 数字
        },
        // 选中高亮的颜色
        "workbench.colorCustomizations": {
            "editor.selectionBackground": "#4e8bda7e", //选中高亮
            "editor.background": "#282c35", //背景色
            "editorCursor.foreground": "#bebebe", //编辑器光标颜色
            "editor.lineHighlightBackground": "#14524e", //光标所在行高亮内容的背景颜色
            "editor.lineHighlightBorder": "#00000000", //光标所在行四周边框的背景颜色
            "sideBar.background": "#21252b",
            "sideBar.foreground": "#b3bccc",
            "tab.inactiveBackground": "#21252b",
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "gitlens.advanced.messages": {
            "suppressGitVersionWarning": true
        },
        "files.autoSave": "onFocusChange",
    }
    

    完成

    在Vue文件中 ctrl+s 保存一下,你会惊奇的发现。
    在这里插入图片描述

    展开全文
  • 自学前端刚开始的时候使用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代码颜色

    2021-11-02 17:50:01
  • VSCodeVScode修改代码颜色

    千次阅读 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)
    
    
    
    展开全文
  • 刚开始用vscode软件编程的同学们有没有感觉这个软件缺少一种亲和力,没错,就是因为代码的默认颜色太丑了,下面来看一下如该修改vscode颜色吧。 效果图: 教程: 第一步点击拓展模块 第二步搜索vetur...
  • 我使用的setting配置如下:注意此配置... "workbench.iconTheme": "vscode-icons", "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxm
  • vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下
  • setting.json文件代码如下(直接复制进去保存就可): `{ “workbench.iconTheme”: “vscode-icons”, “files.associations”: { “.cjson": “jsonc”, ".wxss”: “css”, “*.wxs”: “javascript” }, “emmet...
  • 当文件后缀名为.CPP时,变量会不显示出蓝色,而是显示出黑色 而当将后缀名改回.cpp时,并不会马上复原。 需要彻底关闭该编辑器再重启才能生效。
  • VS Code代码高亮颜色设置

    万次阅读 多人点赞 2018-12-10 12:23:36
    1.File-》Preferences-》settings ...3.按照如下设置   { "editor.fontSize": 12, "editor.minimap.enabled": false, "window.zoomLevel": 2, "workbench.colorC...
  • VSCODE颜色设置

    2021-10-28 12:00:14
    D:\安装程序\Microsoft...你也可修改其他代码类型的颜色. 保存后重启vscode,就大功告成了 找到对应的name及其对应的setting 例如: "name": "Function declarations", "settings": { "foreground": "#144eee" ...
  • VSCode 代码没有颜色/颜色为白色

    千次阅读 多人点赞 2021-03-30 17:02:46
    1.页面最下方,点击纯文本 2.出现下拉框可以选择,如:选择html 3.就有颜色啦~~~
  • 设置vue代码字体颜色高亮为例:首先打开vs code软件,然后点击左侧中的扩展功能,如下图所示: 在扩展功能窗口中输入Vetur,在搜索出的插件中选择第一个后面的Install,如下图所示: 安装成...
  • VSCode 代码没有颜色-选择语言模式

    万次阅读 多人点赞 2020-10-12 13:30:10
    1.首先打开vscode编辑器,点击下方图片处 2.选择为vue页面配置语言模式,一般是Vue页面代码没有颜色 3.选择HTML,页面就会有颜色了,不需要重启
  • vscode自定义代码注释颜色

    万次阅读 多人点赞 2019-03-26 22:34:32
      vscode 的扩展插件十分强大,在里面可以找到许多自己喜欢的插件,如:代码主题风格等。博主很喜欢 Monokai 的代码主题风格,但是也有美中不足的地方。该主题的注释是灰色的,在黑色的代码面板里面很难看清楚;...
  • vscode中UI界面设置以及代码颜色字体设置 setting.json设置 { "editor.tabSize": 2, // tab必须是两格,漂亮 省地方 // "vim.disableAnnoyingNeovimMessage": true, "vim.useCtrlKeys": false, //这个不禁用就不...
  • vscode中控制台代码颜色设置

    千次阅读 2020-08-10 15:08:33
    设置vscode的终端颜色,字体的设置 code-> preferences -> setting --> 搜索workbench 选择第二个 workbench.colorCustomizations 修改 edit in setting.json 添加如下内容(只需要添加一对key, value即可)...
  • VScode 自定义代码颜色

    2021-12-21 20:53:42
    打开vacode,点击左侧边栏第五个选项,搜索Vetur,选中第一个安装即可
  • vscode设置字体颜色

    2021-11-15 14:22:20
    文件—首选项-设置-文本编辑器 在settings.json中添加下面代码 "editor.tokenColorCustomizations": { "comments": "#aa00ee", // 注释 "keywords": "#0a0", // 关键字 "variables": "#f00", // 变量名 ...
  • vscode颜色设置(护眼模式)

    千次阅读 多人点赞 2019-11-19 11:03:42
    代码如下 { "window.zoomLevel": 1, //窗口.缩放级别 "editor.tabSize": 2, //工作台主题颜色 "typescript.updateImportsOnFileMove.enabled": "always", "editor.formatOnSave": true, // 保存时格式化 ...
  • vscode怎么实现代码的高亮颜色插件

    千次阅读 2021-10-18 11:50:09
    vscode怎么实现代码的高亮颜色插件 首先需要安装扩展插件:vetur实现代码高亮. 如果不成功设置调整一下: 打开文件——首选项——设置直接搜索vetur——vetur,进入到 settings.json文件编辑之中,将以下代码复制进去...
  • 1.现在vscode的左下角找到如下图按钮,并点击 2.在输入框输入json,找到并进入settings.json这个文件中 3.进入并添加如下一段就ok了 //我只是想修改注释文字,所以只添加这段,底下的可以自行选择 "editor....
  • VSCode自定义配色文件

    2018-11-08 09:58:09
    目前在使用的一种配色方案,只要将该文件复制到VSCode的主体文件目录中($RELEASE/resources/app/extensions),以theme-开头的目录即为颜色主题配置 打开vscode,按键选择ctrl+k,ctrl+t,选择Monokai-My即可切换...
  • 1.页面最下方,点击纯文本 2.出现下拉框可以选择,如:选择html 3.就有颜色啦~~~ 快去试试啦 。。。
  • [VSCode] 自定义选中代码的高亮颜色

    千次阅读 2020-12-17 13:54:19
    打开VSCODE设置界面(在左下角或者快捷键ctrl + ,),在右上角打开 settings.json,见图第一个按钮。 在settings.json中,找到"workbench.colorCustomizations"键,如果没有的话,自己在JSON文件中添加。 找到之后...
  • 1、打开右下角齿轮图标(设置) 2、选择颜色主题 “Color Theme” 3、上下键预览各种主题效果 推荐两种:浅色+(默认浅色) 深色+(默认深色),主题简洁,并且代码中变量的使用有颜色
  • vscode中vue代码颜色插件

    万次阅读 2018-10-11 10:22:00
    曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了。 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,V...
  • 曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了。在VSCode Marketplace 搜素vue,vue-beautify,vue-color,VueHelper,vertur等等。比较了下载数量...
  • 主要介绍了vscode设置Fira_Code字体及改变编辑器字体、背景颜色,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,243
精华内容 3,297
关键字:

vscode代码颜色设置