Vscode个性化设置：让一个小萌妹陪你敲代码

前言

大家平时都用什么代码编辑器啊！我个人比较喜欢用vscode，因为有以下几点：

开源，免费；
自定义配置
集成git
智能提示强大
支持各种文件格式（html/jade/css/less/sass/xml）
调试功能强大
各种方便的快捷键
强大的插件扩展对前端这么友好，没理由不用。

偷偷告诉你下载网址：https://code.visualstudio.com/

效果图

先上图，注意下图是动态的。

是不是很萌萌哒~

配置

这么萌的效果，怎么实现呢？配置如下，Windows环境和Mac环境同理。

找到vscode安装目录。
按路径找到workbench.html文件

1`resources\app\out\vs\code\electron-browser\workbench  
2`

3. 打开workbench.html文件

文件内容如下：

1<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->  
2<!DOCTYPE html>  
3<html>  
4 <head>  
5  <meta charset="utf-8" />  
6  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;">  
7 </head>  
8 <body aria-label="">  
9 </body>  
10  
11 <!-- Init Bootstrap Helpers -->  
12 <script src="../../../../bootstrap.js"></script>  
13 <script src="../../../../vs/loader.js"></script>  
14 <script src="../../../../bootstrap-window.js"></script>  
15  
16 <!-- Startup via workbench.js -->  
17 <script src="workbench.js"></script>  
18</html>  
19

编辑workbench.html文件

1<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->  
2<!DOCTYPE html>  
3<html>  
4 <head>  
5  <meta charset="utf-8" />  
6  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;">  
7 </head>  
8 <style type="text/css"> #live2dcanvas {border: 0 !important;} </style>  
9 <body aria-label="">  
10  <div id="live2d-widget"><canvas id="live2dcanvas" width="100" height="200" style="position: fixed;width:100px;height:200;opacity: 0.5;right: 0px;bottom: -20px;z-index: 99999;pointer-events: none;border:0;"></canvas></div>  
11 </body>  
12  
13 <!-- Init Bootstrap Helpers -->  
14 <script src="../../../../bootstrap.js"></script>  
15 <script src="../../../../vs/loader.js"></script>  
16 <script src="../../../../bootstrap-window.js"></script>  
17  
18 <!-- Startup via workbench.js -->  
19 <script src="workbench.js"></script>  
20  
21 <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.0.min.js"></script>  
22 <script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>  
23 <script type="text/javascript"> // L2Dwidget.init();  
24   L2Dwidget.init({"display": {  
25        "superSample": 2,  
26        "width": 100,  
27        "height": 200,  
28        "position": "right",  
29        "hOffset": 0,  
30        "vOffset": 0  
31        }  
32     }); </script>  
33</html>  
34

直接把上面的代码复制替换掉原来的代码就好，但是为了有一条后路，最好把原来的代码备份下。

重启Vscode 重启软件，大功告成！

（小萌妹非静止画面）

浅析原理

这个动态的小萌妹是怎么实现的呢？我们来看下之前的代码，通过增删改一顿操作之后，发下这行代码至关重要。

1<script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>  
2

它引入了live2d-widget@3.0.4/lib/L2Dwidget.min.js，通过搜索大法我们知道这是一个二次元前端插件。

我们直接这样在浏览器输入网址：

1https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616  
2

我去，是不是跟我一样，一看到源码我就头疼。不要怕，先开始复制代码然后格式化:

我们不会一行一行看，我们可以抓住重点，比如第一行的GitHub地址，我们可以打开看看。

1https://github.com/xiazeyu/live2d-widget.js  
2

源码中大部分都是函数方法。我们拉到最后看，这是整个源码的关键所在，我们可以看到这是一个配置选项，我们不管里面的参数属性都是什么，我们先打开图中的网址https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json

我们打开这个json文件的网址，复制代码格式化之后，代码如下。代码中的文件是从哪里来的呢？

1{  
2  "type": "Live2D Model Setting",  
3  "name": "shizuku",  
4  "model": "moc/shizuku.moc",  
5  "textures": [  
6    "moc/shizuku.1024/texture_00.png",  
7    "moc/shizuku.1024/texture_01.png",  
8    "moc/shizuku.1024/texture_02.png",  
9    "moc/shizuku.1024/texture_03.png",  
10    "moc/shizuku.1024/texture_04.png",  
11    "moc/shizuku.1024/texture_05.png"  
12  ],  
13  "physics": "shizuku.physics.json",  
14  "pose": "shizuku.pose.json",  
15  "expressions": [  
16    { "name": "f01", "file": "exp/f01.exp.json" },  
17    { "name": "f02", "file": "exp/f02.exp.json" },  
18    { "name": "f03", "file": "exp/f03.exp.json" },  
19    { "name": "f04", "file": "exp/f04.exp.json" }  
20  ],  
21  "layout": { "center_x": 0, "y": 1.2, "width": 2.4 },  
22  "hit_areas": [  
23    { "name": "head", "id": "D_REF.HEAD" },  
24    { "name": "body", "id": "D_REF.BODY" }  
25  ],  
26  "motions": {  
27    "idle": [  
28      { "file": "mtn/idle_00.mtn", "fade_in": 2000, "fade_out": 2000 },  
29      { "file": "mtn/idle_01.mtn", "fade_in": 2000, "fade_out": 2000 },  
30      { "file": "mtn/idle_02.mtn", "fade_in": 2000, "fade_out": 2000 }  
31    ],  
32    "tap_body": [  
33      { "file": "mtn/tapBody_00.mtn", "sound": "snd/tapBody_00.mp3" },  
34      { "file": "mtn/tapBody_01.mtn", "sound": "snd/tapBody_01.mp3" },  
35      { "file": "mtn/tapBody_02.mtn", "sound": "snd/tapBody_02.mp3" }  
36    ],  
37    "pinch_in": [  
38      { "file": "mtn/pinchIn_00.mtn", "sound": "snd/pinchIn_00.mp3" },  
39      { "file": "mtn/pinchIn_01.mtn", "sound": "snd/pinchIn_01.mp3" },  
40      { "file": "mtn/pinchIn_02.mtn", "sound": "snd/pinchIn_02.mp3" }  
41    ],  
42    "pinch_out": [  
43      { "file": "mtn/pinchOut_00.mtn", "sound": "snd/pinchOut_00.mp3" },  
44      { "file": "mtn/pinchOut_01.mtn", "sound": "snd/pinchOut_01.mp3" },  
45      { "file": "mtn/pinchOut_02.mtn", "sound": "snd/pinchOut_02.mp3" }  
46    ],  
47    "shake": [  
48      {  
49        "file": "mtn/shake_00.mtn",  
50        "sound": "snd/shake_00.mp3",  
51        "fade_in": 500  
52      },  
53      {  
54        "file": "mtn/shake_01.mtn",  
55        "sound": "snd/shake_01.mp3",  
56        "fade_in": 500  
57      },  
58      {  
59        "file": "mtn/shake_02.mtn",  
60        "sound": "snd/shake_02.mp3",  
61        "fade_in": 500  
62      }  
63    ],  
64    "flick_head": [  
65      { "file": "mtn/flickHead_00.mtn", "sound": "snd/flickHead_00.mp3" },  
66      { "file": "mtn/flickHead_01.mtn", "sound": "snd/flickHead_01.mp3" },  
67      { "file": "mtn/flickHead_02.mtn", "sound": "snd/flickHead_02.mp3" }  
68    ]  
69  }  
70}  
71  
72

经过不断的寻找，在这呢！

https://unpkg.com/browse/live2d-widget-model-shizuku@1.0.5/

里面的原理我还得再仔细研究研究。

后悔药

为了避免有些小伙伴换了小萌妹之后，会后悔，我这里有一个后悔药。

我们来还原最初的样子，初恋的感觉。

找到workbench.html文件复制下面代码，替换。

1<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->  
2<!DOCTYPE html>  
3<html>  
4 <head>  
5  <meta charset="utf-8" />  
6  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;">  
7 </head>  
8 <body aria-label="">  
9 </body>  
10  
11 <!-- Init Bootstrap Helpers -->  
12 <script src="../../../../bootstrap.js"></script>  
13 <script src="../../../../vs/loader.js"></script>  
14 <script src="../../../../bootstrap-window.js"></script>  
15  
16 <!-- Startup via workbench.js -->  
17 <script src="workbench.js"></script>  
18</html>  
19

重启vscode

重新启动软件。

解决vscode 不受支持提示重启完成之后，我们可能会看到不受支持提示。是因为我们改动了vscode的内部代码，所以会提示。

我们来解决它。

打开命令行，安装Fix VSCode Checksums，键入命令：

1code --install-extension lehni.vscode-fix-checksums  
2

打开vscode，快捷键 Ctrl + Shift + P 输入命令：

1Fix Checksums:Apply  
2

重启Vscode，解决。

结语

欢迎关注我的公众号前端历劫之路

回复关键词电子书，即可获取12本前端热门电子书。

回复关键词红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。

关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。

作者：Vam的金豆之路

微信公众号：前端历劫之路

- END -

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/OZ_FcaIvOToB0bzd8GDtzQ，如有侵权，请联系删除。

Vscode个性化设置：让一个小萌妹陪你敲代码

前言

效果图

配置

浅析原理

后悔药

结语

评论区

相关推荐