経緯

今までmarkdownエディタとしてAtomを使ってきていたのだが、とにかく重くなる為に10分毎にソフトを再起動する必要があり、そのストレスが酷かったのでVSCodeに乗り換えてみたら、思っていた以上にいいエディタだった。今更感はあるものの簡単に紹介しようと思う。

また、文中の埋め込み動画について、編集中に撮ったものなので、映っている文章等がこの記事の本文と違う所もあるが気にしないで欲しい。

VSCodeって？

Wikipediaによると

Visual Studio Codeはソースコードエディタである。マイクロソフトにより開発され、Windows、Linux、macOS上で動作する。デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持つ。カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる。

Visual Studio CodeはElectronフレームワークを使用しており、Node.jsを使ったBlinkで描画されるデスクトップアプリケーションである。なお、Electronを使用したテキストエディタとしてAtomが有名であるが、そこからの派生ではなく、Visual Studio Online のエディタ（コードネーム "Monaco"）が基になっている。また、Visual Studioとは名称に共通点があり、使われている技術にも共有されている部分があるものの、直接的な派生関係は無い。

Visual Studio Codeとvscode（GitHub上のリポジトリ名）は完全に同一のものと思われがちだ。しかし、Visual Studio Codeはオープンソースのvscodeを元に作成されたものでありライセンスを含め違ったものである。

Visual Studioが統合開発環境であるのに対して、Visual Studio Codeはソースコードエディタ、つまりはテキストエディタであることなどがわかる。

個人的に述べさせてもらうと、Visual Studio Codeは、

Microsoft製の
Visual Studioと似た要素を持った
とにかく軽量かつ高速で
初期状態でも機能豊富な
拡張機能もある
クロスプラットフォームな
テキストエディタ

といった感じ。なんでさっきからテキストエディタと言っているかというと、僕個人がマークダウンを書くのにしか使っておらず、ソースコードエディタとしての真髄をまだ体験していないと思っているから。

しかし、デバッグ周りの機能がVisual Studioと同じ感じで備わっているのを見ると、こちらもなかなか優秀そうなので、いつか使った時には記事を書くか、追記したい。

VSCodeのインストール

公式サイトのトップページから、Download for ***で***に自分の使っているOSが自動識別されて表示される様なので、あっていたらそこをクリックする。

f:id:makiofinae:20180322141940p:plain

あっていなければ、その右の矢印の様なマークをクリックしてドロップダウンした選択肢の中から自分の使っているOSを選択する。

f:id:makiofinae:20180322141955p:plain

もしくは、ダウンロードページから自分のOSにあったものをダウンロードする。

f:id:makiofinae:20180322142008p:plain

インストールはインストーラに従って適当にすれば大丈夫。非常に簡潔で、特に変わったことは聞かれなかったと思う。

共通部分はあるとは思うが、ここからはOSはWindows前提で話を進めていく。

VSCodeの強み

以下、VSCodeの強みについて書いていこうと思う。

とにかく軽い

もうこれが強すぎるが、非常に軽い。起動が早ければ動作も早い。何かあったとしても再起動が直ぐなのでストレスがない。

ショートカットキー

参考： - キーバインディング - 【Windows版】VS Code キーボードショートカット一覧（オススメ付き）

(2018/8/12 追記 : ショートカットが変更されたようで、この記事におけるショートカットキーが必ずしも同様に動作するとは限らないことを確認した。上部のメニューバーから「Help->Keyboard Shotrcuts Reference」から現行のショートカットキーが確認できるのでそちらを確認いただきたい)

VSCodeには豊富な機能が存在しており、それらの殆どはショートカットキーで使用可能だ。Visual Studio(以下、単にVS)を普段遣いしている身としては、同じキーバインドで同じ様な機能が使えるのが非常に嬉しい。しかし勿論完全互換というわけではなく、VSCode独自の機能に対応するためVSと違うキーバインドになっているものもある。

以下コマンド例。

キー	動作	コマンドID
`Ctrl+X`	行の切り取り (未選択時)	editor.action.clipboardCutAction
`Ctrl+C`	行のコピー (未選択時)	editor.action.clipboardCopyAction
`Ctrl+Shift+K`	カーソル行削除	editor.action.deleteLines
`Ctrl+Enter`	下に行追加	editor.action.insertLineAfter
`Ctrl+Shift+Enter`	上に行追加	editor.action.insertLineBefore
`Alt+Down`	カーソル行を下に移動	editor.action.moveLinesDownAction
`Alt+Up`	カーソル行を上に移動	editor.action.moveLinesUpAction
`Shift+Alt+Down`	カーソル行を下にコピー	editor.action.copyLinesDownAction
`Shift+Alt+Up`	カーソル行を上にコピー	editor.action.copyLinesUpAction
`Ctrl+D`	次のマッチを選択に追加	editor.action.addSelectionToNextFindMatch
`Ctrl+K Ctrl+D`	次のマッチに移動	editor.action.moveSelectionToNextFindMatch
`Ctrl+U`	カーソル動作のUndo	cursorUndo
`Ctrl+Shift+L`	選択部分の全マッチを選択	editor.action.selectHighlights
`Ctrl+F2`	選択ワードの全マッチを選択	editor.action.changeAll
`Ctrl+Alt+Down`	カーソルを下に追加	editor.action.insertCursorBelow
`Ctrl+Alt+Up`	カーソルを上に追加	editor.action.insertCursorAbove
`Ctrl+Shift+]`	対応する括弧に移動	editor.action.jumpToBracket
`Ctrl+]`	行にインデントを追加	editor.action.indentLines
`Ctrl+[`	行のインデントを削除	editor.action.outdentLines
`Home`	行の先頭に移動	cursorHome
`End`	行の末尾に移動	cursorEnd
`Ctrl+End`	ファイルの末尾に移動	cursorBottom
`Ctrl+Home`	ファイルの先頭に移動	cursorTop
`Ctrl+K Ctrl+C`	行コメント記号を追加	editor.action.addCommentLine
`Ctrl+K Ctrl+U`	行コメント記号を削除	editor.action.removeCommentLine
`Ctrl+/`	行コメント記号をトグル	editor.action.commentLine
`Shift+Alt+A`	ブロックコメント記号をトグル	editor.action.blockComment
`Ctrl+F`	検索	actions.find
`Ctrl+H`	置換	editor.action.startFindReplaceAction
`F3`	次を検索	editor.action.nextMatchFindAction
`Shift+F3`	前を検索	editor.action.previousMatchFindAction
`Ctrl+M`	タブでフォーカス切り替えモードをトグル	editor.action.toggleTabFocusMode

特におすすめのものについては以下でも個別に見ていくのでその時にも示そうと思う。

ディレクトリ単位で開ける

VSCodeは複数のファイルをタブ形式で同時に開くことが出来るのだが、それらのファイルを特定のフォルダに入れておくことで、それを一つの単位として開くことが出来る。こうすると、フォルダ内のファイルがエクスプローラーに表示されるようになる。タブで開いておくと次回開いた際にも同様に開いてくれる。エクスプローラーについては左のメニューのファイルマークみたいなのを選択 or Ctrl+Shift+Eで出せる。以降はCtrl+Bでサイドメニューの表示をトグル出来る。

フォルダとして開くにはまだフォルダを開いていない状態でエクスプローラーのサイドバーを開き、「フォルダーを開く」を選択して、開いたウィンドウで開きたいフォルダを指定する。

f:id:makiofinae:20180322142113g:plain

タブでファイルを開いた際はCtrl+TabもしくはCtrl+Shift+Tabでタブを切り替え出来る。

マルチカーソルが便利

VSCodeでは、マルチカーソルといって、複数箇所に同時入力することが出来る機能がある。簡単なものをリストアップするとこういった感じだ。

機能	使い方
マルチカーソルを追加	`Alt+Click`
マルチカーソルの拡大	`Ctrl+Alt+Up(Down)`
マルチカーソルの解除	`Esc`
選択範囲と同じ文字列を追加選択	`Ctrl+D`

マルチカーソルの追加 f:id:makiofinae:20180322142202g:plain

マルチカーソルの拡大 f:id:makiofinae:20180322142206g:plain

選択範囲と同じ文字列を追加選択 f:id:makiofinae:20180322142208g:plain

これが結構便利なので是非使いこなして欲しい。

選択が楽

VSCodeではVS同様Ctrl+Left(Right)で文字列単位もしくは英単語単位で移動ができるので、この時Shiftを押しておけば文字列単位もしくは英単語単位で選択ができる。

f:id:makiofinae:20180322142400g:plain

また、Alt+Shiftを押した状態でドラッグアンドドロップすることで矩形選択をすることも出来る(VSではAlt+Shift+矢印キーで矩形選択できたが、VSCodeではAlt+Shift+Up(Down)が「上(下)に現在の行をコピー」になっているので出来ない。またVSと違い矩形選択に対する置換は出来ない模様)。

f:id:makiofinae:20180322142415g:plain

コメントアウトが楽

VSCodeではCtrl+/で行のコメントアウトが出来る。VSと同じくCtrl+K,Ctrl+Cでコメントアウト、Ctrl+K,Ctrl+Uでコメントアウト解除が出来るが、VSと違いこちらは行コメントアウトのコマンドになる。

f:id:makiofinae:20180322142432g:plain

選択箇所などブロックでのコメントアウトにはShift+Alt+Aを使う。

f:id:makiofinae:20180322142440g:plain

全体の表示

編集場所の右にはコード全体を縮小したものが表示されていて、全体の構成がどの様になっているのか大まかに知ることができる。また、マウスオーバーすることでそのうち画面に映っている場所がどこかも教えてくれる。

f:id:makiofinae:20180322142452g:plain

行ごと移動

Alt＋Up(Down)でカーソルがある行を上下に移動させることが出来る。移動する時は移動先と行を交換する形で移動する。

f:id:makiofinae:20180322142805g:plain

インデントの追加(削除)

Ctrl+]([)でインデントの追加(削除)を行える。

f:id:makiofinae:20180322142825g:plain

gitとの連携

git使用時に行番号の右の色のついた部分をクリックすると差分を確認できたりと、gitとの連携も取れていて便利。

変更前と変更後を左右に並べて、全体の変更点について確認も出来る。

拡張機能

VSCodeではユーザーが公開した拡張機能を使うことが出来る。これは所謂他のソフトでアドオンやプラグインと言われる機能だが、これによってデフォルトのままでは痒いところに手が届かずとも、何処かの誰かが作ってくれた便利な拡張機能のおかげで自分の好きな環境を構築することが出来るようになる。

markdownに便利な機能

言語モード

VSCodeでは、言語モードに基づいてその言語にあったシンタックスハイライト等をつけたりする。また、Ctrl+K,M(Ctrl+K,Ctrl+Mではない事に注意)を押すと検索窓が開き使用する言語モードを明示に指定できる。基本的に自動検出されると思うが、シンタックスハイライトがおかしい時等はこれでMarkdownを選択する。

f:id:makiofinae:20180322142552g:plain

プレビュー

markdownのプレビューを見るにはCtrl+Shift+Vで開く。プレビューはリアルタイムに更新されるので、プレビューを表示しながら編集したければ、プレビューを開きそれをCtrl+Alt+Right(右に画面を分割して追加)等で横に移すか、Ctrl+K,Vでプレビューを横に開く。タブで切り替えをしてもその表示されたタブのプレビューを表示してくれるので便利。

f:id:makiofinae:20180322142612g:plain

また、プレビューで何処かを選んでダブルクリックするとエディタ内のその箇所にジャンプすることが出来る。

インジケータ

編集時にプレビュー側に編集箇所を示すインジケータが出るので、そのおかげでプレビューでいうところのどの部分を編集しているのかがわかりやすい。

目次の自動生成

参考：vscodeの AlanWalk/markdown-toc extensionで目次の自動生成すると捗るぞ

markdownの目次を手動で管理するのは流石にアホらしい。自動で生成したいが、デフォルトのままではそういった機能は今の所ない。そこで目次を自動生成する拡張機能を入れる。

右のメニューの一番下の拡張機能マークを押して拡張機能サイドバーを開いたら、その中にある検索窓にmarkdown-tocと入力する。そうしたら恐らく一番上に出てくるAlanWalkさんのMarkdownTOCをインストールする。

インストール出来たら、目次を生成したい所で右クリックしてメニューからMarkdown TOC:Insert/Updateを選択するか、Ctrl+M,Tと押す。するとその位置に目次が生成され、ファイルが保存される度に自動で更新されるようになる。

もしも全ての項目にセクション数を追加したいのであれば(例えばこのセクションは4.8.3になる)、右クリックして出したメニューからMarkdown Sections:Insert/Updateを選択するか、Ctrl+M,Sと押す。

これで目次の自動管理が可能になった。

因みに拡張機能の設定を変更することで目次に表示する項目の深さ(デフォルトだと1から6まで)を変更できるが、これは以下のようにすることでファイルごとにも変更できる。

<!-- TOC depthFrom:2 orderedList:true -->

<!-- /TOC -->

詳しくはこの拡張機能のOverView等を参照のこと。

なお、この記事の目次ははてな記法で自動生成しているのでこれは使っていない。

入力補完

VSと同様、入力中にCtrl+Spaceと押すことで入力を自動補完出来る。ただし、IntelliSenseのみならずスニペット等も合わせて表示される。

f:id:makiofinae:20180322142849g:plain

スニペット

スニペットとは、一般的には「切れ端」「断片」という意味の英語である。IT用語としては、プログラミング言語の中で簡単に切り貼りして再利用できる部分のこと引用元

自動補完で表示が可能なことは先程示したが、VSCodeではこれも自分で定義できる。

自作スニペット

参考：独自のスニペットを作成

自作のスニペットを作るには上のメニューから「ファイル->基本設定->ユーザースニペット」と選択する。そうすると検索窓が出てくると思うので、markdownと入力してmarkdown.jsonを選択する。するとmarkdown.jsonが開くのでここに入力していくことになる。markdownに限らずスニペットは(languageId).jsonに保存する。

形式は

 "スニペットの名前":{
        "prefix": "自動補完の際にトリガーとなる文字列",
        "body":["置き換えられる文字列"],
        "description": "説明文",
    }

となっていて、これをデフォルトで書き込まれている{}のブロックの中に追記すればスニペットが追加できる。

bodyの置き換えられる文字列については

"body":[
            "1行目",
            "2行目",
            "3行目"
        ],

のように行にまたがって指定することが出来る。

例えば、横2縦3のテーブルに置き換えるスニペットであれば

 "create table":{
        "prefix": "table",
        "body":[
            "|col1|col2|",
            "|:--|:--|",
            "|ele1|ele2|",
            "|ele1|ele2|"
        ],
        "description": "2x3 table",
    }

と追加して、tableと入力して自動補完からスニペットを選択すると

|col1|col2|
|:--|:--|
|ele1|ele2|
|ele1|ele2|

と入力されるわけだ。スニペットの機能自体はもう少し特殊な構文もあり、色々とやれることはあるのだが、ここでは割愛するので参考ページを参考のこと。

稲枝の押入れ

いなえが適当なことを書いては、しまっておく場所

VSCodeの簡単な紹介(Markdown)

目次

経緯