A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始


VS Code 内测版...常用插件...背景图更换


对于编辑器,作为程序员的我们,都不会陌生的,今天就教同学们打造属于个性化的编辑器(PS:编辑器都不知道是啥?,那一定是一个假的程序员{:8_469:})


好了,废发不多说,先上效果图----------------------------------


(第一次发帖,不知道图片怎么放大...{:8_484:})


怎么样?是不是很好看   (什么?不好看?那就是我的四毛的审美问题,这个锅我背了...)

同学们可以设置自己喜欢的背景图,比如说:漂亮的小姐姐,播妞姐的美照(当然,前提是你还能安心的撸代码...)

咳咳,进入正题....

第一步:

            1.安装VS Code....

               正式版,内测版都行   


               内测版下载连接    点我下载~.~

   


ps:内测版可以拖入多个文件夹,正式版目前还不支持

                2. 安装一个叫做background 的插件(国人开发的哦~.~)


           点击安装插件的按钮====>搜索框输入background====>点击安装====>重启VS Code

              


          3.打开一个代码,如果成功的画,右下角会出现一个萌妹子


                 默认就是这样子的>.<


              


             如果没有,那就打开设置  

             左下角那个设置图标====>然后点设置====>进入设置页面往下拉====>找到background插件配置(如图↓↓)



              配置项中有中文提示,很好懂...


          // Plugin background enabled.background 插件是否启用

                   "background.enabled": true,          //如果没有出现图片,就把插件是否启用设置为true


             // If use front image,which means image is placed on the top of your code. 是否使用前景图,这样会使图片放在代码的顶部

                 "background.useFront": true,           //把是否启用前景图也设置为true,不然等下设置全屏背景的时候会盖住代码


            // Custom style.自定义样式.          //这个是默认设置,先不管,等下我把我写好的设置发出来

                     "background.style": {

                      "content": "''",

                      "pointer-events": "none",

                      "position": "absolute",

                      "z-index": "99999",

                      "width": "100%",

                      "height": "100%",

                      "background-position": "100% 100%",

                      "background-repeat": "no-repeat",

                      "opacity": 1

},

                     // Use default images.使用默认图片

                     "background.useDefault": true,        //如果需要更换自己喜欢的背景图,就把这个设置为false


                    // Your custom Images(Max length is 3). 自己定制背景图,最多3个

                      "background.customImages": [],       //这个是设置背景图片路径的(建议设置绝对路径),最多只能设置3张(VS Code只能分3屏)

                  
                   4.背景图样式设置(其实就是CSS....)
                  因为需要显示全屏背景,所以就要改一下默认的css样式
                        (我把我的样式设置贴出来,懒得自己调的就直接复制进设置就行了)
                        (当然,喜欢折腾的大神也可以自己折腾着玩)
                     背景图样式设置截图-------------

                         背景图样式设置代码---------------


"background.enabled": true,
    "background.useFront": true,
    "workbench.iconTheme": "material-icon-theme",
    "editor.renderControlCharacters": true,
    "editor.tabSize": 4,
    "php.validate.executablePath": "E:/application/phpStudy/php/php-5.4.45/php.exe",
    "background.useDefault": false,
    "background.customImages": [
        "E:/application/Microsoft VS Code Insiders/resources/app/img/7.jpg",
        "E:/application/Microsoft VS Code Insiders/resources/app/img/8.jpg",
        "E:/application/Microsoft VS Code Insiders/resources/app/img/8.jpg"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "center",
        "background-repeat": "no-repeat",
        "background-size": "cover",
        "opacity": 0.2 //更改透明度,根据喜好来
    },



[tr][/tr]

好了,今天的内容就到这了,悄悄的告诉你们,背景图片设置为gif,有惊喜哦



如果还有什么不懂的,欢迎评论区或私聊提问,喜欢本内容的请点赞,关注,3Q{:8_507:}



13 个回复

倒序浏览
最后的代码格式居然乱了...................
回复 使用道具 举报
不明觉历。。。。厉害了word四毛
回复 使用道具 举报
厉害了大神  
回复 使用道具 举报
厉害我的哥
回复 使用道具 举报
简直棒棒哒!
回复 使用道具 举报
厉害了。小伙伴
回复 使用道具 举报
大神的页面很漂亮哦
回复 使用道具 举报
aaxjl 初级黑马 2017-9-22 15:17:51
9#
谢谢楼主分享
回复 使用道具 举报
肥钦的作品,必须支持哇
回复 使用道具 举报
厉害了,我的哥!
回复 使用道具 举报
他说他爱四毛小姐姐
回复 使用道具 举报
厉害了,四毛哥
回复 使用道具 举报
厉害了大神
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马