meta data for this page
  •  

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
vs-code [2022/10/04 18:10]
ghsrobert 自訂 UI 字型！ 		vs-code [2024/07/30 18:23] (目前版本)
ghsrobert [20240730 問題]
行 52: 行 52:
 </code> </code>
 </div>++ </div>++
 +
 +<div issue>Zen Mode 的 top bar 顏色疑似無法自訂
 +  * 有去 GitHub 反映，但測試後似乎不是官方的問題
 +  * 測試把 settings.json 清空、停用所有 extension → 只設定 ''editorGroupHeader.noTabsBackground'' 是有效的 :(
 +  * 測試一一啟用 extension、加回之前的設定：
 +    - 啟用 Ayu 主題，並單獨針對 Ayu Light 設定 ✅
 +    - Batch Replacer ✅
 +    - DokuWiki ✅
 +    - 換上主幹版 settings.json ❎（而且 CustomizeUI 明明沒有啟用，介面卻都變了，VS Code 真特別，難道是每次都 hard code 進去嗎）感覺問題是在 CustomizeUI 影響到了，但我不知道怎樣讓它復原才好，真煩
 +    - 把主幹版 settings.json 複製一份，並刪掉 CustomizeUI 的 stylesheet 部分 ✅
 +    - 把主幹版 settings.json 複製一份，把 CustomizeUI 的 stylesheet 除了該 top bar 的部分加回去 ❎ :( 算了！先這樣！真的不知道 hard code 到哪去了 <<怒>>
 +</div>
  
 ==== 介面 ==== ==== 介面 ====
行 59: 行 71:
     "customizeUI.stylesheet": {     "customizeUI.stylesheet": {
         ".mac, .mac:lang(zh-Hant)": "font-family: Garamond;" /* 自訂 Mac 上整個視窗的字型！ */         ".mac, .mac:lang(zh-Hant)": "font-family: Garamond;" /* 自訂 Mac 上整個視窗的字型！ */
-    },</code></div>+    },</code></div>這樣就順利把整個視窗的字型都改成自己想要的了，而且還可以有 font fallback！比 Custom UI 延伸套件內建只能替換一個字型更棒！ 
 +    * 後續又改了不少，都在我的 settings.json 中 
 +    * 無法直接改的： 
 +      * <div issue>⚠️ webview 的字型 
 +雖然應該是 html 元素的 ''--vscode-font-family'' 變數，但是因為 webview 是呈現在 iframe 裡，所以改了也無效的樣子…… 
 +</div> 
 +      * <div issue>✅ Edit CSV 
 +  * 行高：\\ 寫死在 ~/.vscode/extensions/janisdd.vscode-edit-csv-0.7.2/thirdParty/handsontable/handsontable.min.css 裡面 ∴要進去把 ''.handsontable td, .handsontable th'' 改成相對性的數值 <span ex>''1.5em''</span> 
 +  * 一些字型及大小：要改 ~/.vscode/extensions/janisdd.vscode-edit-csv-0.7.2/csvEditorHtml/settingsOverwrite.css 以及 main.css 
 +</div> 
 +  * <div issue>VS Code 1.74+ 無法使用 Custom UI 
 +→ 重裝 1.73.1 並回復設定（過程略） 
 + 
 +改用 VSCodium： 
 +  - 用 Brew 裝好 ✅ → 要用強制打開 
 +  - 照[[https://github.com/VSCodium/vscodium/blob/master/DOCS.md#how-to-use-a-different-extension-gallery|這裡]]把 Market 改成 VS Code 的 ✅ 
 +  - 裝[[https://github.com/VSCodium/vscodium/issues/1390#issuecomment-1411187403|這裡]] 提供的 Monkey Patch VSIX 檔 ✅\\ → 裝上了，並且重新啟動 VSCodium ✅ 
 +  - 準備要裝 Custom UI 
 +    - 倒是發現一個 [[https://marketplace.visualstudio.com/items?itemName=kencocaceo.customvscodeuicss|Custom VSCode UI CSS]]，這個可以直接用在 VS Code 嗎？← 可以裝，但設定了一小段 CSS 卻沒什麼效果，先不管 
 +    - 裝 Custom UI 並把 VS Code 那邊的設定都複製過來 → 成功了！！！ 
 +</div> 
 + 
 +===== VSCodium ===== 
 +改用 VSCodium 的好處： 
 +  * 可以更新到 VS Code 1.74+ 的程式基礎，這樣就能裝一些新的擴充套件，如： 
 +    * [[https://marketplace.visualstudio.com/items?itemName=fregante.ghost-text|GhostText Official]] 
 + 
 +從 VS Code 移轉設定： 
 +  - 將 ~/Library/Application Support/Code 複製一份後改名為 VSCodium 
 +    * VSCodium 需要做一個 product.json 才能用 VS Market，那個也要放進去 
 +  - 擴充套件： 
 +    - 本想把 ~/.vscode 直接複製到 ~/.vscode-oss，但因為怕影響到「特殊版」的 Monkey Patch，所以改為👇 
 +    - 用 ''$ code --list-extensions | tee ~/vscode-extensions.txt'' 指令(([[https://dev.to/0xdonut/why-and-how-you-should-to-migrate-from-visual-studio-code-to-vscodium-j7d|Why and how you should migrate from Visual Studio Code to VSCodium - DEV Community]])) 
 +      - 但 ''code'' 一開始並不是 shell command → 在 VS Code 中用 command palette 執行「Shell command: install 'code' command in PATH」✅ 
 +      - 執行 ''$ code --list-extensions | tee ~/vscode-extensions.txt'' ✅ 
 +      - 編輯 ~/vscode-extensions.txt，拿掉：<code> 
 +iocave.customize-ui 
 +iocave.monkey-patch 
 +tokoph.ghosttext 
 +</code> 
 +      - 在 VS Code command palette 執行 uninstall 'code' command（好像不用了，如果下一步是安裝 ''codium'' 的話那就不會打架了） 
 +      - 在 VSCodium 中用 command palette 執行「Shell command: install 'codium' command in PATH」✅ 
 +      - 執行 ''$ xargs -n1 codium --install-extension < ~/vscode-extensions.txt''，真有趣，不用關 VSCodium，一個個都裝好了～ 
 +    - Edit CSV 的行高要再設定 
 + 
 +==== 20240730 問題 ==== 
 +最近發現 ``⌘⇧N`` 開新視窗時會說「歡迎」畫面 ''unexpected token in json'' 
 +  - 裝最新 VSCodium 1.91xxxx 會打不開，死 orz 
 +  - 降裝 1.79.0 → Customize UI 出得來，但介面字型變了 
 +    * （有發現 VS Code 似有新的 APC extension 可以調整介面） 
 +  - 再降裝 1.75.1 → 介面字型順利改變，但是「歡迎」畫面又死了 :s