跟我來轻绞，用Visual Studio Code打造一個適合你的Markdown編輯工具

作為一個喜歡使用markdown來記錄自己學(xué)習(xí)筆記的人，一個好的markdown工具無疑能給自己帶來更好的書寫體驗恼策。

我對編輯器有下面幾個要求：

• 最好使用java語言開發(fā)，這樣我能夠根據(jù)自己的需求定制化實現(xiàn)功能。
• 支持IntelliJ IDEA的快捷鍵或者可以自定義快捷鍵氯庆，因為作為一個javaer，我在編輯文本時會很自然的使用IntelliJ IDEA的快捷鍵扰付，但是有些時候這種習(xí)慣會嚴重影響我的編輯體驗堤撵，比如在IntelliJ IDEA中ctrl+w組合鍵的作用是擴散選詞，而在其他編輯工具中羽莺，ctrl+w的效果可能是關(guān)閉當(dāng)前編輯窗口实昨，那種寫著寫著筆記，突然把編輯器關(guān)掉的感覺盐固，相信我荒给，你絕對不想體驗第二次。
  
  這是什么人間疾苦
• 支持plantuml刁卜，LaTex等語法志电，這些擴展語法對我來說相對比較重要，因為我需要借助于他們來更好的記錄我的想法长酗。
• 良好的預(yù)覽體驗溪北，良好的預(yù)覽體驗是指實時同步無卡頓的預(yù)覽，最好是局部或者流式渲染布局效果夺脾，因為如果每次輸入都重新渲染整個預(yù)覽界面的話之拨，在有大量表達式和圖片等資源的時候，預(yù)覽的卡頓會非常影響使用體驗咧叭。

• 支持列編輯蚀乔，列編輯是一個很細節(jié)的功能，很多編輯器不具備這個功能菲茬，但是在某些時候吉挣，卻又格外有用派撕。

  
  
  說真的
• 最好支持圖床，在markdown添加圖片是一個相對比較麻煩的事睬魂，所以我的要求是最好支持圖床终吼，直接粘貼即可的那種，不需要做額外太多操作氯哮，這一點很重要际跪，但是因為我自己開發(fā)了一個截圖工具，可以完美的提供截圖并上傳到云端還能將訪問地址以markdown語法的格式回填剪切板的體驗喉钢，所以姆打，圖床只是一個可選的功能肠虽。
  
  我可真優(yōu)秀
• 最好是開源或者免費的

抱著對上面的要求慨代，我調(diào)研和使用了市面上非常多的markdown編輯器，但是這些編輯器或多或少有令我感到不合適的地方，為此捣郊，我甚至自己去開發(fā)了一款markdown編輯器着茸。

• Markdown編輯工具途事，支持主流的Plantuml
  
  二次開發(fā)的Markdown編輯工具

但是娃承，功能的實現(xiàn)不是一蹴而就的梳猪，很多功能的實現(xiàn)都需要我去用大量的時間來完成匿沛。

而且肺然，因為是借助于其他開源項目做的二次開發(fā)弟跑，因此在設(shè)計上和自己的思路有些不同之處，如果想完全實現(xiàn)自己的需求防症，無疑要費很大的功夫和很長的時間孟辑。

而我恰恰缺少的就是時間，因此蔫敲，我需要考慮能不能去找一個能夠滿足我絕大多數(shù)需求的工具饲嗽。

沮喪

Visual Studio Code良好的插件機制以及社區(qū)，基本上提供了我所需的絕大多數(shù)功能裙犹，甚至在某些地方超出了我的預(yù)期尽狠。

點擊訪問Visual Studio Code官網(wǎng)

Visual Studio Code官網(wǎng)

安裝Visual Studio Code

點擊直接下載Visual Studio Code 1.43.2

獲取到Visual Studio Code的安裝包之后，雙擊安裝包叶圃，進入Visual Studio Code的安裝流程袄膏。

安裝

同意協(xié)議，點擊下一步：

請輸入圖片描述

點擊下一步：

請輸入圖片描述

點擊完成：

請輸入圖片描述

安裝簡體中文語言包

Visual Studio Code默認使用的英文:

英文菜單

但是我們可以通過安裝簡體中文語言包來進行漢化工作：

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索Chinese (Simplified) Language Pack for Visual Studio Code或者直接點擊Chinese (Simplified) Language Pack for Visual Studio Code掺冠。

安裝界面

點擊安裝按鈕沉馆，安裝中文語言支持包，安裝完成后赫舒，Visual Studio Code會在右下角彈出提示框悍及。

重啟提示

點擊Restart Now按鈕，等待Visual Studio Code重啟后接癌，完成漢化工作心赶。

漢化后

安裝主題插件

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索Community Material Theme或者直接點擊Community Material Theme。

點擊Install按鈕：

點擊安裝

如果是瀏覽器打開還需要再次確認：

允許打開

安裝完插件后缺猛，點擊設(shè)置顏色主題按鈕：

設(shè)置顏色主題

選擇ommunity Material Theme Lighter High Contrast主題：

選擇主題

這款純白色的主題缨叫，能夠放松我的心情：

純白色

除了這款白色的主題,還有一個暗黑系主題插件要推薦Panda Theme

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索Panda Theme或者直接點擊Panda Theme。

Panda Theme

暗黑系的主題效果：

暗黑系

別問我為什么推薦Panda Theme這款主題荔燎，因為我喜歡熊貓耻姥。

無辜

安裝Markdown Preview Enhanced

Markdown Preview Enhanced提供了很多額外的特性，這一點很贊有咨！

特性

這是他們家的文檔琐簇，通過文檔，可以更好的了解這個插件的特性，建議通讀一遍婉商。

這個插件的確提供了很多有意思的功能似忧，比如文件格式轉(zhuǎn)換，圖床之類的功能：

預(yù)覽窗口的右鍵菜單

有些許不足之處是丈秩，在文章中包含大量圖片引用時盯捌，滾動編輯窗口，有些時候預(yù)覽窗口會快速閃過蘑秽，體驗會受到一絲影響:

杠精

仔細看饺著，左側(cè)編輯窗口頂部由47行滾動到49行，但是預(yù)覽窗口快速滾動到了底部肠牲，這不算是bug,應(yīng)該是同步策略的問題幼衰，美中不足吧~

滾動預(yù)覽.gif

雖然有些小瑕疵，但是其余功能還是很棒的埂材，所以安裝一個吧~

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索Markdown Preview Enhanced或者直接點擊Markdown Preview Enhanced塑顺。

安裝Markdown Shortcuts插件

Markdown Shortcuts插件為常規(guī)的markdown語法提供了快捷鍵支持。

Markdown Shortcuts插件

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索Markdown Shortcuts或者直接點擊Markdown Shortcuts安裝該插件俏险。

快鍵鍵列表

安裝PlantUMl插件，使原生的預(yù)覽視圖支持PlantUml語法

PlantUMl插件不僅能夠為我們的markdown原生預(yù)覽視圖提供PlantUml語法支持扬绪，他還支持*.wsd竖独，*.pu，*.puml挤牛，*.plantuml莹痢，*.iuml后綴的文件。

PlantUMl插件

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索PlantUML或者直接點擊PlantUML安裝該插件墓赴。

安裝完成后竞膳，針對PlantUMl插件進行簡單的配置。

PlantUMl插件有兩種渲染方式诫硕，一種是本地渲染坦辟，一種是通過遠程服務(wù)器渲染。

本地渲染需要本地安裝java運行環(huán)境和Graphviz應(yīng)用程序章办，點擊查看本地渲染文檔锉走，這里建議使用遠程服務(wù)器渲染的方式，比較簡單藕届。

遠程服務(wù)器渲染比較簡單挪蹭，點擊訪問遠程渲染文檔：

使用ctrl+shift+p快捷鍵打開命令窗口，輸入Open Settings(JSON),選擇首選項：打開設(shè)置(json):

首選項：打開設(shè)置(json)

在打開的settings.json文件中輸入遠程服務(wù)器配置:

settings.json

代碼：

"plantuml.server": "http://www.plantuml.com/plantuml"

安裝Markdown Preview Mermaid Support插件

安裝Markdown Preview Mermaid Support插件讓markdown支持流程圖和Mermaid圖休偶。

Markdown Preview Mermaid Support插件

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索Markdown Preview Mermaid Support或者直接點擊Markdown Preview Mermaid Support安裝該插件梁厉。

安裝IntelliJ IDEA Keybindings插件

安裝IntelliJ IDEA Keybindings插件讓Visual Studio Code支持IntelliJ IDEA的快捷鍵。

IntelliJ IDEA Keybindings插件

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索IntelliJ IDEA Keybindings或者直接點擊IntelliJ IDEA Keybindings安裝該插件踏兜。

在該頁面中包含了詳細的快捷鍵列表词顾。

安裝VSC Netease Music插件八秃，編寫代碼邊聽歌

VSC Netease Music是Visual Studio Code中的網(wǎng)易云音樂插件。

VSC Netease Music插件

使用快鍵鍵ctrl+shift+x打開應(yīng)用商店搜索VSC Netease Music或者直接點擊VSC Netease Music安裝該插件计技。

使用該插件需要替換Visual Studio Code安裝目錄下的ffmpeg.dll文件：

安裝目錄

點擊下載electron-v7.1.11-win32-x64.zip喜德。

或者訪問https://npm.taobao.org/mirrors/electron/獲取自己需要的版本。

解壓得到的electron文件：

electron壓縮包

復(fù)制其中的ffmpeg.dll文件替換Visual Studio Code安裝目錄下的ffmpeg.dll文件：

請輸入圖片描述

點擊替換目標中的文件按鈕：

提示

完成替換：

替換后

重啟Visual Studio Code垮媒，使用ctrl+shift+p打開命令輸入窗口舍悯，輸入并執(zhí)行NeteaseMusic:Start命令：

NeteaseMusic:Start

不要關(guān)閉Visual Studio Code打開的NeteaseMuisc窗口：

NeteaseMuisc

使用ctrl+shift+p打開命令輸入窗口，輸入并執(zhí)行NeteaseMusic:Search命令：
選擇你喜歡的音樂睡雇，盡情享受吧~

歌曲搜索列表

值得一提的是萌衬，展示在狀態(tài)欄的歌曲操作工具欄和歌詞提示是真的香。

狀態(tài)欄的歌詞

以前聽歌想看歌詞就得開啟桌面歌詞它抱，但是桌面歌詞放在哪都會影響到自己的編輯體驗秕豫，現(xiàn)在歌詞放在狀態(tài)欄，一低頭就能看到观蓄，是真的讓人感到特別精致混移。

真香

安利一款markdown截圖上傳工具

截圖上傳工具，支持一鍵將截圖上傳到云端侮穿，并將訪問地址以指定格式歌径，回填到剪切板中

• JPanda Snapshot支持將截圖上傳到多種不同的環(huán)境中。

  目前包括: 阿里云,京東云,七牛云,GITHUB,GITEE,OSCHINA,簡書,imgurl圖床,SM圖床以及本地和不存儲亲茅。
  

  圖床

• JPanda Snapshot在完成圖片上傳之后回铛，允許將圖片或圖片地址處理成不同的數(shù)據(jù)類型。

  目前包括: MARKDOWN語法克锣，真實訪問地址,圖片本身茵肃。
  

  剪切板

• 相對完善的圖片編輯功能。

  目前支持: 繪制圓形袭祟、繪制矩形验残、繪制箭頭、自由畫筆榕酒、文字胚膊、馬賽克
  

  圖片編輯功能

• 圖釘功能-允許將截圖固定在屏幕窗口，且允許為該截圖添加簡單描述想鹰，并提供了豐富的快捷鍵支持紊婉。

  
  
  圖釘功能

• 其他功能

• 為了保存訪問云環(huán)境的相關(guān)數(shù)據(jù)，支持啟用密碼辑舷。

• 失敗任務(wù)列表喻犁，允許重新上傳處理失敗的圖片。

• 提供圖釘管理界面，管理圖釘

  
  
  熊貓截圖

使用體驗：

使用體驗

寫在最后

關(guān)于使用Visual Studio Code的使用體驗肢础，截止到目前我最新的mybatis源碼之美系列文章就是使用它來完成編寫過程的还栓。

除了代碼和語法提示稍有不足之外，其余的暫時都能滿足我的需求传轰，甚至在很多地方剩盒，超出了我的預(yù)期。

很棒慨蛙！