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

ブログをHexoにしてマークダウンで記事を書くようなったので、環境を整えてみました。

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

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

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

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

  • Vimのキーバインドが使える
  • textlintがリアルタイムで使える
{%/box%}

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

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

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

VS Codeで必要なプラグインをインストール

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

  • Vim
  • vscode-textlint
{%/box%}

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

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

マークダウンを書く上で便利になるプラグイン

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

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

インストールしたけど使っていないプラグイン

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

  • Auto-Open Markdown Preview
  • Markdown Preview Enhanced
{%/box%}

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

Auto-Open Markdown Preview

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

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

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

Markdown Preview Enhanced

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

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

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

Hexoで記事を作成するときのVS Codeのターミナルが便利

Hexoでは記事を作成する時に下記のコマンドでマークダウンファイルを生成することができます。

$ hexo new post post-name

postの部分をdraftにすると下書きも生成可能で、基本的にはコマンドを叩いてファイルを作ることになります。

VS Codeだとエディタ内でターミナルが使えるため、すぐに記事を書くことができるのは結構快適だったりします。

そのままgit操作に映ることもできるし、記事の作成から完成までVS Codeだけで完結できるのはメリットかなと思っています。

静的ファイルジェネレーターの記事執筆にはVS Code

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

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

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

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。