[macOS] VS CodeをMarkdownエディタとしてセットアップする

はじめに

こんにちは。モバイルアプリサービス部の平屋です。

最近、Markdownファイル編集に使用するエディタをSublime TextからVS Code(Visual Studio Code)に移行しました。本記事の下書きもVS Codeで書いています。

本記事では、インストールしたプラグインや適用した設定などを紹介します。

検証環境

• macOS High Sierra 10.13.5
• Visual Studio Code Version 1.25.1

目次

• インストール
• プラグイン
• テーマ
• 操作
• ユーザー設定

インストール

公式サイトからzipファイルをダウンロードします。

• Visual Studio Code - Code Editing. Redefined

そして、zipファイルを解凍してApplicationsフォルダに入れます。

プラグイン

数字の連番入力/目次生成用のプラグインは移行後も同様のものをインストールしました。

マークダウンのプレビューに関して、外部ブラウザではなく、アプリ内部で表示するようにしました。プレビューのスタイルを変更するプラグインだけ入れています。

また、移行前は「シンボリックリンク+クラウドストレージ」で各種設定を同期していましたが、Settings Syncというプラグインを使ったシンプルなフローに変更しました。

各プラグインの操作方法などについては各プラグインのページを参照してください!

移行前(Sublime Text)

• InputSequence
  • 連番英数の入力をサポートする
• MarkdownTOC
  • 目次を生成する
• OmniMarkupPreviewer
  • マークダウンのプレビューをブラウザで表示する

移行後(VS Code)

• Insert Numbers
  • 数字の連番入力をサポートする
• Markdown TOC
  • 目次を生成する
• Markdown Preview Github Styling
  • Githubと同等のスタイルでマークダウンのプレビューを表示する
• Settings Sync
  • 各種設定をGitHubのgist経由で同期する

テーマ

移行後も引き続きCobalt2を使っています。

テーマを変更するには以下の操作を行います。

• 左下の歯車アイコン > Color Theme

また、テーマを検索するには以下の操作を行います。

• 左下の歯車アイコン > Color Theme > Install Additional Color Themes

移行前(Sublime Text)

• cobalt2

移行後(VS Code)

• Cobalt2 Theme Official

操作

ちょっと触ってみた感じだと、マルチカーソルまわりのショートカットが異なるようでした。以下はVS Codeのショートカットです。

• マルチカーソル追加: option + クリック
• 矩形選択: shift + option + マウス
• マルチカーソル上追加: command + option + ↑
• マルチカーソル下追加: command + option + ↓

その他のショートカットは以下のページで確認できます。

• Visual Studio Code Key Bindings

ユーザー設定

ユーザー設定を確認するには以下の操作を行います。

• 左下の歯車アイコン > Settings

いまのところ、以下の3つの設定を手動で追加しました。上２つはマークダウンのプレビューに関する設定で、3つ目はInsert Numbersに関する設定です。

{
    "markdown.preview.scrollEditorWithPreview": false,
    "markdown.preview.scrollPreviewWithEditor": false,
    "insertnum.start" : 1,

    ...
}

さいごに

本記事では、VSCodeにインストールしたプラグインや適用した設定などを紹介しました。

まだVSCodeの一部しか触れていないので、他の部分も触っていきたいと思います。良さそうなプラグインなどありましたら教えてください!

参考資料

• Documentation for Visual Studio Code
• VS Codeでテキストを矩形選択するには：Visual Studio Code TIPS - ＠IT
• Sublime Textの機能をVisual Studio Codeに移行する - Qiita
• ブログズミ: Sync Settings for Visual Studio Code