VS Code

使用

^20210825 為了更方便地編輯 HTML code（嗚嗚 BlueGriffon 在 macOS 11 上 WYSIWYG 是半殘的），生平第一次下載 VS Code 來用，主要是看在 auto completion。

^20220924 發現好用的新用途：

• 【延伸模組】表格化編輯 CSV！
• 編輯純文字檔
  • 字型！「Edit With Style」：切換成專門用於打文字的宋體等字型設定
  • Distration Free！Focus：Zen Mode ``⌘K`` ``Z``

^20220927

• 因應越來越常用，今天把 Firefox 的 GhostText 設定移轉過來（暫時停用 Sublime Text 的套件，然後啟用 VS Code 這邊的套件）✅
• 若要 wrap text with tags，有內建 Emmet 這個強大的東西！我還不太會用！
  • 不過原來我之前有裝 Wrap with tag 這個延伸模組了，按 ``⌥W`` 就可以了

延伸模組

• 名稱: HTML Preview
  識別碼: tht13.html-preview-vscode
  描述: Provides ability to preview HTML documents.
  版本: 0.2.5
  發行者: Thomas Haakon Townsend
  VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode

• ⭐Customize UI
  • 可以改介面字型太棒了！
  • 還有喜歡隱藏視窗 title bar
• DokuWiki 語法標示
• ⭐Edit csv：有了它就可以取代 Modern CSV 了
• GhostText
• htmltagwrap
• ⭐Settings Cycler：可設定熱鍵切換不同設定組！這樣就可以快速切換不同套的編輯區字型設定了

自訂

色彩主題

（其實也都是延伸模組）

• ^20210913 今天因為要比較認真來使用 VS Code（編輯「斯卡羅」客話台詞），想像之前在 Sublime Text 一樣開發自己的 color theme，卻發現流程很繁瑣，不開心。
• ^20220923 先用簡單的方式，在 settings.json 中，在現有主題上慢慢修改一些參數 ✅（例）

      "workbench.colorCustomizations": {
          "[Ayu Light]": {
              "editor.background": "#D2DFD0D9",
              "titleBar.activeBackground": "#D2DFD0D9",
              "tab.activeBackground": "#D2DFD0D9",
              "activityBar.background": "#5D6D39",
              "activityBar.inactiveForeground": "#D5D89B",
              "minimap.background": "#D2DFD0D9",
              "scrollbarSlider.activeBackground": "#5D6D39",
              "scrollbarSlider.background": "#D5D89B"
          },
      },

介面

CSS 詳細設定：

• 參考 /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css
• 用 Custom UI 延伸套件設定

      "customizeUI.stylesheet": {
          ".mac, .mac:lang(zh-Hant)": "font-family: Garamond;" /* 自訂 Mac 上整個視窗的字型！ */
      },

  這樣就順利把整個視窗的字型都改成自己想要的了，而且還可以有 font fallback！比 Custom UI 延伸套件內建只能替換一個字型更棒！

  • 後續又改了不少，都在我的 settings.json 中
  • 無法直接改的：

    • ⚠️ webview 的字型
      雖然應該是 html 元素的 –vscode-font-family 變數，但是因為 webview 是呈現在 iframe 裡，所以改了也無效的樣子……

    • ✅ Edit CSV

      • 行高：
        寫死在 ~/.vscode/extensions/janisdd.vscode-edit-csv-0.7.2/thirdParty/handsontable/handsontable.min.css 裡面 ∴要進去把 .handsontable td, .handsontable th 改成相對性的數值 1.5em
      • 一些字型及大小：要改 ~/.vscode/extensions/janisdd.vscode-edit-csv-0.7.2/csvEditorHtml/settingsOverwrite.css 以及 main.css

• VS Code 1.74+ 無法使用 Custom UI
  → 重裝 1.73.1 並回復設定（過程略）

  改用 VSCodium：

  1. 用 Brew 裝好 ✅ → 要用強制打開
  2. 照這裡把 Market 改成 VS Code 的 ✅
  3. 裝這裡 提供的 Monkey Patch VSIX 檔 ✅
     → 裝上了，並且重新啟動 VSCodium ✅
  4. 準備要裝 Custom UI
     1. 倒是發現一個 Custom VSCode UI CSS，這個可以直接用在 VS Code 嗎？← 可以裝，但設定了一小段 CSS 卻沒什麼效果，先不管
     2. 裝 Custom UI 並把 VS Code 那邊的設定都複製過來 → 成功了！！！

VSCodium

改用 VSCodium 的好處：

• 可以更新到 VS Code 1.74+ 的程式基礎，這樣就能裝一些新的擴充套件，如：
  • GhostText Official

從 VS Code 移轉設定：

1. 將 ~/Library/Application Support/Code 複製一份後改名為 VSCodium
   • VSCodium 需要做一個 product.json 才能用 VS Market，那個也要放進去
2. 擴充套件：
   1. 本想把 ~/.vscode 直接複製到 ~/.vscode-oss，但因為怕影響到「特殊版」的 Monkey Patch，所以改為👇
   2. 用 $ code –list-extensions | tee ~/vscode-extensions.txt 指令¹⁾
      1. 但 code 一開始並不是 shell command → 在 VS Code 中用 command palette 執行「Shell command: install 'code' command in PATH」✅
      2. 執行 $ code –list-extensions | tee ~/vscode-extensions.txt ✅
      3. 編輯 ~/vscode-extensions.txt，拿掉：

         iocave.customize-ui
         iocave.monkey-patch
         tokoph.ghosttext

      4. 在 VS Code command palette 執行 uninstall 'code' command（好像不用了，如果下一步是安裝 codium 的話那就不會打架了）
      5. 在 VSCodium 中用 command palette 執行「Shell command: install 'codium' command in PATH」✅
      6. 執行 $ xargs -n1 codium –install-extension < ~/vscode-extensions.txt，真有趣，不用關 VSCodium，一個個都裝好了～
   3. Edit CSV 的行高要再設定

20240730 問題

最近發現 ``⌘⇧N`` 開新視窗時會說「歡迎」畫面 unexpected token in json

1. 裝最新 VSCodium 1.91xxxx 會打不開，死
2. 降裝 1.79.0 → Customize UI 出得來，但介面字型變了
   • （有發現 VS Code 似有新的 APC extension 可以調整介面）
3. 再降裝 1.75.1 → 介面字型順利改變，但是「歡迎」畫面又死了