在 VS Code 實現 Markdown 的預覽與修正

作者：瑞課 - 6月 12, 2020

使用 Github 開發過程時，常需要使用 MarkDown 語法編寫說明文件。雖然 Markdown 的語法不難，但是在撰寫的文件的時候，往往會因為不知道預覽的結果，導致需要反覆推送以微調說明文件。

本文將分享 VSCode 的 Markdown 預覽的工具，讓你不需要將文件推送至 Github ，即可以約略的掌握 Markdown 文件在 Github 上的呈現樣貌。

Markdown 是什麼？

MarkDown 是目常非常普遍用來撰寫文件檔的格式規範，目標就是使用「易讀、易寫的純文字格式編寫文件，讓文字的撰寫者不需要分心於文件的格式，在手幾乎不離開鍵盤的情況下，即可實現大部分的文件編輯的需求。

而 Github 的每一個專案幾乎都會有 README.md 的說明文件，就是使用 Markdown 的格式來做為編寫工具。再透過 Github 的程式將之轉換為使用者慣用閱讀格式。除了 Github 外，也有許多工具支援 Markdown 的語法，如近期漸漸愈來愈多人使用的 Notion 筆記/專案管理軟體，就有支援。

Markdown 雖然具有手不離開鍵盤即則成簡易格式編輯的好處，但是記憶 Markdown 的格式也是有學習成本的，通常是靠著熟記 Markdown 的語法，以實現快速的編輯。 Markdown 的格式特性讓它可以直接相關於各式的簡易編輯器，Markdown 語法的易使用性與編輯器的相容性佳，導致編輯過程，無法直接掌握預覽的效果。

VS Code 和 Markdown

在 VScode 程式編輯器雖然本身已經有支援 Markdown 格式，但是我還是推薦可以再裝 UNOTES - Markdown Notes WYSIWYG 和 Prettier - Code Formatter 兩個套件，來優化 Markdown 的編輯。

在 VS code 中裝了 UNOTES 以後，即可以在編輯的 md 文件的時候，打開預覽。實現畫面切割，並將 Markdown 的編輯，直接呈現在預覽的視窗。

但是，雖然 Markdown 易於使用，但是當要使用某些符號時，需要使用跳脫符號，才能避免與 Markdown 的格式設定衝突。但是，若是在撰寫文件的過程，使用跳脫符號才能輸入某些符號，是會影響思考的思路。而 Prettier - Code Formatter 套件剛好可以解決你這一個困擾，安裝完套件後，並在設定中開啟 Edit：Format On Save 的功能。我們就不需要在意是否需要使用跳脫符號，當文件按下存儲時， Prettier 套件會自動檢查文字的內容，並在你忘了加為跳脫字元的符號前，自動加入跳脫字元。