# Visual Studio Code 設定と拡張機能

このページでは、 VS Code の拡張機能について、おすすめの拡張機能と設定を紹介しています。

# 摘要

Windows のみ: WSL と通常起動の違いを知る。
Windows のみ: WSL に接続済みの状態で起動する。
拡張機能をインストールする。
設定を記述する。

WIN

# Windows のみ必要な作業

Windows の場合、 WSL に最適化するための拡張機能を入れてください。この拡張機能をインストールすると、 WSL に接続するモードと通常起動のモードを切り替えることができるようになります。また、各モードで、拡張機能は別々に管理されます。

Developing in WSL (opens new window) より引用

# Remote - WSL

Remote - WSL は、 Visual Studio Code に WSL モードで起動する機能を追加します。

検索ワード「 wsl 」

拡張機能紹介ページ (opens new window)

拡張機能とインストールするとモードを切り替えられます。起動中のウィンドウがどちらのモードで起動しているかは、左下のアイコンから確認することができます。

拡張機能は、通常モードと WSL モードの両方にインストールしておくほうが良いです。以降の拡張機能のインストール方法も含め、実際の操作方法は、動画をご確認ください。

# 拡張機能一覧

インストールを推奨する拡張機能を紹介します。Visual Studio Code の拡張機能の検索画面から、検索ワードで検索してインストールすると操作しやすいと思います。

# Japanese Language Pack for Visual Studio Code

検索ワード「 japanese 」
Visual Studio Code の UI を日本語化します。

拡張機能紹介ページ (opens new window)

Visual Studio Code のウィンドウの左にある「Extensions」ボタンをクリックして、「Extensions Marketplace」を表示します。
「Extensions Marketplace」の検索欄に「japanese」を入力し、「 Japanese Language Pack for Visual Studio Code」を表示して、「Install」ボタンをクリックします。
「 Japanese Language Pack for Visual Studio Code 」のインストールが完了したら、「Restart Now」ボタンをクリックして、 Visual Studio Code を再起動します。

メニュー等の文字が日本語化されます。

# Material Icon Theme

拡張機能紹介ページ (opens new window)

検索ワード「 material 」
アイコンの種類を増やします。

# ESLint

拡張機能紹介ページ (opens new window)

検索ワード「 eslint 」
コード整形ルール機能です。

# EvilInspector

拡張機能紹介ページ (opens new window)

検索ワード「 evili 」
全角スペースを可視化します。

# Docker

検索ワード「 docker 」
Docker に最適化します。

拡張機能紹介ページ (opens new window)

# EditorConfig

検索ワード「 editorc 」
.editorconfig を読み込むことができるようにします。

拡張機能紹介ページ (opens new window)

# Git Graph

検索ワード「 git gr 」
Git の履歴を可視化します。

拡張機能紹介ページ (opens new window)

# Laravel Blade Snippets

検索ワード「 blade 」
Laravel で使用する Blade フォーマットの文字色をつけます。

拡張機能紹介ページ (opens new window)

# PHP Intelephense

検索ワード「 php i 」
PHP に最適化します。

拡張機能紹介ページ (opens new window)

# Prettier - Code formatter

検索ワード「 prettier 」
コード整形ツールです。

拡張機能紹介ページ (opens new window)

# Drawio Integration

検索ワード「 draw 」
図形描画ツールです。

拡張機能紹介ページ (opens new window)

# Visual Studio Code の設定

Visual Studio Code の設定は、3 種類（Mac は 2 種類）あります。

ユーザー設定
WSL 設定
ワークスペース設定

設定は、継承されます。優先度は、「ワークスペース設定」＞「WSL 設定」＞「ユーザー設定」です。そのため、標準設定にしたい場合は、ユーザー設定に記述し、WSL 専用の設定は WSL 設定に記述し、ワークスペース固有の設定はワークスペース設定（ワークスペース内に ~/.vscode/setting.json ファイルを作成します。）に記述します。

# 設定の開き方

ファイル → ユーザー設定 → 設定 と進みます。

設定画面が表示されます。

WIN

WSL モードのウィンドウから設定を開くと ユーザー タブと リモート[WSL: Ubuntu] タブが表示され、別々の設定が可能です。

設定は JSON 形式で保存されています。 JSON ファイルを直接変更することもできます。

画面右上のファイルアイコンをクリックすると JSON 形式の設定ファイルが表示されます。

変更したいプロパティを追記します。

# おすすめの設定構成

おすすめの設定を紹介します。こだわりがない場合は、以下の設定をコピーして、ご自身の設定ファイルを変更してください。記述先は、 ユーザー設定です。

{
  "workbench.startupEditor": "none",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.tree.indent": 16,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.view.alwaysShowHeaderActions": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "editor.lineHeight": 18,
  "editor.letterSpacing": -0.3,
  "editor.renderWhitespace": "all",
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.fontFamily": "Menlo, Monaco, Consolas, 'Yu Gothic UI', 'Courier New', monospace",
  "files.eol": "\n",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[dockerfile]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker"
  },
  "[dockercompose]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

設定を記述したら、保存して閉じます。

例

WIN

リモート[WSL: Ubuntu]設定は特にありません。

← WSL (Windows) Windows Terminal (Windows) →