整理我在 VS Code 中編輯 Markdown 表格時經常使用的四個擴充套件。
當我推薦別人使用 Markdown 撰寫文件時，經常會被問：「你是怎麼編輯表格的？」而對方通常比較習慣使用 WYSIWYG 視覺化編輯工具。
必須承認，在表格編輯方面，無論是便利性還是效率，通常還是視覺化編輯器占上風。尤其是在 Visual Studio Code 這類純文字編輯器中編寫 Markdown 表格，如果沒有輔助工具，手工編寫表格確實不方便。
這篇文章整理了我在 VS Code 中編輯 Markdown 表格時經常使用的工具，包括以下四款：
Excel to Markdown table
Repo： https://github.com/csholmq/vscode-excel-to-markdown-table
用法： 按 Shift+Alt+V 可將從 Excel 複製到剪貼簿的儲存格內容轉換成 Markdown 表格。
Markdown Paste
Repo： https://github.com/telesoho/vscode-markdown-paste-image
按 Ctrl+Alt+V（macOS 是 Cmd+Alt+V）可以：
- 將 HTML 貼上並轉換成 Markdown。如果剪貼簿中的內容是 HTML 表格，則會轉換成 Markdown 表格。
- 如果剪貼簿中的內容是圖片，則可儲存圖片並產生 Markdown 圖片語法。
MdTableEditor
Repo： https://github.com/clover-plpl/vsc-md-table-editor
常用操作 1： 在編輯器中輸入 3x2，即可快速建立一個 3 × 2 的 Markdown 表格，如下圖：
常用操作 2： 使用 Fill Cells 功能重新排版整個表格，讓欄寬整齊一致。
補充說明：
如果輸入 3x2 的時候沒有出現建立表格的提示，可開啟 VS Code 的「使用者設定 (JSON)」，加入以下設定來啟用 Markdown 檔案的補全提示：
"[markdown]": {
"editor.quickSuggestions": {
"other": "on",
"comments": "off",
"strings": "off"
},
"editor.snippetSuggestions": "top"
}Markdown Table Editor
Repo： https://github.com/octop162/markdown-table-editor
這款提供視覺化表格編輯器，也具備前述 MdTableEditor 的 Fill Cells 功能，也就是表格欄寬重排。如下圖：
視覺化操作很直觀，這裡不再詳述。也可以參考官方 README 的展示動畫。
小結
這裡介紹的工具，已經能滿足我經常碰到的使用情境：
- 如果要將 Excel 中的某個儲存格範圍轉換成 Markdown 表格，我會先複製該範圍，接著在 VS Code 編輯器中按
Shift+Alt+V貼上。這是 Excel to Markdown table 的功能。 - 如果要將網頁上的 HTML 表格轉換成 Markdown 表格，我會先將它複製到剪貼簿，再到 VS Code 編輯器中按
Ctrl+Alt+V（macOS 是Cmd+Alt+V）貼上。這是 Markdown Paste 的功能。 - 如果要從頭建立 Markdown 表格，我會先輸入類似
5x4的文字，建立一個5 × 4的空白表格。這是 MdTableEditor 的功能。 - 如果要修改表格內容，我會使用 Markdown Table Editor 的視覺化表格編輯器輸入資料並重新排版表格。
Keep writing!
沒有留言: