Tips2021.04.02

エンジニアがマークダウンでブログを書くならVisual Studio Code

これまでマークダウンを書くためにいろんなエディタを使ってきたけど、マークダウンで文章を書く機会が増えそうだったので、本腰をいれてエディタ選びです。

ただマークダウンをかければ良いというわけではなく、ブログをマークダウンで書くために便利という点に重きを置いてみました。

目次

マークダウンを書くためにエディタに求めるもの

マークダウンを書くためのエディタはたくさんあるけれど、自分が求める環境は下記の2つが実現できること。

この2つをエディタに求めると、ただマークダウンを書くためのエディタではなくコードを書くためのエディタになる。

ということで選んだのはVisual Studio Code（以下VS Code）。

以前Vimから乗り換えてみようかと触ってみて乗り換えに失敗はしたものの、IDEにしては軽くてなかなか好印象だったので採用。

まずはVSCodeでVimとtextlintを使うために下記の2つを導入。

この2つを入れるだけで特に設定をすることなく、求めている環境が完成する。

もちろんVimは人それぞれ慣れたキーバインドがあると思うから、別途設定したほうがよいけれど。

結論から書いてしまうと上記の2つの必須プラグイン以外は「CharacterCount」しか使っていない。

CharacterCountはマークダウンの文字数をステータスバーに表示してれるシンプルなものだけど、ブログ記事を書いているとボリューム把握のため文字数が気になるので、参考程度に導入している。

VSCodeでマークダウンを環境を作ろうと決めた時に検索すると、下記の2つを入れている記事を多く見かけた。

最初はおお!便利じゃんと思ったけど、記事を編集したり追加しているうちに煩わしくなってしまいました。

Auto-Open Markdown Previewはマークダウンをファイルを開くと自動的にプレビューを画面分割で開いてくれるプラグイン。

たしかに便利そう!と思って使ってみたけど、画面分割されるため肝心の編集画面が小さくなって「プレビュー邪魔だな」って感じるようになりました。

大きい画面だと快適なのかもしれないけど、書いたマークダウン自体はHexoのローカルサーバーで確認するため、エディタでプレビューできる利点が自分の使い方にはメリットが少なかったですね。

Markdown Preview Enhancedは正直、何ができるのかは完全に把握できていない。

プレビューでアウトラインが見れるのは文章を構造化しやすくていいなあって思ったけど、Auto-Open Markdown Preview同様画面が小さくなるという理由で結局使ってない。

図を入れたりするのにこのプラグインは便利っぽいけど、今のところこのブログで書いている内容的に図が入るようなこともあまりないので、使いたくなるまでとりあえず無効化しています。

僕の場合はHexoだけど、他の静的ファイルジェネレーターで記事を書く時もコマンドで記事を生成することになります。

VS Codeはターミナルが使えるし、そんな用途とは結構相性が良いですよ。

静的ファイルジェネレーターでブログ書くのはエンジニアだったり、開発できる人が多いと思うので記事の執筆にもVS Codeを使ってみてはいかがでしょう？