Vscode個性化設定：讓一個小萌妹陪你敲代碼-有解無憂

前言

大家平時都用什么代碼編輯器啊！我個人比較喜歡用vscode，因為有以下幾點：

開源，免費；
自定義配置
集成git
智能提示強大
支持各種檔案格式（html/jade/css/less/sass/xml）
除錯功能強大
各種方便的快捷鍵
強大的插件擴展
對前端這么友好，沒理由不用，

偷偷告訴你下載網址：
https://code.visualstudio.com/

效果圖

先上圖，注意下圖是動態的，

是不是很萌萌噠~

配置

這么萌的效果，怎么實作呢？配置如下，Windows環境和Mac環境同理，

找到vscode安裝目錄，
按路徑找到workbench.html檔案

resources\app\out\vs\code\electron-browser\workbench

3. 打開workbench.html檔案

檔案內容如下：

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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:;">
	</head>
	<body aria-label="">
	</body>

	<!-- Init Bootstrap Helpers -->
	<script src="../../../../bootstrap.js"></script>
	<script src="../../../../vs/loader.js"></script>
	<script src="../../../../bootstrap-window.js"></script>

	<!-- Startup via workbench.js -->
	<script src="workbench.js"></script>
</html>

編輯workbench.html檔案

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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:;">
	</head>
	<style type="text/css">
		#live2dcanvas {border: 0 !important;}
	</style>
	<body aria-label="">
		<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>
	</body>

	<!-- Init Bootstrap Helpers -->
	<script src="../../../../bootstrap.js"></script>
	<script src="../../../../vs/loader.js"></script>
	<script src="../../../../bootstrap-window.js"></script>

	<!-- Startup via workbench.js -->
	<script src="workbench.js"></script>

	<script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.0.min.js"></script>
	<script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>
	<script type="text/javascript">
	// L2Dwidget.init();
	  L2Dwidget.init({"display": {
        "superSample": 2,
        "width": 100,
        "height": 200,
        "position": "right",
        "hOffset": 0,
        "vOffset": 0
        }
     });
	</script>
</html>

直接把上面的代碼復制替換掉原來的代碼就好，但是為了有一條后路，最好把原來的代碼備份下，

重啟Vscode
重啟軟體，大功告成！

（小萌妹非靜止畫面）

淺析原理

這個動態的小萌妹是怎么實作的呢？
我們來看下之前的代碼，通過增刪改一頓操作之后，發下這行代碼至關重要，

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

它引入了live2d-widget@3.0.4/lib/L2Dwidget.min.js，通過搜索大法我們知道這是一個二次元前端插件，

我們直接這樣在瀏覽器輸入網址：

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

我去，是不是跟我一樣，一看到原始碼我就頭疼，不要怕，先開始復制代碼然后格式化:

我們不會一行一行看，我們可以抓住重點，比如第一行的GitHub地址，我們可以打開看看，

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

原始碼中大部分都是函式方法，我們拉到最后看，這是整個原始碼的關鍵所在，我們可以看到這是一個配置選項，我們不管里面的引數屬性都是什么，我們先打開圖中的網址https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json

我們打開這個json檔案的網址，復制代碼格式化之后，代碼如下，代碼中的檔案是從哪里來的呢？

{
  "type": "Live2D Model Setting",
  "name": "shizuku",
  "model": "moc/shizuku.moc",
  "textures": [
    "moc/shizuku.1024/texture_00.png",
    "moc/shizuku.1024/texture_01.png",
    "moc/shizuku.1024/texture_02.png",
    "moc/shizuku.1024/texture_03.png",
    "moc/shizuku.1024/texture_04.png",
    "moc/shizuku.1024/texture_05.png"
  ],
  "physics": "shizuku.physics.json",
  "pose": "shizuku.pose.json",
  "expressions": [
    { "name": "f01", "file": "exp/f01.exp.json" },
    { "name": "f02", "file": "exp/f02.exp.json" },
    { "name": "f03", "file": "exp/f03.exp.json" },
    { "name": "f04", "file": "exp/f04.exp.json" }
  ],
  "layout": { "center_x": 0, "y": 1.2, "width": 2.4 },
  "hit_areas": [
    { "name": "head", "id": "D_REF.HEAD" },
    { "name": "body", "id": "D_REF.BODY" }
  ],
  "motions": {
    "idle": [
      { "file": "mtn/idle_00.mtn", "fade_in": 2000, "fade_out": 2000 },
      { "file": "mtn/idle_01.mtn", "fade_in": 2000, "fade_out": 2000 },
      { "file": "mtn/idle_02.mtn", "fade_in": 2000, "fade_out": 2000 }
    ],
    "tap_body": [
      { "file": "mtn/tapBody_00.mtn", "sound": "snd/tapBody_00.mp3" },
      { "file": "mtn/tapBody_01.mtn", "sound": "snd/tapBody_01.mp3" },
      { "file": "mtn/tapBody_02.mtn", "sound": "snd/tapBody_02.mp3" }
    ],
    "pinch_in": [
      { "file": "mtn/pinchIn_00.mtn", "sound": "snd/pinchIn_00.mp3" },
      { "file": "mtn/pinchIn_01.mtn", "sound": "snd/pinchIn_01.mp3" },
      { "file": "mtn/pinchIn_02.mtn", "sound": "snd/pinchIn_02.mp3" }
    ],
    "pinch_out": [
      { "file": "mtn/pinchOut_00.mtn", "sound": "snd/pinchOut_00.mp3" },
      { "file": "mtn/pinchOut_01.mtn", "sound": "snd/pinchOut_01.mp3" },
      { "file": "mtn/pinchOut_02.mtn", "sound": "snd/pinchOut_02.mp3" }
    ],
    "shake": [
      {
        "file": "mtn/shake_00.mtn",
        "sound": "snd/shake_00.mp3",
        "fade_in": 500
      },
      {
        "file": "mtn/shake_01.mtn",
        "sound": "snd/shake_01.mp3",
        "fade_in": 500
      },
      {
        "file": "mtn/shake_02.mtn",
        "sound": "snd/shake_02.mp3",
        "fade_in": 500
      }
    ],
    "flick_head": [
      { "file": "mtn/flickHead_00.mtn", "sound": "snd/flickHead_00.mp3" },
      { "file": "mtn/flickHead_01.mtn", "sound": "snd/flickHead_01.mp3" },
      { "file": "mtn/flickHead_02.mtn", "sound": "snd/flickHead_02.mp3" }
    ]
  }
}

經過不斷的尋找，在這呢！

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

里面的原理我還得再仔細研究研究，

后悔藥

為了避免有些小伙伴換了小萌妹之后，會后悔，我這里有一個后悔藥，

我們來還原最初的樣子，初戀的感覺，

找到workbench.html檔案
復制下面代碼，替換，

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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:;">
	</head>
	<body aria-label="">
	</body>

	<!-- Init Bootstrap Helpers -->
	<script src="../../../../bootstrap.js"></script>
	<script src="../../../../vs/loader.js"></script>
	<script src="../../../../bootstrap-window.js"></script>

	<!-- Startup via workbench.js -->
	<script src="workbench.js"></script>
</html>

重啟vscode

重新啟動軟體，

解決vscode 不受支持提示
重啟完成之后，我們可能會看到不受支持提示，是因為我們改動了vscode的內部代碼，所以會提示，

我們來解決它，

打開命令列，安裝Fix VSCode Checksums，鍵入命令：

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

打開vscode，快捷鍵 Ctrl + Shift + P 輸入命令：

Fix Checksums:Apply

重啟Vscode，解決，

結語

歡迎關注我的公眾號前端歷劫之路

回復關鍵詞電子書，即可獲取12本前端熱門電子書，

回復關鍵詞紅寶書第4版，即可獲取最新《JavaScript高級程式設計》（第四版）電子書，

關注公眾號后，點擊下方選單即可加我微信，我拉攏了很多IT大佬，創建了一個技術交流、文章分享群，期待你的加入，

作者：Vam的金豆之路

微信公眾號：前端歷劫之路

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/232650.html

標籤：其他

上一篇：一手好牌打的稀爛，如今面臨倒計時，網友哭求眾籌活下去...

下一篇：穩坐開發領域霸主之位，揭秘C語言無可取代的幾大原因！