Vscode個性化設置：讓你愛上敲代碼
作者：maomin9761
大家平時都用什么代碼編輯器啊!我個人比較喜歡用vscode，下面就給大家介紹Vscode個性化設置。
前言
大家平時都用什么代碼編輯器啊!我個人比較喜歡用vscode，因為有以下幾點：
- 開源，免費;
- 自定義配置
- 集成git
- 智能提示強大
- 支持各種文件格式(html/jade/css/less/sass/xml)
- 調試功能強大
- 各種方便的快捷鍵
- 強大的插件擴展 對前端這么友好，沒理由不用。
下載網址：https://code.visualstudio.com/
效果圖
先上圖，注意下圖是動態的。
配置
這么萌的效果，怎么實現呢?配置如下，Windows環境和Mac環境同理。
找到vscode安裝目錄。
按路徑找到workbench.html文件
- esources\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>
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 重啟軟件，大功告成!
淺析原理
這個動態的小萌妹是怎么實現的呢?我們來看下之前的代碼，通過增刪改一頓操作之后，發下這行代碼至關重要。
- <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/
里面的原理我還得再仔細研究研究。
后悔藥
我們來還原最初的樣子。
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的內部代碼，所以會提示。
我們來解決它。
打開命令行，安裝Fix VSCode Checksums，鍵入命令：
- code --install-extension lehni.vscode-fix-checksums
打開vscode，快捷鍵 Ctrl + Shift + P 輸入命令：
- Fix Checksums:Apply
重啟Vscode，解決。
責任編輯：姜華
來源：
前端歷劫之路
