自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Vscode個(gè)性化設(shè)置：讓你愛(ài)上敲代碼

作者：maomin9761
系統(tǒng)
大家平時(shí)都用什么代碼編輯器啊!我個(gè)人比較喜歡用vscode，下面就給大家介紹Vscode個(gè)性化設(shè)置。

 前言

大家平時(shí)都用什么代碼編輯器啊!我個(gè)人比較喜歡用vscode，因?yàn)橛幸韵聨c(diǎn)：

  • 開(kāi)源，免費(fèi);
  • 自定義配置
  • 集成git
  • 智能提示強(qiáng)大
  • 支持各種文件格式(html/jade/css/less/sass/xml)
  • 調(diào)試功能強(qiáng)大
  • 各種方便的快捷鍵
  • 強(qiáng)大的插件擴(kuò)展 對(duì)前端這么友好，沒(méi)理由不用。

下載網(wǎng)址：https://code.visualstudio.com/

效果圖

先上圖，注意下圖是動(dòng)態(tài)的。



 

配置

這么萌的效果，怎么實(shí)現(xiàn)呢?配置如下，Windows環(huán)境和Mac環(huán)境同理。

找到vscode安裝目錄。


按路徑找到workbench.html文件

  1. esources\app\out\vs\code\electron-browser\workbench 

 3. 打開(kāi)workbench.html文件

文件內(nèi)容如下：

  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> 

4.編輯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"> 
  9.   #live2dcanvas {border: 0 !important;} 
  10.  </style> 
  11.  <body aria-label=""> 
  12.   <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> 
  13.  </body> 
  14.  
  15.  <!-- Init Bootstrap Helpers --> 
  16.  <script src="../../../../bootstrap.js"></script> 
  17.  <script src="../../../../vs/loader.js"></script> 
  18.  <script src="../../../../bootstrap-window.js"></script> 
  19.  
  20.  <!-- Startup via workbench.js --> 
  21.  <script src="workbench.js"></script> 
  22.  
  23.  <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.0.min.js"></script> 
  24.  <script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script> 
  25.  <script type="text/javascript"> 
  26.  // L2Dwidget.init(); 
  27.    L2Dwidget.init({"display": { 
  28.         "superSample": 2, 
  29.         "width": 100, 
  30.         "height": 200, 
  31.         "position": "right", 
  32.         "hOffset": 0, 
  33.         "vOffset": 0 
  34.         } 
  35.      }); 
  36.  </script> 
  37. </html> 

直接把上面的代碼復(fù)制替換掉原來(lái)的代碼就好，但是為了有一條后路，最好把原來(lái)的代碼備份下。

重啟Vscode 重啟軟件，大功告成!

 

淺析原理

這個(gè)動(dòng)態(tài)的小萌妹是怎么實(shí)現(xiàn)的呢?我們來(lái)看下之前的代碼，通過(guò)增刪改一頓操作之后，發(fā)下這行代碼至關(guān)重要。

  1. <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，通過(guò)搜索大法我們知道這是一個(gè)二次元前端插件。

我們直接這樣在瀏覽器輸入網(wǎng)址：

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


我去，是不是跟我一樣，一看到源碼我就頭疼。不要怕，先開(kāi)始復(fù)制代碼然后格式化:


我們不會(huì)一行一行看，我們可以抓住重點(diǎn)，比如第一行的GitHub地址，我們可以打開(kāi)看看。

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

源碼中大部分都是函數(shù)方法。我們拉到最后看，這是整個(gè)源碼的關(guān)鍵所在，我們可以看到這是一個(gè)配置選項(xiàng)，我們不管里面的參數(shù)屬性都是什么，我們先打開(kāi)圖中的網(wǎng)址https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json


我們打開(kāi)這個(gè)json文件的網(wǎng)址，復(fù)制代碼格式化之后，代碼如下。代碼中的文件是從哪里來(lái)的呢?

  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. } 

經(jīng)過(guò)不斷的尋找，在這呢!

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

 

里面的原理我還得再仔細(xì)研究研究。

后悔藥

我們來(lái)還原最初的樣子。

1.找到workbench.html文件 復(fù)制下面代碼，替換。

  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> 

2.重啟vscode

   重新啟動(dòng)軟件。

3.解決vscode 不受支持提示 重啟完成之后，我們可能會(huì)看到不受支持提示。是因?yàn)槲覀兏膭?dòng)了vscode的內(nèi)部代碼，所以會(huì)提示。

 

我們來(lái)解決它。

打開(kāi)命令行，安裝Fix VSCode Checksums，鍵入命令：

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

打開(kāi)vscode，快捷鍵 Ctrl + Shift + P 輸入命令：

  1. Fix Checksums:Apply 

重啟Vscode，解決。

 

 

責(zé)任編輯：姜華 來(lái)源： 前端歷劫之路
Vscode 代碼 編輯器
相關(guān)推薦

2020-08-31 12:00:17

Linux終端顏色命令

2020-06-28 07:00:00

推薦系統(tǒng)智能商務(wù)服務(wù)平臺(tái)

2022-11-01 07:19:45

推薦系統(tǒng)非個(gè)性化

2011-01-20 10:19:21

PowerShell個(gè)性化

2013-11-07 16:42:34

Windows 8.1個(gè)性化

2011-05-04 14:38:53

海爾江山帝景一體機(jī)

2023-03-21 12:46:30

智慧城市人工智能大數(shù)據(jù)

2019-05-20 08:11:02

淘寶個(gè)性化推薦

2024-07-02 09:41:11

2015-03-18 17:38:05

Windows HelWindows 10

2009-07-13 15:33:24

桌面虛擬化虛擬化IT

2021-11-19 22:45:14

Windows系統(tǒng)數(shù)據(jù)

2025-03-19 08:36:55

2021-01-04 13:40:59

Git開(kāi)源工具

2024-04-17 09:27:22

WPF工具Template

2011-04-28 11:14:33

simpleframe

2017-11-22 09:24:00

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)