KJ DEV
Tips

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

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

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

目次
  1. マークダウンを書くためにエディタに求めるもの
  2. VS Codeで必要なプラグインをインストール
  3. マークダウンを書く上で便利になるプラグイン
    1. インストールしたけど使っていないプラグイン
      1. Auto-Open Markdown Preview
      2. Markdown Preview Enhanced
  4. 静的ファイルジェネレーターの記事執筆にはVS Code

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

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

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

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

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

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

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

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

  • Vim
  • vscode-textlint

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

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

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

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

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

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

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

  • Auto-Open Markdown Preview
  • Markdown Preview Enhanced

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

Auto-Open Markdown Preview

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

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

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

Markdown Preview Enhanced

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

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

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

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

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

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

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

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。