背景

Dockerfile ファイル名を Dockerfile.dev や Dockerfile-php.prod など，デフォルトの Dockerfile からリネームすることがありますよね。VSCode を使っている場合，デフォルトの Dockerfile なら言語関連付けしてくれますが，リネームした場合はプレーンテキストとしか認識してくれません。そうなると当然シンタックスハイライトや補完や言語別のフォーマッターが効かないため，激萎えします。

その対策として，リネーム後も Dockerfile として言語関連付けして，ついでにフォーマッターの設定もする方法を説明します。

環境

macOS: High Sierra(10.13.6)
Visual Studio Code: 1.38.1

なお今回は Dockerfile ファイル名の命名規則を Dockerfile〇〇 とし，インデントをスペース 4 つとして設定します。

手順

Dockerfile に言語関連付けする
Dockerfile のエディタ設定を上書きする

どちらも settings.json を編集するだけです。settings.json についてはこちらをどうぞ。

1. Dockerfile に言語関連付けする

settings.json に以下を追記します。

  "files.associations": {
    "Dockerfile*": "dockerfile"
  }

* はワイルドカードですので，先頭に Dockerfile が付いていれば Dockerfile.dev でも Dockerfile-php.prod でも何でもいけるようになります。

2. Dockerfile のエディタ設定を上書きする

同じく settings.json に以下を追記します。

  "[dockerfile]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
  }

"editor.insertSpaces" が true だとタブを押下したときスペースが挿入されます。
"editor.tabSize": 4 でタブ 1 つ分に相当するスペースの数を 4 つに設定します。

以上で保存すれば完了です。

確認

画面の右下の赤枠の部分を見てみると，設定した項目が反映されています。

参考

Visual Studio Codeの設定「虎の巻」：IDE編