LoginSignup
12
23

More than 3 years have passed since last update.

@yokarikeri

セットアップ - Visual Studio Code

Last updated at Posted at 2021-05-09

はじめに

セットアップ シリーズ、Visual Studio Code（以下、VS Code）編。

VS Code の特徴

モダンな IDE の要素をひととおり持つ。利用人口も多いので情報に事欠かない。
VS Code 誕生までの歴史的経緯はこの記事が詳しい。

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

VS Code の使い方

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

  • 「Auto Rename Tag」や「Auto Close Tag」、「Highlight Matching Tag」は、VS Code の設定の editor.linkedEditing（旧 editor.renameOnType）を有効化することでほぼ同等の機能が使える。
  • 「htmltagwrap」は、VS Code に標準で統合されている Emmet で同等の機能が使える。
    • 手順はテキスト選択後にコマンドパレット (Ctrl + Shift + p) > wr などと入力 > Emmet: Wrap with Abbreviation。
  • ファイルパスの補完も VS Code 標準で提供されているので、「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)

  • ワークスペースのファイルを検索する。
  • 置換するには > ボタンをクリック。
  • 特定のフォルダーを除外したりするには … ボタンをクリック。
    • カンマ区切りで複数指定できる。
  • 高度な検索の詳細は、以下参照。

ソース管理 (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

まずは日本語化する。

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

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

お好みで。

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

  • アイコンテーマ
    • 👑 vscode-icons
      • フォルダー名に応じてアイコンが変わって便利。（タイポ対策）
  • 配色テーマ
    • 👑 One Dark Pro
      • 落ち着いで、好み。ユーザー設定に使う。
    • 👑 Ayu
      • 明るい配色のライトテーマ。
    • 👑 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 に設定できる「フォント名」は以下参照。
      • フォントの太さがうまく反映されない場合は 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 の状態は以下のとおり。

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

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

設定:

  • settings.json で、以下の 3 つの設定を追記する。
    • 日付フォーマットの指定方法は Moment.js 参照。
settings.json
{
  // ここに既存の設定（あれば）
  "gitlens.defaultDateFormat": "YYYY-MM-DD HH:mm",
  "gitlens.defaultDateShortFormat": "YY-MM-DD",
  "gitlens.defaultTimeFormat": "HH:mm"
}

主な機能と使い方:

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

👑 拡張機能: Git Graph

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

使い方:

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

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

👑 拡張機能: Prettier - Code formatter

cf. What is Prettier? · Prettier

さまざまな形式に対応するコードフォーマッター。読み方は「プリティア」。

デフォルトで JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML をサポート。

使い方:

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

設定:

  • settings.json を開き、以下を追記。
    • Prettier の対応言語のみデフォルトフォーマッターに変更し、ファイル保存時の自動フォーマットを有効化。
    • VS Code の設定ファイルなどに使われる JSONC 形式（コメント付き JSON）は、VS Code の標準フォーマッターを指定。
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
    • printWidth（大まかな行の折り返しの長さ）の設定の注意
      • よく printWidth が変更されるが、これは行の最大許容文字数を決める設定ではないため、変更は推奨されていない。
      • 行の折り返しを抑制するには、printWidth の代わりに proseWrap が有効かもしれない。
    • 改行コードなどは .editorconfig でできることは、こちらに任せた方が VS Code の設定が楽。
  • 除外設定 .prettierignore
  • ESLint などの Prettier と競合するリンターとの併用については、以下の記事が詳しい。

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

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

👑 拡張機能: EditorConfig for VS Code

cf. EditorConfig

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

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

使い方:

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

例:

.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

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

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

  • settings.json を開き、以下を追記。
settings.json
{
    // ここに既存の設定
    "markdownlint.config": {
        "MD033": false, // 表内で <br> タグを使いたいので無効化
    },
}

使い方:

  • 問題があれば波線が表示される。
  • 問題の行で Ctrl + .: コードアクションを表示。
  • Ctrl + Shift + m: 問題一覧を表示
  • コマンドパレット (Ctrl + Shift + p) > markdownlint.toggleLinting: 一時的にリンターを無効化
  • コマンドパレット (Ctrl + Shift + p) > markdownlint.config / markdownlint.ignore など: ルールのカスタマイズ
  • 問題一覧、および、修正例は以下のとおり。

👑 拡張機能: Markdown Preview Enhanced

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

特徴:

設定:

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

その他の機能は 公式サイト を参照。

👑 拡張機能: 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 を開き、以下を追記。
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 上の説明文 を参照。

👑 拡張機能: change-case

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

使い方:

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

👑 拡張機能: codic

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

準備:

  • codic のアカウントを作成
  • 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

「選択範囲」の差分を比較する。マルチカーソルでの選択も扱える。
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 つのテキスト正規化のルールが追加される。
    • なお、デフォルトで「インデント」は比較対象から無視されるので用意しなくて良い。
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

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

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

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

上記の機能は 10,000 行以上のファイルでは使えない。
代わりに、SQL に似たクエリ言語「RBQL」を使うこと。

使い方: 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 関数」を使う
    • 詳細:

👑 拡張機能: Bookmarks

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

使い方:

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

👑 拡張機能: Bracket Pair Colorizer 2

括弧を色分けする。

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

👑 拡張機能: Code Spell Checker

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

設定:

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

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

使い方:

  • Ctrl + Shift + m: 問題一覧を表示する。
    • 問題のレベルは「情報」。問題タブ右上のフィルターから、表示するレベルを調整もできる。
  • 問題の単語にカーソルを合わせて 💡 or Ctrl + . > Quick Fix コマンドを選択することで、修正候補の表示やユーザー辞書への追加が可能。
    • 追加された単語は settings.json の cSpell.words（ワークスペース設定の場合）や cSpell.userWords（ユーザー設定の場合）に保存される。
  • 高度な使い方は、公式ドキュメント参照。

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

👑 拡張機能: テキスト校正くん

ドキュメント作成の強い味方、日本語の校正ツール。
（テキストファイル、Markdown、Re:VIEW に対応）

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

守るべきドキュメント・ガイドラインがあったり、強いこだわりがあるなら、代わりに vscode-textlint などをカスタマイズして使おう。

設定:

  • インストール後は、（要求はされないが、）VS Code の再起動が必要かもしれない。
  • 設定 (Ctrl + ,) > japanese-proofreading.textlint.全角文字と半角文字の間 のチェックを外す。
    • Prettier と競合するので修正する。

使い方:

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

補足: よくある指摘

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

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

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

  • ざっとソースを見る限り、textlint のラッパーというだけで、安全そうに見える。多分。
  • とはいえ、そもそも VS Code のようなサードパーティ製スクリプトの実行できて、それらが自動更新されるような環境で「守秘義務のある文章」や「個人情報」などの秘密情報を扱うのは怖いと感じるべきだけど、とはいえ代替手段を見つけるのも難しい。
  • 結局、「人気のソフトウェア」を（リーナスの法則のように）十分な目に見守られているとして信用するくらいしかできない。
  • Deno のような最初からセキュリティを掲げるエコシステムが台頭するのは、何年も先になりそうだし。

👑 拡張機能: Docker

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

👑 拡張機能: Remote Development

cf. Visual Studio Code Remote Development

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

Dockerfile 用のリンター。
GitHub 上にある類似のソフトウェアの中では一番スターが多い。

設定:

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

使い方:

  • .dockerfile を保存時に問題がある場合は指摘してくれる。
  • 自動修正の機能はないので、指摘内容の詳細は公式ドキュメントで確認。

👑 拡張機能: Visual Studio IntelliCode

IntelliSense による補完候補の一部を「アルファベット順」ではなく「文脈から想定される使われやすい順番」に並び替える。
TypeScript、JavaScript、Python、Java、SQL をサポート。

使い方:

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

セキュリティについて:

  • GitHub 上の評価の高いオープンソースプロジェクトのコードを元に機械学習させて最適な提案をさせる仕組みで、「ユーザー定義のコードが Microsoft に送信されることはない」らしい

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

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

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

🔧 コードスニペット

cf. Snippets in Visual Studio Code

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

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

  1. コマンドパレット (Ctrl + Shift + p) > sni などと入力 > 基本構成: ユーザースニペットの構成 > html と入力して html.json を編集
  2. 以下のように修正。
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 (設定の同期) を有効化する。

12
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
23