美文网首页
vscode编辑器设置背景图片(background-cover

vscode编辑器设置背景图片(background-cover

作者: 踏莎行 | 来源:发表于2021-03-24 23:25 被阅读0次

   对着编辑器敲久了,看着编辑器总是一种颜色,有点厌烦,这时我们可以自己定义背景颜色或者背景样式,要就要花里胡哨,当然是将自己喜欢的图片设置为背景图片才舒服

背景图片设置

  • 打开编辑器左侧的扩展,搜索background-cover插件,点击下载,然后以管理员的身份重新打开vscode


    plugin.PNG
  • 重新打开vscode之后右下角就有一个切换背景图的按钮,点击


    click.PNG
  • 在弹出的对话框中,先选择背景图片,然后再根据自己的喜好设置透明度(0-1之间)


    setting.PNG

    这个图片是可以覆盖整个编辑器的视口的,也没有插件logo,给我们的体验还是不错的

  • 设置完图片之后,编辑器就会马上弹出一个code损坏的提示


    code.PNG

    不用担心,插件给的提示是:这个扩展通过编辑vscode的css文件来工作。因此,在第一次安装或更新vscode时会出现一条信息。您可以单击[不再显示]来避免它。
    如果不行,我们还可以通过插件来解决,在扩展中搜索“Fix VSCode Checksums”,下载,然后我们点击ctrl+shift+p,点击Fix Checksums: Apply,在重启vscode就可以解决了,(个人觉得这种方法比较好,以防后面出现不必要的麻烦)


    fix.PNG

代码颜色设置

   设置好我们喜欢的背景图片之后,又有一个问题,背景图片的颜色和我们的代码颜色接近,这样不利于平时的程序编写

  • 我们可以通过编辑器自带的主题修改(不赘述)
  • 另外我们可以自己控制代码以及编辑器其他颜色的设置
    首先打开设置(ctrl+,),找到Code Actions On Save,或者直接在顶部搜索,点击在settings.json中编辑
    edit.PNG
    将以下代码粘贴到该文件最外层大括号里面的最下面,粘贴前先看一下上一行代码的结尾有无逗号分割,没有的话要补上一个英文的逗号,否则报错,然后根据自己的喜好配置就行啦。嗯提一嘴,颜色代码可以用英文的,也能用rgb(a),十六进制的,或者鼠标放在颜色代码上,应该会弹出让你选择颜色的选择器(我不确定这是否是我安装了什么插件才会显示的)
"workbench.colorCustomizations": { //覆盖当前所选颜色主题的颜色
        "editor.background": "#1b1b19", //编辑器背景色
        "editor.selectionBackground": "#5a5f21", //用户选中代码段的颜色 
        "editor.findMatchBackground": "#ff0000", //当前搜索匹配的颜色
        "editor.findMatchHighlightBackground": "#fa0a01", //其他搜索匹配项的颜色
        "editor.findRangeHighlightBackground": "#ff9900", //限制搜索范围的颜色
        "editor.lineHighlightBackground": "#3a2f2f", //光标所在行高亮内容的背景颜色
        "editor.lineHighlightBorder": "#f33f3f" //光标所在行四周边框的背景颜色
    },
    "editor.tokenColorCustomizations": {
        "comments": "#a2a7a4", // 注释
        "keywords": "#cff10a", // 关键字
        "variables": "#06ee19", // 变量名
        "strings": "#07ffd6", // 字符串
        "functions": "#f5b607", // 函数名
        "numbers": "#7f3cfa" // 数字
    },

主要注意的两个地方


attention.PNG

好了,ok

相关文章

网友评论

      本文标题:vscode编辑器设置背景图片(background-cover

      本文链接:https://www.haomeiwen.com/subject/vutwcltx.html