Zenn
🈳

VS Codeにおけるファイル名に応じたエディター設定について

2023/04/10に公開
VS Code
tech

はじめに

VS Codeにおいてファイル名に応じたエディター設定を適用する方法について、正しく説明した記事を見たことがないのでここに書き残しておきます。

既存のいくつかの設定項目について

files.associationsという設定項目は、ファイルを言語に関連付けるためのものです。下の例では、*.txtなファイルをplaintextという言語と関連付けています。

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

そして[plaintext]などは、その言語に対してエディター設定を追加（上書き）するものです。下の例のようにするとplaintextという言語として認識されたファイルでは、100pxのフォントサイズで文字が表示されるようになります。

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

問題点

そもそもの「言語」が存在しない場合、files.associationsによる紐付けはうまくいかず、[language]によるエディター設定の上書きもうまくいきません。

解決策

言語を追加する拡張機能を作ればOKです。下に示すのはその例です。このJSONファイルをpackage.jsonという名前で~/.vscode/extensions/<extension-name>のようなディレクトリに置くと動作します。

{
  "name": "custom-lang-support",
  "version": "0.0.1",
  "engines": { "vscode": "^0.0.0" },
  "contributes": {
    "languages": [
      { "id": "custom-lang" },
    ]
  }
}

おわりに

ダミー言語を大量に追加する拡張機能を使うとよいでしょう。私はそうしています。

https://github.com/okayurisotto/dummy-languages

この記事は私が自身のブログに投稿した記事を書き直したものです。Zennに投稿予定の別の記事から参照される内容であるため、この記事自体もZennに投稿（クロスポスト）することとしました。

Discussion