セットアップ - Visual Studio Code

# はじめに

[**セットアップ シリーズ**](https://qiita.com/yokarikeri/items/a4e41a36c610bb1c798b)、Visual Studio Code（以下、VS Code）編。

## VS Code の特徴

モダンな IDE の要素をひととおり持つ。[利用人口](https://insights.stackoverflow.com/survey/2019#development-environments-and-tools)も多いので情報に事欠かない。
VS Code 誕生までの歴史的経緯は[この記事](https://itnews.org/news_contents/the-era-of-visual-studio-code)が詳しい。

- コンテナー / WSL / SSH リモートマシン上での開発
- 強力なコード補完と提案（IntelliSense）
- エディターとデバッガーの統合
- エディターと Git の統合
- シンタックスハイライト / EditorConfig / フォーマッター / リンター
- マルチカーソル
- 複数行の正規表現検索/置換
- エディター画面分割
- CLI の提供（統合ターミナル）
- タスク（外部ツールとの統合機能）
- コードスニペット
- 拡張機能ストア

## VS Code の使い方

- [「ユーザー設定」(User Settings) と「ワークスペース設定」(Workspace Settings) について](https://code.visualstudio.com/docs/getstarted/settings)
    - **重要な違いなので、最初に覚える**。
    - 設定は以下の 2 種類に分かれる。
        - **`ユーザー設定`:**
            - 全体設定。
            - 本ドキュメントでは、基本的に `settings.json` はこのユーザー設定を指す。
        - **`ワークスペース設定`:**
            - ワークスペース（主に開いているフォルダー）のみで適用される設定。
            - ユーザー設定を部分的に上書きする。
            - 実体は各ワークスペース上の `.vscode/settings.json`。存在しない場合はユーザー設定のみが適用される。
- [公式ドキュメント](https://code.visualstudio.com/docs)
    - ショートカットや基本機能を確認する。
    - マルチカーソル (`Ctrl` + `d`) など、便利なものが多いので必ず覚える。
    - cf. [VSCode の秘伝のワザを大公開！ | Developers.IO](https://dev.classmethod.jp/articles/vscode-awesome-things/)

## VS Code の拡張機能でカバーしないこと

- 「[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)」や「[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)」、「[Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)」は、VS Code の設定の `editor.linkedEditing`（旧 `editor.renameOnType`）を有効化することでほぼ同等の機能が使える。
- 「[htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)」は、VS Code に標準で統合されている [Emmet](https://code.visualstudio.com/docs/editor/emmet) で同等の機能が使える。
    - 手順はテキスト選択後にコマンドパレット (`Ctrl` + `Shift` + `p`) > `wr` などと入力 > `Emmet: Wrap with Abbreviation`。
- ファイルパスの補完も VS Code 標準で提供されているので、「[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)」も不要。

# 🚧 このドキュメントを読む前に

最初に `settings.json` と、主なビューについて説明する。

## 🔖 ユーザー設定の settings.json の開き方

設定 (`Ctrl` + `,`) のうち、GUI で変更**できない**設定は `settings.json` を直接編集する。
開き方は、以下の 2 種類があるので覚えておく。

- 設定 (`Ctrl` + `,`) > 設定（JSON）を開く（画面右上の `↪📄` のようなアイコン）
- コマンドパレット (`Ctrl` + `Shift` + `p`) > `json` と入力 > `基本設定: 設定（JSON）を開く`

編集した後は「**保存**」を忘れないこと。

## 🔖 主なビューについて

「サイドバー」、「パネル」、「ステータスバー」について説明する。
以下は、少なくともサイドバーの「**拡張機能**」の開き方だけは覚えておく。

### 🚀 サイドバー

デフォルトでは画面**左側**が表示領域。
表示/非表示を切り替えるショートカットは `Ctrl` + `b`。

#### エクスプローラー (`Ctrl` + `Shift` + `e`)

- ワークスペースのフォルダーやファイルを表示/操作する。

#### 検索 (`Ctrl` + `Shift` + `f`)

- ワークスペースのファイルを検索する。
- 置換するには **`>` ボタン**をクリック。
- 特定のフォルダーを除外したりするには **`…` ボタン**をクリック。
    - カンマ区切りで複数指定できる。
- 高度な検索の詳細は、以下参照。
    - cf. [Basic Editing in Visual Studio Code](https://code.visualstudio.com/docs/editor/codebasics#_advanced-find-and-replace-options)

#### ソース管理 (`Ctrl` + `Shift` + `g`)

- ワークスペースのフォルダーを Git の管理下に置いたり、Git に関する操作をする。

#### 実行とデバッグ (`Ctrl` + `Shift` + `d`)

- デバッグまたはファイルを実行する。

#### 拡張機能 (`Ctrl` + `Shift` + `x`)

- 拡張機能ストア (Visual Studio Marketplace) を検索し、拡張機能をインストールする。

### 🚀 パネル

デフォルトでは画面**下側**が表示領域。
表示/非表示を切り替えるショートカットは `Ctrl` + `j`。

#### 問題 (`Ctrl` + `Shift` + `m`)

ワークスペースのファイルに関する警告やエラーなどを表示する。

#### 出力 (`Ctrl` + `Shift` + `u`)

- 拡張機能や VS Code 本体のログなどを出力する。
- 右上のプルダウンメニューから出力対象を変更できる。

#### デバッグ コンソール (`Ctrl` + `Shift` + `y`)

- デバッグ中に利用できるコンソールを表示する。

#### 統合ターミナル (`Ctrl` + `Shift` + `@`)

- ターミナルを開く。

### 🚀 ステータスバー

画面下部の表示およびボタン群。
各種機能を呼び出したり、文字コードや改行コード、シンタックスハイライトなどを決定する言語モードを設定できたりする。

# 🔧 VS Code のインストール

<https://code.visualstudio.com/download> からインストーラーを入手してインストール。
つまずく点はない。

# 👑 拡張機能: [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

まずは日本語化する。

> インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で **"locale": "ja"** を設定します。
> locale.json を編集するには **Ctrl+Shift+P** を押してコマンド パレットを表示させ、**"config"** と入力し、
> 利用できるコマンドのリストをフィルター処理してから **Configure Language コマンド**を選択します。

# 🔧 ユーザー設定: 配色/アイコン テーマ設定

お好みで。

ワークスペース毎にテーマを変更する場合に備え、「配色テーマ」は**多めに**インストールしておく。

- アイコンテーマ
    - 👑 [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
        - フォルダー名に応じてアイコンが変わって便利。（タイポ対策）
- 配色テーマ
    - 👑 [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
        - 落ち着いで、好み。ユーザー設定に使う。
    - 👑 [Ayu](https://marketplace.visualstudio.com/items?itemName=teabyii.ayu)
        - 明るい配色のライトテーマ。
    - 👑 [Community Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme)
        - カラーバリエーションが豊富で、複数のワークスペースの使い分け時に便利。
- 設定
    - 設定 (`Ctrl` + `,`) > **`Color Theme`** や **`Icon Theme`** に、インストールしたテーマを設定。

ワークスペース毎には「配色テーマ」を変更するには、設定 (`Ctrl` + `,`) > `ワークスペース` タブ > **`Color Theme`**。

# 🔧 ユーザー設定: フォント設定

お好みで。

フォントをインストール後は、VS Code で**設定する前**に VS Code を**再起動**すること。
（再起動しないと警告が出てプレビューされない）

- 設定 (`Ctrl` + `,`) > `editor.fontFamily` を **`Source Han Code JP Light`** にするのが好み。
    - 細めのフォントが好きなので `Light` を指定。`ExtraLight` だと細すぎて、ライトテーマに使いづらい。
        - Source Han Code JP の fontFamily に設定できる「フォント名」は以下参照。
            - cf. [Source Han Code JP の闇 [Windows7] - Qiita](https://qiita.com/dev100kg/items/bcae2fc210326eda0ca3)
        - フォントの太さがうまく反映されない場合は VS Code を何度か再起動すること。
- 設定 (`Ctrl` + `,`) > `terminal.integrated.fontFamily` に **`HackGenNerd Console`** を設定。
    - 設定しないと `editor.fontFamily` を継承する。
        今回は Source Han Code JP を設定しているため、ターミナル環境向けのフォントを使う。

# 🔧 ユーザー設定: 統合ターミナルを変更

（Windows の場合）PowerShell に習熟していないので、**WSL** (Ubuntu) か **Git Bash** を使う。
当然ながら、設定前に WSL や Git Bash のセットアップを完了しておくこと。

- 統合ターミナル (`Ctrl` + `Shift` + `@`) > 右上の `+` の**プルダウンメニュー** > `規定のプロファイルの選択` で WSL か Git Bash を選択。

# 🔧 ユーザー設定: その他

その他、設定 (`Ctrl` + `,`) の変更点。

- **`editor.minimap.enabled`**
    （ミニマップを表示するか）
    - `false`
    - エクスプローラー サイドバーの「アウトライン」で十分だと思う派。
- **`editor.renderWhitespace`**
    （空白文字を表示するか）
    - `all`
- **`editor.renderControlCharacters`**
    （制御を文字を表示するか）
    - `true`
- **`editor.linkedEditing`**
    （閉じタグを自動で編集する）
    - `true`
- **`editor.wordSeparators`**
    （単語に関連したナビゲーションまたは操作を実行するときに、単語の区切り文字として使用される文字。）
    - `、。「」【】『』（）！？` や全角スペース、`てにをはがのともへでや` を追加。
- **`workbench.editor.wrapTabs`**
    （タブが表示領域の幅を超えるときに、タブを折り返す。）
    - `true`

# 🔧 ユーザー設定: 最終的なユーザー設定（参考）

後述する「拡張機能」のセットアップ完了時点の `settings.json` の状態は以下のとおり。

```jsonc:settings.json
{
  "hadolint.hadolintPath": "{hadolint-Windows-x86_64.exe のパス}",
  "codic.ACCESS_TOKEN": "{トークン}",
  "codic.case": "camelCase",
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "workbench.editor.wrapTabs": true,
  "terminal.integrated.fontFamily": "HackGenNerd Console",
  "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)",
  "editor.fontFamily": "Source Han Code JP Light",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true,
  "editor.linkedEditing": true,
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?、。「」【】『』（）！？　",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "git.autofetch": true,
  "gitlens.defaultDateFormat": "YYYY-MM-DD HH:mm",
  "gitlens.defaultDateShortFormat": "YY-MM-DD",
  "gitlens.defaultTimeFormat": "HH:mm",
  "markdown-preview-enhanced.enableExtendedTableSyntax": true,
  "markdown.extension.math.enabled": false,
  "markdown.extension.orderedList.autoRenumber": false,
  "markdown.extension.orderedList.marker": "one",
  "markdown.extension.list.indentationSize": "inherit",
  "markdown.extension.print.absoluteImgPath": false,
  "markdown.extension.syntax.decorations": false,
  "markdown.extension.tableFormatter.enabled": false,
  "markdownlint.config": {
    "MD033": false // 表内で <br> タグを使いたいので無効化
  },
  "japanese-proofreading.textlint.全角文字と半角文字の間": false,
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[graphql]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "partialDiff.preComparisonTextNormalizationRules": [
    {
      "name": "タブをスペースふたつに",
      "match": "\t",
      "replaceWith": "  ",
      "enableOnStart": false
    },
    {
      "name": "カンマの後のスペースをひとつに",
      "match": ", *([^,\n]+)",
      "replaceWith": ", $1",
      "enableOnStart": false
    },
    {
      "name": "大文字に",
      "match": ".*",
      "replaceWith": {
        "letterCase": "upper"
      },
      "enableOnStart": false
    }
  ]
}
```

# 👑 拡張機能: [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

Git に関する機能を追加する。

**設定:**

- `settings.json` で、以下の 3 つの設定を追記する。
    - 日付フォーマットの指定方法は [Moment.js](https://momentjs.com/docs/#/displaying/format/) 参照。

```jsonc:settings.json
{
  // ここに既存の設定（あれば）
  "gitlens.defaultDateFormat": "YYYY-MM-DD HH:mm",
  "gitlens.defaultDateShortFormat": "YY-MM-DD",
  "gitlens.defaultTimeFormat": "HH:mm"
}
```

**主な機能と使い方:**

- エディター
    - カーソルのある行の末尾に「コミット時の情報」を表示する。ホバーすることで詳細情報へ
    - コードブロックの先頭などに「最新コミットの情報」を表示
- ステータスバー
    - ステータスバーの右側に「最後のコミットの情報」を表示
- サイドバー
    - ブランチ/コミット一覧や、ファイル/行ごとの履歴、コミット同士の比較ができる
- コマンドパレット
    - コマンドパレットから Git コマンドが使える
- リベース時に専用エディターを提供

# 👑 拡張機能: [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

Git の「コミット グラフ」を表示/操作する。

**使い方:**

Git で管理されたワークスペース（管理を開始するには `Ctrl+Sift+G`）で、以下の機能が使える。

- 画面下部のステータスバー左側に「コミットグラフ」の表示ボタンが追加される
- 検索や、差分の確認、右クリックから「ブランチの削除」や「コミット ID のコピー」などができる

# 👑 拡張機能: [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

> cf. [What is Prettier? · Prettier](https://prettier.io/docs/en/index.html)

さまざまな形式に対応するコードフォーマッター。読み方は「プリティア」。  
デフォルトで JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML をサポート。

**使い方:**

- `Shift` + `Alt` + `f` でファイルをフォーマットする。

**設定:**

- `settings.json` を開き、以下を追記。
    - Prettier の対応言語のみデフォルトフォーマッターに変更し、ファイル保存時の自動フォーマットを有効化。
    - VS Code の設定ファイルなどに使われる [JSONC 形式（コメント付き JSON）](https://stackoverflow.com/a/55708553)は、VS Code の標準フォーマッターを指定。

```jsonc:settings.json
{
    // ここに既存の設定
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[typescript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[json]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[css]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[scss]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[less]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[html]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[vue]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[graphql]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[yaml]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
}
```

**補足:** Prettier の参照するファイルについて

Prettier はワークスペース上（主に開いているフォルダー）にある設定ファイルにも従う。
基本的にデフォルトのままで良いので**大抵の場合は不要**だが、覚えておくと良いかもしれない。

- **構成ファイル（`.prettierrc` など）**
    - フォーマットのルール変更を指定できる。
    - cf. [Configuration File · Prettier](https://prettier.io/docs/en/configuration.html)
    - **`printWidth`（大まかな行の折り返しの長さ）の設定の注意**
        - よく [printWidth](https://prettier.io/docs/en/options.html#print-width) が変更されるが、これは行の最大許容文字数を決める設定ではないため、変更は推奨されていない。
        - 行の折り返しを抑制するには、`printWidth` の代わりに [proseWrap](https://prettier.io/docs/en/options.html#prose-wrap) が有効かもしれない。
    - 改行コードなどは `.editorconfig` でできることは、こちらに任せた方が VS Code の設定が楽。
- **除外設定 `.prettierignore`**
    - `.gitignore` と同じ構文で、Prettier の対象外とするパスを指定できる。
    - cf. [Ignoring Code · Prettier](https://prettier.io/docs/en/ignore.html)
- ESLint などの Prettier と競合するリンターとの併用については、以下の記事が詳しい。
    - cf. [TypeScript のプロジェクトに ESLint と Prettier を導入する方法（+VS Code での設定） - Qiita](https://qiita.com/yuma-ito-bd/items/cca7490fd7e300bbf169)

**補足:** Prettier 本体の参照先について

- デフォルトでは、「npm 等でローカルインストールされた Prettier」、「拡張機能内の Prettier」の順で Prettier 本体を探す。
    - チームで使う場合は Prettier のバージョンを固定をするため、前者が推奨される。
        - cf. [Pre-commit Hook · Prettier](https://prettier.io/docs/en/precommit.html)
- 設定ファイルは `.editorconfig` > `.prettierrc` の順で読み込まれる。
    - そのため、`.editorconfig` を使う場合は、`.prettierrc` で上書きしないように気を付けること。
    - これらのファイルが存在しない場合のみ、VS Code の設定 (`prettier.*`) が適用される。

# 👑 拡張機能: [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

> cf. [EditorConfig](https://editorconfig.org/)

基本的なコーディングスタイルを維持するためのツール。

コードの整形は基本的に **Prettier** に任せるが、VS Code 側の「文字コード」や「改行コード」、「インデント設定」などの設定を `.editorconfig` に自動で合わせるためには、この拡張機能が必要となる。

**使い方:**

- 基本的にワークスペースのルートディレクトリーに `.editorconfig` を配置するだけ。

**例:**

```conf:.editorconfig
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
indent_size = 2

[{package.json,.travis.yml,*.less}]
indent_size = 2

```

# 👑 拡張機能: [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

マークダウン用のリンター。
小うるさく指摘してくるが、長いものに巻かれよう。

**設定:** 不要なルールを無効化

- `settings.json` を開き、以下を追記。

```jsonc:settings.json
{
    // ここに既存の設定
    "markdownlint.config": {
        "MD033": false, // 表内で <br> タグを使いたいので無効化
    },
}
```

**使い方:**

- 問題があれば波線が表示される。
- 問題の行で `Ctrl` + `.`: コードアクションを表示。
- `Ctrl` + `Shift` + `m`: 問題一覧を表示
- コマンドパレット (`Ctrl` + `Shift` + `p`) > `markdownlint.toggleLinting`: 一時的にリンターを無効化
- コマンドパレット (`Ctrl` + `Shift` + `p`) > `markdownlint.config` / `markdownlint.ignore` など: ルールのカスタマイズ
    - cf. [ルールのカスタマイズについて](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint#configure)
- 問題一覧、および、修正例は以下のとおり。
    - cf. [markdownlint/RULES.md at master · markdownlint/markdownlint](https://github.com/markdownlint/markdownlint/blob/master/docs/RULES.md)

# 👑 拡張機能: [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

素晴らしいマークダウン用の拡張機能。

**特徴:**

- [日本語リファレンス](https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/)がある。
- 拡張マークダウンも利用でき「脚注」や「マーカー」が使える。
- 何より、[コードブロックで「Mermaid」を使ってシーケンス図などが書ける！](https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/diagrams?id=mermaid)
    - その他、「PlantUML」を始め、さまざまなダイアグラム記法をサポートしている！
- プレビューの CSS や、マークダウン パーサーまで変更できる。

**設定:**

- コマンドパレット (`Ctrl` + `Shift` + `p`) から `Markdown Preview Enhanced: Customize Css` を開き、以下を追記。
    - 見出しに下線を追加
    - インラインコードのフォントカラー、フォントを変更
    - コードブロックのフォントカラーを継承
    - 水平線を見出しの下線と揃える

```scss
.markdown-preview.markdown-preview {
    h1,
    h2,
    h3 {
        border-bottom: 1px solid #eaecef;
    }

    code {
        color: #e91d63;
        font-family: Source Han Code JP, Monaco, Consolas, "Lucida Console", monospace;
    }

    pre > code {
        color: inherit;
    }

    hr {
        background-color: #eaecef;
        height: 1px;
    }
}
```

**使い方:**

- `Ctrl + Shift + v`: プレビュー画面に切り替え
- `Ctrl + k` ➡ `v`: 画面分割してプレビューを表示
- プレビューで右クリック > `HTML` > `HTML (offline)`: HTML として出力

その他の機能は [公式サイト](https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/) を参照。

# 👑 拡張機能: [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

マークダウン用の「ショートカット」や「リストの操作支援」などの便利な機能がある。
ただし、「Markdown Preview Enhanced」と重複する機能は無効化する。

**設定:** ショートカット設定

`Ctrl + k` ➡ `Ctrl + s` でショートカット設定を開いて、以下を変更。

- 検索フォームに `ctrl+b` と入力して検索、`markdown.extension.editing.toggleBold` の左端の「鉛筆」アイコンから `Alt` + `b` に変更
    - 「VS Code」の標準キーバインドと競合するため。
- 検索フォームに `ctrl+k v` と入力して検索、`markdown.extension.closePreviewToSide` の行を右クリック > `キーバインドの削除`
    - 「Markdown Preview Enhanced」と競合するため。
- 検索フォームに `ctrl+shift+v` と入力して検索、`markdown.extension.togglePreview` の行を右クリック > `キーバインドの削除`
    - 「Markdown Preview Enhanced」と競合するため。
- 検索フォームに `toggleCodeBlock` と入力して検索、`markdown.extension.editing.toggleCodeBlock` の行を右クリック > の左端の「鉛筆」アイコンから `Alt` + `e` 等に変更
    - コードブロックのショートカットを追加。

**設定:** 不要な機能を無効化

- `settings.json` を開き、以下を追記。

```jsonc:settings.json
{
    // ここに既存の設定

    // 「数式」は Markdown Preview Enhanced と競合するのため無効化
    "markdown.extension.math.enabled": false,
    // 番号付きリストの「自動番号振り直し」と「リスト追加時に連番を使う」は無効化
    "markdown.extension.orderedList.autoRenumber": false,
    "markdown.extension.orderedList.marker": "one",
    // インデント幅は VS Code の設定を継承する
    "markdown.extension.list.indentationSize": "inherit",
    // 画像パスを絶対パスに変換するのを無効化
    "markdown.extension.print.absoluteImgPath": false,
    // エディター上の装飾を無効化 (~~取り消し線~~ や `インライン コード` など)
    "markdown.extension.syntax.decorations": false,
    // テーブル フォーマッターを無効化
    "markdown.extension.tableFormatter.enabled": false,
}
```

**使い方:**

※ 上記ショートカット設定の場合

- `Alt + b`: 太字に
- `Alt + e`: コードブロックで囲む

その他の機能は [Marketplace 上の説明文](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#features) を参照。

# 👑 拡張機能: [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

キャメルケース/ケバブケース/スネークケース等を相互変換。

**使い方:**

- コマンドパレット (`Ctrl` + `Shift` + `p`) から `camel` や `kebab` などで呼び出せる。

# 👑 拡張機能: [codic](https://marketplace.visualstudio.com/items?itemName=pizzacat83.codic)

変数名などのネーミングを支援してくれる [codic](https://codic.jp/) を VS Code 上から使えるように。
英語が苦手でも、分かりやすい命名ができるはず。

**準備:**

- [codic](https://codic.jp/) のアカウントを作成
- <https://codic.jp/my/api_status> から取得できる「API アクセストークン」を控えておく
- 公式 Web サイト上で、使い方に慣れておく
    - `～する`: メソッド名っぽく
    - `～か`: Boolean っぽく
    - `ユーザー s を取得する` など名詞 + s で複数形に
        - この複数形変換は、API（拡張機能）からだと効かないかも？

**設定:**

- 設定 (`Ctrl` + `,`) > **`codic.ACCESS_TOKEN`** と **`codic.case`** を設定

**使い方:**

- コマンドパレット (`Ctrl` + `Shift` + `p`) から `jap` などで `codic: Translate Japanese Phrase` を呼び出す。

# 👑 拡張機能: [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)

「選択範囲」の差分を比較する。マルチカーソルでの選択も扱える。
VS Code 標準の比較は「ファイル単位」なので、細かい比較に重宝する。

**使い方 ➊:** 比較対象 A/B をそれぞれ選択して比較する

ファイル内外を問わず使える、**基本の方法**。

1. テキストを選択して**右クリック** > `Select Text for Compare`（比較するテキストを選択）
2. 別のテキストを選択して**右クリック** > `Compare Text with Previous Selection`（テキストを前の選択と比較する）

**使い方 ➋:** クリップボードと選択範囲を比較する

クリップボードと比較する方法。**私はあまり使う機会がない**。

1. テキストを「クリップボード」へ**コピー**
2. 別のテキストを**選択**して**右クリック** > `Compare Text with Clipboard`（テキストとクリップボードを比較する）

**使い方 ➌:** 2 つのタブで選択されたテキスト同士を比較する

差分比較中や、エディターを 2 分割して異なるファイルを開いている場合などに、**選択範囲同士**を比較する。
**ファイル比較し辛い場合に便利**。
なお、エディターを 3 分割以上している場合は使えない。

1. エディターを 2 分割する（`Ctrl` + `\` など）
2. 片方のエディターでテキストを**選択**する
3. もう片方のエディターでテキストを**選択**して**右クリック** > `Compare Text in Visible Editors`（可視エディターでテキストを比較する）

**設定:** 比較前にテキストを正規化（置換）することもできる

- `settings.json` を開き、以下を追記。
    - 3 つのテキスト正規化のルールが追加される。
    - なお、デフォルトで「インデント」は比較対象から無視されるので用意しなくて良い。

```jsonc:settings.json
{
    // ここに既存の設定
    "partialDiff.preComparisonTextNormalizationRules": [
        {
            "name": "タブをスペースふたつに",
            "match": "\t",
            "replaceWith": "  ",
            "enableOnStart": false,
        },
        {
            "name": "カンマの後のスペースをひとつに",
            "match": ", *([^,\n]+)",
            "replaceWith": ", $1",
            "enableOnStart": false,
        },
        {
            "name": "大文字に",
            "match": ".*",
            "replaceWith": {
                "letterCase": "upper"
            },
            "enableOnStart": false,
        },
    ],
}
```

- 上記設定の場合 `enableOnStart`（VS Code 起動時にルールを有効化するか？）が `false` のため、デフォルトではどのルールも有効化されない。
- 有効化するには、エディター内で右クリック > `Toggle Pre-Comparison Text Normalization Rules`（比較前のテキスト正規化ルールを切り替える）から設定する。

**補足:**

- ファイル同士の比較は、VS Code 標準で提供される以下の機能を使う。
    - 比較したい 2 つのファイルを開いた状態で、コマンドパレット (`Ctrl` + `Shift` + `p`) > `Compare Active File With...`

# 👑 拡張機能: [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)

CSV や TSV などのテキスト形式の表データを、列ごとに同じ色で表示する。
RBQL というクエリを投げられるが、軽量かつ意外なほどに簡単。

**使い方:** マルチカーソル編集

- コマンドパレット (`Ctrl` + `Shift` + `p`) から、以下の機能を呼び出せる。
    - `ColumnEditBefore`: カーソルのある列の、全セルの「文頭」にマルチカーソルを配置
    - `ColumnEditAfter`: カーソルのある列の、全セルの「文末」にマルチカーソルを配置
    - `ColumnEditSelect`: カーソルのある列の、全セルを「選択した状態」でマルチカーソルに
    - `Alt` + クリック: 選択を解除

上記の機能は 10,000 行以上のファイルでは使えない。
代わりに、SQL に似たクエリ言語「**[RBQL](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv#commands)**」を使うこと。

**使い方:** RBQL

- コマンドパレット (`Ctrl` + `Shift` + `p`) から、`RBQL` を選択
- RBQL（ほとんど SQL と同じ、SELECT 文と UPDATE 文のみ）を入力して `RUN` ボタンで実行。結果が新しいタブに表示される
    - **例:** `SELECT a1, a2 * 10 WHERE a1 == "Buy" && a4.indexOf('oil') != -1 ORDER BY parseInt(a2), a4 LIMIT 100`
        - 等価演算子が `=` ではなく `==` な点に注意
        - JavaScript または Python の式が使える（RBQL 画面下部の `Query settings` で選択する）
    - **例:** `UPDATE SET a3 = 'bar' WHERE like(a1, '%foo%')`
        - 「LIKE 句」ではなく、「like 関数」を使う
    - **詳細:**
        - cf. [vscode_rainbow_csv/README.md at master · mechatroner/vscode_rainbow_csv](https://github.com/mechatroner/vscode_rainbow_csv/blob/master/rbql_core/README.md)

# 👑 拡張機能: [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

コード内の行をブックマークする。

**使い方:**

- `Ctrl` + `Alt` + `k`: ブックマーク追加/解除
- `Ctrl` + `Alt` + `j`: 前のブックマークへ移動
- `Ctrl` + `Alt` + `l`: 次のブックマークへ移動
- サイドバーからブックマーク一覧を確認できる

# 👑 拡張機能: [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

括弧を色分けする。

多少画面がうるさくなるが、確かにスコープやグルーピングが分かりやすくなる。

# 👑 拡張機能: [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

高機能な英語用スペルチェッカー。
インストールされていないと不安になるほど便利。

**設定:**

有効化/無効化する手順は、以下のとおり。

1. ファイルを開く。
1. ステータスバー左下の `✔ {fileType}|✔ {fileName}` のようなボタンをクリック。`Spell Checker Preferences` が開かれる。
1. `FILE` タブの、`File enabled`（このファイルで有効化）や `Programming Language`（このファイルタイプで有効化）を有効にする。

**使い方:**

- `Ctrl` + `Shift` + `m`: 問題一覧を表示する。
    - 問題のレベルは「情報」。問題タブ右上のフィルターから、表示するレベルを調整もできる。
- 問題の単語にカーソルを合わせて `💡` or `Ctrl` + `.` > `Quick Fix` コマンドを選択することで、**修正候補の表示**や**ユーザー辞書への追加**が可能。
    - 追加された単語は `settings.json` の `cSpell.words`（ワークスペース設定の場合）や `cSpell.userWords`（ユーザー設定の場合）に保存される。
- 高度な使い方は、公式ドキュメント参照。
    - cf. [In Document Settings - vscode-spell-checker_README.md at master · streetsidesoftware_vscode-spell-checker](https://github.com/streetsidesoftware/vscode-spell-checker/blob/master/packages/client/README.md#in-document-settings)

**補足:** セキュリティについて

- スペルチェックはローカル上で実行され、オンライン上に情報は送信しないとのこと。
    - cf. [vscode-spell-checker/FAQ.md at master · streetsidesoftware/vscode-spell-checker](https://github.com/streetsidesoftware/vscode-spell-checker/blob/master/packages/client/FAQ.md)

# 👑 拡張機能: [テキスト校正くん](https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading)

ドキュメント作成の強い味方、日本語の校正ツール。
（テキストファイル、Markdown、[Re:VIEW](https://github.com/kmuto/review) に対応）

リアルタイムで校正が入るのは良いが、自動修正はしてくれないのが玉に瑕。
とはいえ、個人で使う分には十分な機能を持つ。

守るべきドキュメント・ガイドラインがあったり、強いこだわりがあるなら、代わりに [vscode-textlint](https://marketplace.visualstudio.com/items?itemName=taichi.vscode-textlint) などをカスタマイズして使おう。

**設定:**

- インストール後は、（要求はされないが、）VS Code の**再起動**が必要かもしれない。
- 設定 (`Ctrl` + `,`) > `japanese-proofreading.textlint.全角文字と半角文字の間` のチェックを外す。
    - Prettier と競合するので修正する。
        - Prettier によって基本的に「全角」と「半角」の文字間に「半角スペース」が挿入されることになるので、Microsoft のドキュメント・ガイドラインの「スペース」の扱いに沿うようなテキストとなる。
            - cf. [Microsoft ランゲージ ポータル](https://www.microsoft.com/ja-jp/language) >『Japanese Style Guide』>「3.1.14 Symbols & spaces」
                - この PDF リンクは HTTPS でないため、デフォルト設定の Chrome ではダウンロードできない。Edge や IE などを使おう。
        - なお、この Prettier 側の仕様は、過去に是非について議論になったようだが、現在の仕様で落ち着いた模様。
            - cf. [Prettier で Markdown をフォーマットしたときの英語と日本語の間に入るスペースをどうにかする - Qiita](https://qiita.com/kumapo0313/items/92d1597da5f3752f6584)

**使い方:**

- `Ctrl` + `Shift` + `m`: 問題パネルを表示する。
    - 残念ながら、修正は手動で。
- **無効化**するには、VS Code の拡張機能タブ (`Ctrl` + `Shift` + `x`) > テキスト校正くん > `無効にする` ボタン横の `▼` ボタンから `無効にする (ワークスペース)` を選択する。

**補足:** よくある指摘

- `japanese-proofreading.textlint.助詞の連続`（同じ助詞を連続して使用していないかチェック）で怒られる場合
    - 以下の例を覚えておくと良いかも。

```txt
（例）助詞 "に" が重複判定される/されない場合

　❌ NG: ワークスペース毎に変更する場合に備え
　🔵 OK: ワークスペース毎にテーマを変更する場合に備え
```

- `japanese-proofreading.textlint.技術用語`（ウェブ技術に関する固有名詞の表記をチェック）で怒られる場合
    - ❌: `VSCode` -> 🔵: `VS Code`
        - Qiita のタグ等では `VSCode` の表記だが、確かに [Visual Studio Code 公式サイト](https://code.visualstudio.com/)では `VS Code` が使われているので納得。
    - ❌: `コンテナ` -> 🔵: `コンテナー`
        - `コンテナー` の表記は Qiita 等では、あまり見かけない気がする。
        - テクニカルコミュニケーター協会の『[外来語（カタカナ）表記ガイドライン](https://www.jtca.org/standardization/)』の「語尾が -er, -or, -ar で終わる語彙には長音を付与する」というルールに準じている模様。（現時点では、ひとつ前の第 2 版準拠らしい）
        - このルールは [Microsoft ランゲージ ポータル](https://www.microsoft.com/ja-jp/language) とも合致するので、長いものには巻かれていると安心したい。
            - cf. [Microsoft プラットフォームとツールでコンテナー化された Docker アプリケーションのライフサイクル | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/architecture/containerized-lifecycle/)

**補足:** セキュリティについて

- ざっと[ソース](https://github.com/ics-creative/project-japanese-proofreading)を見る限り、textlint のラッパーというだけで、安全そうに見える。多分。
- とはいえ、**そもそも** VS Code のようなサードパーティ製スクリプトの実行できて、それらが自動更新されるような環境で「守秘義務のある文章」や「個人情報」などの秘密情報を扱うのは怖いと感じるべきだけど、とはいえ代替手段を見つけるのも難しい。
- 結局、「人気のソフトウェア」を（リーナスの法則のように）十分な目に見守られているとして信用するくらいしかできない。
    - cf. [visual studio code - Security and Privacy of VSCode extensions - Stack Overflow](https://stackoverflow.com/questions/47404582/security-and-privacy-of-vscode-extensions)
- Deno のような最初からセキュリティを掲げるエコシステムが台頭するのは、何年も先になりそうだし。
    - cf. [Deno の登場で Node.js の時代は終わるのか？ - Qiita](https://qiita.com/so99ynoodles/items/c3ba2a528052827e3b3c#%E5%BE%8C%E6%82%94%E3%81%9D%E3%81%AE%EF%BC%92-%E5%AE%89%E5%85%A8%E6%80%A7security)

# 👑 拡張機能: [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)

VS Code のサイドバーから、Docker イメージやコンテナー、ボリュームなどの状態を確認/操作できる。
Docker を使うなら必ず役に立つ。

# 👑 拡張機能: [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

> cf. [Visual Studio Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)

`Remote - Containers`、`Remote - WSL`、`Remote - SSH` の 3 つの拡張機能が含まれる。

**コンテナー**上や **WSL のディストリビューション**上、または **SSH リモートマシン**上と接続 & 開発環境を構成できる！！
これにより、ローカルマシンの影響から完全に分離された開発環境が簡単に構築できてしまう！

今回は Docker を使いたいので `Remote - Containers` しか使わないが、一応他の拡張機能も入れておく。
当然ながら、事前に Docker をセットアップしておくこと。

**設定:** Docker Desktop

- 不要
    - 今回は Docker Desktop のバックグラウンドに **WSL 2** の方を使うので、旧来の Docker Desktop で必要であった「`Resources` > `File Sharing`」の設定は**不要**。

**使い方:**

- ステータスバー左下の `><` ボタンから、起動する。

# 👑 拡張機能: [hadolint](https://marketplace.visualstudio.com/items?itemName=exiasr.hadolint)

Dockerfile 用のリンター。
GitHub 上にある類似のソフトウェアの中では[一番スターが多い](https://github.com/topics/dockerfile?o=desc&q=linter&s=stars)。

**設定:**

- macOS の場合は Homebrew で `brew install hadolint` だけ OK。
- Windows の場合、[Releases · hadolint/hadolint](https://github.com/hadolint/hadolint/releases) から `hadolint-Windows-x86_64.exe` をダウンロードして、以下を設定する。
    - 設定 (`Ctrl` + `,`) > **`hadolint.hadolintPath`** に、上記のファイルパスを入力。
        - この「設定 (UI)」の画面上では、`\`（バックスラッシュ）をエスケープする必要はない。必要になるのは「設定 (JSON)」(settings.json) を開いている場合のみ。

**使い方:**

- `.dockerfile` を保存時に問題がある場合は指摘してくれる。
- 自動修正の機能はないので、指摘内容の詳細は[公式ドキュメント](https://github.com/hadolint/hadolint#rules)で確認。

# 👑 拡張機能: [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) による補完候補の一部を「アルファベット順」ではなく「文脈から想定される使われやすい順番」に並び替える。
TypeScript、JavaScript、Python、Java、SQL をサポート。

**使い方:**

- 通常の IntelliSense (`Ctrl` + `Space`) と変わらない。
- 並び替えられた候補には `★` が付く。

**セキュリティについて:**

- GitHub 上の評価の高いオープンソースプロジェクトのコードを元に機械学習させて最適な提案をさせる仕組みで、「ユーザー定義のコードが Microsoft に送信されることはない」らしい
    - cf. [Visual Studio IntelliCode | Microsoft Docs](https://docs.microsoft.com/ja-jp/visualstudio/intellicode/overview)

# 👑 拡張機能: フォーマッター/シンタックスハイライト系

とりあえず入れておこう。

- 👑 [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
- 👑 [SQL Formatter](https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter)
- 👑 [shell-format](https://marketplace.visualstudio.com/items?itemName=foxundermoon.shell-format)
- 👑 [YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)
- 👑 [AsciiDoc](https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode)
- 👑 [Textile](https://marketplace.visualstudio.com/items?itemName=idleberg.textile)
- 👑 [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
- 👑 [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

# 👑 拡張機能: Web フロントエンド開発系

- 👑 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
    - ローカル上で動作する Web サーバー
    - ファイル更新時に自動ロードしてくれる
- 👑 [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
    - HTML 属性の CSS クラス名を補完。
    - [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) とは異なり、補完（[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)）は `Ctrl` + `Space` キーでの呼び出しが不要。

# 🔧 コードスニペット

> cf. [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)

デフォルトで様々な「組み込みスニペット」が用意されているので、あまり拡張機能の必要を感じない。
例えば JavaScript なら、`log` と入力して IntelliSense (`Ctrl` + `Space`) を呼び出すだけで、`console.log();` が挿入される。

新しいスニペットを用意したり、組み込みスニペットを上書きする手順は、以下のとおり。
この例では、組み込みスニペットの `doc` のスニペットを、`lang="en"` から `lang="ja"` に変更するなどしている。

1. コマンドパレット (`Ctrl` + `Shift` + `p`) > `sni` などと入力 > `基本構成: ユーザースニペットの構成` > `html` と入力して `html.json` を編集
1. 以下のように修正。

```json:html.json
{
  "Print to HTML5 Boilerplate": {
    "prefix": "doc",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"ja\">",
      "\t<head>",
      "\t\t<meta charset=\"UTF-8\"/>",
      "\t\t<meta name=\"viewport\" content=\"width=device-width\">",
      "\t\t<title></title>",
      "\t\t<link rel=\"stylesheet\" href=\"/assets/css/styles.css\">",
      "\t\t<link rel=\"stylesheet\" href=\"/assets/css/print.css\" media=\"print\">",
      "\t</head>",
      "\t<body>",
      "\t\t<script src=\"/assets/js/polyfill.js\" nomodule></script>",
      "\t\t<script src=\"/assets/js/script.js\" type=\"module\"></script>",
      "\t</body>",
      "</html>"
    ],
    "description": "HTML5 Boilerplate"
  }
}
```

# 🔧 ショートカットの調整

`Ctrl + k` ➡ `Ctrl + s` でショートカット設定を開いて、以下を変更。

- 検索フォームに `editor.action.copyLinesDownAction` と入力して検索、`行を下へコピー` の左端の「鉛筆」アイコンから `Alt` + `i` に変更

# 🔧 設定の同期

お好みで [Settings Sync (設定の同期)](https://code.visualstudio.com/docs/editor/settings-sync) を有効化する。