Microsoft が開発したエディタVisual Studio Code（以降、 VS Code ）のインストールから拡張機能の導入までをまとめる。

インストール（Mac）

$ brew install --cask visual-studio-code

起動方法

アイコンクリックでもいいがコマンドラインで起動できる。

$ code

プロジェクト（カレントディレクトリ）で起動したい場合は以下。

$ code .

ショートカット・操作

ショートカットの一覧・設定は Comannd + K -> Command + S で開く。
（筆者の場合は「右側をすべて削除」が Ctrl + K になっていなかったので登録した。）

ユーザ設定
- Command + ,
Markdown Preview
- Command + Shift + V
統合ターミナル
- Control + Shift + @
ワークスペースにプロジェクトを追加
- 「ファイル」->「ワークスペースにフォルダに追加」

コマンドパレット

Command + Shift + P を押すと VS Code の上部に コマンドパレット が開く。
VS Code で実行できる各種コマンドには名前が付いていて、その名前をこのコマンドパレットに入力することでそれらを実行できる。

拡張機能（ Extensions ）

アクティビティーバー（左上に縦に並んでるアイコン）の一番下にあるアイコンをクリックするとサイドバーが拡張機能の画面になる。（ Command + Shift + X でも）
以下のような種類の拡張機能が存在する。

［Debuggers］（デバッガー）
［Languages］（言語）
［Linters］（Lintツール）
［Snippets］（スニペット）
［Themes］（テーマ）
［Other］（その他）

検索欄を空にすると現在インストール済みの拡張機能の一覧が表示される。
なお、拡張機能の反映には VS Code を再起動するか再読み込みボタンを押す。

アップデート

VS Code

「 Code 」 -> 「更新の確認」。

拡張機能

拡張機能画面の右上の「・・・」をクリックして「更新の確認」。

オススメの拡張機能

EditorConfig

以下のコマンドを実行して VSCode の EditorConfig 拡張機能を有効にする。

$ code --install-extension EditorConfig.EditorConfig

その後 .editorconfig をプロジェクトルートへ作成する。（設定内容はお好みで）

root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8

[*.{js,json}]
indent_style = space
indent_size = 2

視覚サポート

Trailing Spaces
- 改行部分の最後に入る半角スペースの強調、削除
EvilInspector
- 文章中の全角スペースを強調, 削除

Markdown

Auto-Open Markdown Preview
- Markdown ファイルを開くときに自動でプレビューを開く
Markdown+Math
- $$ 内に数式を書いて Ctrl + Shift + . と打てば、数式対応のプレビューが表示

Git

Git Lens
- 誰が・いつ編集したかをわかりやすく表示
Git History
- ツリー表示や差分表示など
gi
- gitignore.io から gitignore を追加
gitignore
- github/gitignore.io から gitignore を追加

マークアップ

Auto Complete Tag
- タグを自動で閉じて、開始・終了タグを変更したらもう片方のタグも自動で変更

Javascript

Import Cost
- importしたファイルの容量を表示してくれる拡張機能
Path Intellisense
- ファイルパスの自動入力
Quokka.js
- エラーになる箇所を実行前に評価してくれる拡張機能

その他

Shortcuts
- VS Code 最下部にショートカットボタンを追加
Material Icon Theme
- ファイルアイコンをマテリアルデザインになる
Indent Rainbow
- インデントレベルごとに背景色が付く（超見やすいw）
Bracket Pair Colorizer
- 対応するカッコに縦横線のハイライトを表示（超見やすいw）
Base16 Themes
- 気に入った Color Theme
- Dark Monokai がよい
Trailing Spaces
- 全角や余計なスペースをハイライトしてくれる拡張機能

Visual Studio Code入門