VS CodeをMarkdownエディタとして使う

VS Code Markdown

この記事ではVS CodeでMarkdownをフォーマットしてみます。

プログラミングスクールのフィヨルドブートキャンプで日報を書く際、Markdownで記述する必要があります。筆者はすでに開発用としてVS Codeを使っているので、 ツールの分散を避けるためにVS CodeでMarkdownを書けるよう環境を整えました。

また、VS CodeはMarkdown専用エディタとしても優秀だと思いますので、

  • すでにVS Codeを開発用などで使用している方
  • VS CodeをMarkdown専用エディタとして使いたい方

どちらの方にも役に立つ内容かと思います。

使用環境

動作を確認した環境は以下の通りです。

前提

Markdownを格納しておくディレクトリを任意の場所に用意しておくことをオススメします。筆者はバックアップと同期を使用しているので、~/Googleドライブにfjold_noteディレクトリを設置し、日報編集用のファイルdairy_report.mdなどを格納しています。

setting.jsonの編集方法、コマンドパレットの開き方、ショートカットキーの変更方法がわからない方は下記のリンクをご確認ください。

改行の設定を変更

VS CodeのMarkdown記述はデフォルトで「半角スペースを2つ行末にいれて改行」となります。これはMarkdownの正式な記述方法なのですが、setting.jsonに下記の通り記述することで意図した改行が反映されるようになります。

"markdown.ipreview.breaks": true,

ただし、コピペ先がはてなブログなどの場合は半角スペースを2つ行末にいれないと段落内で改行されませんのでご注意ください。

拡張機能のインストール

見出しのリンクからインストールできます。

Prettier - Code formatter

setting.jsonに下記を記載しておくことで、ファイル保存時に自動整形してくれます。

"editor.formatOnSave": true

ただし、Markdownをフォーマットする際に英語（アルファベット）と日本語の間に半角スペースを入れてしまいます。

たとえば、 ChromeとFirefoxはブラウザ→Chrome と Firefox はブラウザ と、このようにフォーマットされてしまいます。

VS Codeを開発用に使用されている方は、後述の解決方法を御覧ください。 VS CodeをMarkdown専用エディタとして使用する方は、この拡張機能は削除して頂いて構いません。

Remark

Prettierの代用です。コマンドパレットからRemark: Beautify markdown codeを入力するとMarkdownのフォーマットができます。

Markdown All in One

ショートカットや補完を揃えた必須の拡張機能です。

参考：VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One

Markdown Preview Enhanced

Markdownファイルを開いた状態で、command + shift + Vでプレビュー画面が表示されます。また、コマンドパレットから「Markdown Preview Enhanced: Create TOC」を実行することで目次を自動生成してくれます。こちらもショートカットを登録しておくことをオススメします。

markdownlint

Markdownの構文チェックを行ってくれる拡張機能です。

テキスト校正くん

日本語の文章をチェックする拡張機能です。必須ではないと思います。

markdownlintとテキスト校正くんはこのように問題パネルにエラー内容を表示してくれます。

こちらはタイトル付きリンクを貼るのに便利なChrome拡張機能です。 1. Create Linkをインストール後にオプションを開きます。 2. デフォルトをmarkdownに設定します。 3. Configure shortcutからショートカットを設定します。筆者はcommand + Lにしています。 4. Chromeのタブを開いた状態でショートカットを実行すると、クリップボードにMarkdown形式のリンクがコピーされます。

Prettierの半角スペース挿入問題を解決

対処法1 拡張機能RemarkでMarkdownのフォーマットを行う

今回はこちらを採用しました。

  1. settings.jsonを開き、下記の通り記述するとMarkdownでPrettierが保存時に自動整形しないよう設定します。
 "[markdown]": {
        "editor.formatOnSave": false
    },
  1. settings.jsonを開き、下記のように記述することでRemarkの設定を変更できます。下記の例ではmarklintやテキスト校正くんに引っかからないように設定しています。お好みでカスタマイズしてみてください。
  "remark.format": {
    "rules": {
      "listItemIndent": 1,
      "fences": true
    }
  },

コマンドパレットからRemark: Beautify markdown codeにショートカットキーを登録しておくことをオススメします。筆者はoption + Rにしています。

対処法2 Prettierのプラグインをインストールする

npm/yarnでprettierとprettier-plugin-md-nocjsp（有志によるプラグイン）をローカルまたはグローバルインストールします。

$ prettier -w *.md

上記のコマンドで、カレントディレクトリのMarkdownをフォーマットすることが可能です。

対処法3 Prettierのソース（index.js）に手を加えて挙動を強引に制御する

~/.vscode/extensions/esbenp.prettier-vscode-6.3.2/node_modules/prettier/index.js

上記を編集する方法です。半角スペースを挿入しているらしき処理は何箇所か確認できましたが、編集してもうまく動作しなかったため筆者のような初心者は手を出さない方が無難です。

まとめ

現状はこのように対処しましたが、将来Prettierのバージョンアップで解決する可能性があります。よりよい方法や質問があれば、ぜひコメントでお知らせください。

参考文献

以下の記事を参考にさせていただきました。 執筆者様に感謝します。