meta data for this page
  •  

差異處

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

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
vs-code [2022/09/24 10:54]
ghsrobert 新用途、新設定，增加使用幸福感 		vs-code [2024/07/30 18:23] (目前版本)
ghsrobert [20240730 問題]
行 4: 行 4:
 /^20210825^/ 為了更方便地編輯 HTML code（嗚嗚 BlueGriffon 在 macOS 11 上 WYSIWYG 是半殘的），生平第一次下載 VS Code 來用，主要是看在 auto completion。 /^20210825^/ 為了更方便地編輯 HTML code（嗚嗚 BlueGriffon 在 macOS 11 上 WYSIWYG 是半殘的），生平第一次下載 VS Code 來用，主要是看在 auto completion。
  
-/^202209^/ 發現好用的新用途：+/^20220924^/ 發現好用的新用途：
   * 【延伸模組】表格化編輯 CSV！   * 【延伸模組】表格化編輯 CSV！
   * 編輯純文字檔   * 編輯純文字檔
行 10: 行 10:
     * Distration Free！Focus：Zen Mode ``⌘K`` ``Z``     * Distration Free！Focus：Zen Mode ``⌘K`` ``Z``
  
 +/^20220927^/
 +  * 因應越來越常用，今天把 Firefox 的 GhostText 設定移轉過來（暫時停用 Sublime Text 的套件，然後啟用 VS Code 這邊的套件）✅
 +  * 若要 wrap text with tags，有內建 [[https://docs.emmet.io/|Emmet]] 這個強大的東西！我還不太會用！
 +    * 不過原來我之前有裝 Wrap with tag 這個延伸模組了，按 ``⌥W`` 就可以了
 ===== 延伸模組 ===== ===== 延伸模組 =====
   * <div>   * <div>
行 19: 行 23:
 VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode</div> VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode</div>
  
-===== 色彩主題 =====+  * ⭐Customize UI 
 +    * 可以改介面字型太棒了！ 
 +    * 還有喜歡隱藏視窗 title bar 
 +  * DokuWiki 語法標示 
 +  * ⭐Edit csv：有了它就可以取代 Modern CSV 了 
 +  * GhostText 
 +  * htmltagwrap 
 +  * ⭐Settings Cycler：可設定熱鍵切換不同設定組！這樣就可以快速切換不同套的編輯區字型設定了 
 + 
 +===== 自訂 ===== 
 + 
 +==== 色彩主題 ====
 （其實也都是延伸模組） （其實也都是延伸模組）
   * /^20210913^/ 今天因為要比較認真來使用 VS Code（編輯「斯卡羅」客話台詞），想像之前在 Sublime Text 一樣開發自己的 color theme，卻發現流程很繁瑣，不開心。   * /^20210913^/ 今天因為要比較認真來使用 VS Code（編輯「斯卡羅」客話台詞），想像之前在 Sublime Text 一樣開發自己的 color theme，卻發現流程很繁瑣，不開心。
行 37: 行 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>
 +
 +==== 介面 ====
 +CSS 詳細設定： 
 +  * 參考 /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css
 +  * 用 Custom UI 延伸套件設定<div ex><code javascript>
 +    "customizeUI.stylesheet": {
 +        ".mac, .mac:lang(zh-Hant)": "font-family: Garamond;" /* 自訂 Mac 上整個視窗的字型！ */
 +    },</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