Vscode個性化設置：讓你愛上敲代碼

作者：maomin9761 2020-12-04 05:56:19

系統(tǒng)

大家平時都用什么代碼編輯器啊!我個人比較喜歡用vscode，下面就給大家介紹Vscode個性化設置。

前言

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

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

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

效果圖

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

配置

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

找到vscode安裝目錄。

按路徑找到workbench.html文件

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

3. 打開workbench.html文件

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

<!-- 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>

4.編輯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 重啟軟件，大功告成!

淺析原理

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

<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，通過搜索大法我們知道這是一個二次元前端插件。

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

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

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

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

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

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

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

{ 
  "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" } 
    ] 
  } 
}

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

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

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

后悔藥

我們來還原最初的樣子。

1.找到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>

2.重啟vscode

重新啟動軟件。

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

我們來解決它。

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

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

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

Fix Checksums:Apply

重啟Vscode，解決。

責任編輯：姜華來源：前端歷劫之路

Vscode 代碼編輯器