okayurisotto.net

私が好きでやったことが他の人のためにもなったらお得かも!

VS Codeでファイル名に応じてエディターを設定する

  1. 📝

はじめに

正しい説明をしている記事を見たことがないのでここに書き残します。

files.associationsについて

files.associationsは、ファイルを言語に関連付けるためのものです。

下の例のようにするとファイル名が*.txtであるファイルをplaintextという言語に関連付けることができます。

// settings.json
{
  "files.associations": {
    "*.txt": "plaintext"
  },
}

[plaintext]などについて

[plaintext]などは、言語にエディター設定を追加(上書き)するものです。

下の例のようにするとplaintextという言語として認識されたファイルでは、36pxのフォントサイズで文字が表示されるようになります。

// settings.json
{
  "[plaintext]": {
    "editor.fontSize": 36,
  },
}

「言語」という概念について

VS Codeでは、ファイルを(拡張子などを元に)「言語」に関連付け、「言語」に対して設定を行います。これのおかげで、拡張子は異なるものの同じ言語であるファイルなどに対して、最小の労力で対応することができます。

ファイル名に応じてエディターを設定する方法

ファイル名に応じてエディターを設定する場合、2つのステップを踏む必要があります。1つ目はファイルを言語に紐付けること、2つ目は言語に対して設定を追加することです。

// settings.json
{
  "files.associations": {
    "*.txt": "plaintext"
  },
  "[plaintext]": {
    "editor.fontSize": 36,
  },
}

しかしこれでは需要を満たすことができない場面があります。それは、そもそも言語が存在しない場面です。

VS Codeで自作言語を扱えるようにする

VS Codeは初期状態で多くの言語を認識できます。それは、ファイルの関連付けがうまくされているからというのもありますが、そもそもの「言語」が存在するからでもあります。ですので例えば次のような設定は期待したようには動きません。

// settings.json
{
  "files.associations": {
    "*.custom": "custom-lang"
  },
  "[custom-lang]": {
    "editor.fontFamily": "serif",
  },
}

この設定を期待した通りに動かすためには、VS Codeを拡張することで言語サポートを追加する必要があります。これは難しいことではありません。拡張機能を作ればいいだけです。

# VS Codeの拡張機能が保存されているディレクトリへ移動
$ cd ~/.vscode/extensions

# 新しい拡張機能のためにディレクトリを作成し移動
$ mkdir custom-lang-support
$ cd $_

# 拡張機能のマニフェストファイルを作成
$ touch package.json

package.jsonという名前のファイルの内容は次のようにします。

{
  "name": "custom-lang-support",
  "version": "0.0.1",
  "author": "John Smith",
  "license": "MIT",
  "engines": { "vscode": "^1.22.0" },
  "categories": ["Other"],
  "contributes": {
    "languages": [
      { "id": "custom-lang" },
    ]
  }
}

このようにすることでVS Codeの扱える言語にcustom-langが追加され、設定ファイルで行った設定がうまく動くようになるはずです。

おわりに

適当にダミー言語を大量に追加する拡張機能を自作しておくと便利です。