meta data for this page

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`` 就可以了

延伸模組

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

自訂

色彩主題

(其實也都是延伸模組)

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

Zen Mode 的 top bar 顏色疑似無法自訂

  • 有去 GitHub 反映,但測試後似乎不是官方的問題
  • 測試把 settings.json 清空、停用所有 extension → 只設定 editorGroupHeader.noTabsBackground 是有效的 :(
  • 測試一一啟用 extension、加回之前的設定:
    1. 啟用 Ayu 主題,並單獨針對 Ayu Light 設定 ✅
    2. Batch Replacer ✅
    3. DokuWiki ✅
    4. 換上主幹版 settings.json ❎(而且 CustomizeUI 明明沒有啟用,介面卻都變了,VS Code 真特別,難道是每次都 hard code 進去嗎)感覺問題是在 CustomizeUI 影響到了,但我不知道怎樣讓它復原才好,真煩
    5. 把主幹版 settings.json 複製一份,並刪掉 CustomizeUI 的 stylesheet 部分 ✅
    6. 把主幹版 settings.json 複製一份,把 CustomizeUI 的 stylesheet 除了該 top bar 的部分加回去 ❎ :( 算了!先這樣!真的不知道 hard code 到哪去了 <<怒>>

介面

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

討論區

輸入您的意見. 允許使用維基語法:
T᠎ X R D᠎ C