概要

VS CodeからZedに移行した際、TailwindCSS・Biome・VimについてVS Codeとは設定の方法が異なる箇所がありました。

この記事では、それぞれの移行時にハマった点と解決方法をまとめます。

対象読者

VS CodeからZedへの移行を検討している方
ZedでTailwindCSS、Biome、Vimを活用したい方

最初にまとめ

この記事では以下3つの設定についてまとめています。

TailwindCSS: Language Server設定でtailwindcss-intellisense-cssを有効化する
Biome: require_config_file: trueで設定ファイルがあるプロジェクトのみ有効化する
Vim: "vim_mode": trueを追加するだけでビルトインVimモードが使える

環境

Zed（2026年5月時点）

TailwindCSSを使うときに通常の.cssファイル内で@applyなどの構文のエラーを消す

VS Codeの場合、settings.jsonに以下を追加することで.cssファイルをTailwindCSSとして認識させることができました。

/vscode/settings.json

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

Zedではこの設定方法は使えません。

代わりに、Language Server設定でtailwindcss-intellisense-cssを有効化し、vscode-css-language-serverを無効化することで同じ効果を得られます。

.zed/settings.json

{
  "languages": {
    "CSS": {
      "language_servers": [
        "tailwindcss-intellisense-css",
        "!vscode-css-language-server",
        "..."
      ]
    }
  }
}

BiomeがあるプロジェクトではBiomeを使い、そうでないプロジェクトではESLintを使う

VS Codeにはワークスペースごとに拡張機能をオンオフできる機能があります。

Zedには2026年5月現在、この機能がありません。

しかし、Biome拡張機能をインストールしつつ、プロジェクトにBiomeの設定ファイルが存在する場合にのみ有効化するオプションがあります。

.zed/settings.json

{
  "lsp": {
    "biome": {
      "settings": {
        "require_config_file": true
      }
    }
  }
}

これにより、biome.jsonやbiome.jsoncがないプロジェクトではBiomeが動作しないため、実質的にESLintとの使い分けが実現できます。

Vimモードをオンにする

VS Codeでは拡張機能（VSCodeVimなど）を別途インストールする必要がありましたが、ZedにはビルトインでVimモードが搭載されています。

設定のKeymapからVim Modeを有効化するか、.zed/settings.jsonに以下を追加するだけで使えます。

.zed/settings.json

{
  "vim_mode": true
}

ただし、すべてのVimの操作に対応しているわけではありません。
例えば/キーを押してもVimとしての検索ではなく、Zed独自の検索UIが開きます。

おまけ: 全体的にVS Codeとの対応が分からない

VS Codeの特定の機能がZedでどう実現するのか分からない場合、以下の公式ドキュメントが役立ちます。

VS CodeとZedの機能対応表がまとめられており、移行時の最初の参照先として有用です。

まとめ

ZedはVS Codeとは設定の思想が異なる部分があり、単純に置き換えできないケースがあります。

TailwindCSSのエラー解消はLanguage Serverの直接制御、Biomeの使い分けはrequire_config_fileオプション、VimモードはビルトインのVim対応と、それぞれZed流のアプローチを取る必要があります。

移行時に詰まった場合は、まずVS Code移行ドキュメントを確認してみてください。