メインコンテンツへスキップ
見出し画像

Zed エディタのおすすめ設定まとめ|コピペで使えるJSON付き

    VSCodeやAntigravityなどから乗り換えた人向けに、最初にやる設定をまとめました。
    末尾の全体JSONをコピペするだけで、VSCodeに近い見た目と操作感になります。

    Zed をまだインストールしていない方は公式サイトからどうぞ。


    設定ファイルの開き方

    Mac の場合、左上の Zed をクリックして「Setting > Open Setting」を選びます。
    開いた設定画面の右上にある「Edit in settings.json」をクリックすると設定ファイルが開きます。


    おすすめ設定 3 つ

    まずは最低限これだけ入れると快適になります。

    autosave: on_window_change

    別のファイルや別のアプリへ画面を切り替えた瞬間に自動保存する設定です。
    タイピングのたびに保存が走るストレスがなく、切り替えのタイミングでサっと保存されます。

    soft_wrap: editor_width

    文章やコードが画面の右端からはみ出たとき、自動で折り返す設定です。
    横スクロールバーを動かす手間がなくなります。

    show_whitespaces: all

    全角スペース、半角スペース、タブなどの「目に見えない空白」をうっすら表示する設定です。
    日本語入力で紛れ込みやすい全角スペースによるエラーを未然に防げます。

    設定ファイルに以下をコピペして保存してください。

    {
      "autosave": "on_window_change",
      "soft_wrap": "editor_width",
      "show_whitespaces": "all"
    }

    スニペット設定

    コードブロックの ` ``` ` や` [ `などを入力すると、自動で閉じる記号も入力される設定です。

    1. `Cmd + Shift + P` を押してコマンドパレットを開く

    2. `configure snippets` と入力して「Snippets: Configure Snippets」を選択

    3. `markdown` と入力してエンター

    4. 開いた `markdown.json` に以下をコピペして保存

    {
      "Code Block Auto Close": {
        "prefix": "```",
        "body": [
          "```",
          "$1",
          "```"
        ],
        "description": "コードブロックを自動で閉じ、中央にカーソルを移動します"
      }
    }

    全体設定 JSON(コピペで完成)

    以下の設定を入れると、上記の設定が全て反映されたVScodeやAntigravityに近い構成になります。

    こんな感じになります。

    画像
    • 左側:プロジェクトパネルと Git 管理をタブで切り替え

    • 右側:ターミナル(Claude Code や Codex をここで起動)

    • カラーテーマ:明るい Ayu Light(暗い色のテーマだとチャット欄のコードが背景に溶け込んで見にくかったので、明るいテーマがおすすめです。)

    • キーバインド:VSCode と同じショートカットキー

    設定ファイルの中身をすべて以下で上書きして保存してください。

    {
      "base_keymap": "VSCode",
      "sticky_scroll": {
        "enabled": true,
      },
      "autosave": "on_window_change",
      "agent_servers": {
        "codex-acp": {
          "type": "registry",
        },
        "claude-acp": {
          "type": "registry",
        },
      },
      "ui_font_size": 16,
      "buffer_font_size": 14,
      "line_height": "comfortable",
      "theme": {
        "mode": "light",
        "light": "Ayu Light",
        "dark": "One Dark",
      },
      "tab_size": 2,
      "soft_wrap": "editor_width",
      "buffer_font_family": "Menlo",
      "buffer_font_fallbacks": ["Hiragino Sans", "Hiragino Kaku Gothic ProN"],
      "ui_font_fallbacks": ["Hiragino Sans"],
      "git": {
        "inline_blame": {
          "enabled": true,
        },
      },
      "edit_predictions": {
        "provider": "zed",
      },
      "project_panel": {
        "dock": "left",
        "git_status": true,
      },
      "outline_panel": {
        "dock": "left",
      },
      "git_panel": {
        "dock": "left",
      },
      "terminal": {
        "dock": "right",
      },
      "chat_panel": {
        "dock": "right",
      },
      "notification_panel": {
        "dock": "right",
      },
      "tab_bar": {
        "show": true,
      },
      "show_whitespaces": "all",
      "wrap_guides": [80, 120],
      "active_line_background": "cursor",
    }

    コピペ保存したら以下をクリックすると、左右にパネルが表示されます。
    VScodeやAntigravityのような見た目になります。

    画像
    画面左下
    画像
    画面右下

    まとめ

    とりあえず全体JSONをコピペして、気になる部分を後から調整するのがおすすめです。
    フォントやテーマは好みで変えてみてください。

    最後まで読んでいただきありがとうございます。


    メルマガではAIの活用や試したことなどを発信しています。
    noteの内容に不定期で追記してます。
    登録していただいた方へ、私が使って便利だと思ったものをプレゼントしています。
    よろしければ一覧をご覧ください。

    登録プレゼントの一覧を見る



    あなたへのおすすめ