Code Monkey home page Code Monkey logo

zed-101-setup's Introduction

Welcome to zed-101-setup πŸ‘‹

All Contributors

Your ultimate guide to setting up Zed Editor with Vim mode, tailored settings, and key bindings for a seamless coding experience

IT Man -  Zed Editor 101 - Ultimate Zed Editor Setup Guide

Introduction

The Zed Editor 101 setup guide is designed to help you configure Zed Editor to enhance your development workflow. Whether you’re a Vim enthusiast or looking to boost your productivity with custom settings and key bindings, this guide provides all the necessary steps and resources. Follow along to get your Zed Editor configured with Nerd Font, Vim mode, local AI assistance, and more.

Nerd Font

Install Nerd Font using the following command:

curl -fsSL https://raw.githubusercontent.com/getnf/getnf/main/install.sh | bash
getnf

Vim mode

For detailed Vim mode setup instructions, refer to the Zed Vim Mode Documentation.

Vim mode

Settings

Update your settings.json file with the following configuration:

// settings.json, generated at Thu Aug 08 2024 13:17:30 GMT+0800 (Singapore Standard Time)
// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
  "base_keymap": "VSCode",
  "theme": "Dracula",
  "ui_font_size": 16,
  "buffer_font_size": 18,
  "buffer_font_family": "GeistMono Nerd Font",
  // Vim mode settings
  "vim_mode": true,
  // use relative line numbers
  "relative_line_numbers": true,
  "tab_bar": {
    "show": true,
  },
  "scrollbar": {
    "show": "never",
  },
  // Indentation, rainbow indentation
  "indent_guides": {
    "enabled": true,
    "coloring": "indent_aware",
  },
  // NOTE: Zen mode, refer https://github.com/zed-industries/zed/issues/4382 when it's resolved
  "centered_layout": {
    "left_padding": 0.2,
    "right_padding": 0.2,
  },
  // Use Copilot Chat AI as default
  "assistant": {
    "default_model": {
      "provider": "copilot_chat",
      "model": "gpt-4",
    },
    "version": "2",
  },
  // Uncomment below to use local AI with Ollama, refer https://zed.dev/docs/language-model-integration?highlight=ollama#using-ollama-on-macos
  // "assistant": {
  //   "default_model": {
  //     "provider": "ollama",
  //     "model": "llama3.1:latest"
  //   },
  //   "version": "2",
  //   "provider": null
  // },
  "language_models": {
    "ollama": {
      "api_url": "http://localhost:11434",
    },
  },
  // Inlay hints preconfigured by Zed: Go, Rust, Typescript and Svelte
  "inlay_hints": {
    "enabled": true,
  },
  // LSP
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "classAttributes": ["class", "className", "ngClass", "styles"],
      },
    },
  },
  "languages": {
    // Refer https://zed.dev/docs/languages/javascript and https://zed.dev/docs/languages/typescript for more info
    "TypeScript": {
      // Refer https://github.com/jellydn/ts-inlay-hints for how to setup for Neovim and VSCode
      "inlay_hints": {
        "enabled": true,
        "show_parameter_hints": false,
        "show_other_hints": true,
        "show_type_hints": true,
      },
    },
    "Python": {
      "format_on_save": { "language_server": { "name": "ruff" } },
      "formatter": { "language_server": { "name": "ruff" } },
      "language_servers": ["pyright", "ruff"],
    },
  },
  // Use zed commit editor
  "terminal": {
    "env": {
      "EDITOR": "zed --wait",
    },
  },
  // File syntax highlighting
  "file_types": {
    "Dockerfile": ["Dockerfile", "Dockerfile.*"],
    "JSON": ["json", "jsonc", "*.code-snippets"],
  },
  // Turn off telemetry
  "telemetry": {
    "diagnostics": false,
    "metrics": false,
  },
  // Move all panel to the right
  "project_panel": {
    "button": true,
    "dock": "right",
    "git_status": true,
  },
  "outline_panel": {
    "dock": "right",
  },
  "collaboration_panel": {
    "dock": "left",
  },
  // Move some unnecessary panels to the left
  "notification_panel": {
    "dock": "left",
  },
  "chat_panel": {
    "dock": "left",
  },
}

Demo

Demo 2

Keymaps

Update your keymap.json file with the following key bindings:

// keymap.json, generated at Thu Aug 08 2024 13:17:30 GMT+0800 (Singapore Standard Time)
[
  {
    "context": "Editor && (vim_mode == normal || vim_mode == visual) && !VimWaiting && !menu",
    "bindings": {
      // put key-bindings here if you want them to work in normal & visual mode
      // Git
      "space g h d": "editor::ToggleHunkDiff",
      "space g h r": "editor::RevertSelectedHunks",

      // Toggle inlay hints
      "space t i": "editor::ToggleInlayHints",

      // Toggle soft wrap
      "space u w": "editor::ToggleSoftWrap",

      // NOTE: Toggle Zen mode, not fully working yet
      "space c z": "workspace::ToggleCenteredLayout",

      // Open markdown preview
      "space m p": "markdown::OpenPreview",
      "space m P": "markdown::OpenPreviewToTheSide",

      // Open recent project
      "space f p": "projects::OpenRecent",
      // Search word under cursor
      "space s w": "pane::DeploySearch",

      // Chat with AI
      "space a c": "assistant::ToggleFocus",
      // Go to file with `gf`
      "g f": "editor::OpenExcerpts",
    },
  },
  {
    "context": "Editor && vim_mode == normal && !VimWaiting && !menu",
    "bindings": {
      // put key-bindings here if you want them to work only in normal mode
      // Window movement bindings
      // Ctrl jklk to move between panes
      "ctrl-h": ["workspace::ActivatePaneInDirection", "Left"],
      "ctrl-l": ["workspace::ActivatePaneInDirection", "Right"],
      "ctrl-k": ["workspace::ActivatePaneInDirection", "Up"],
      "ctrl-j": ["workspace::ActivatePaneInDirection", "Down"],

      // +LSP
      "space c a": "editor::ToggleCodeActions",
      "space .": "editor::ToggleCodeActions",
      "space c r": "editor::Rename",
      "g d": "editor::GoToDefinition",
      "g D": "editor::GoToDefinitionSplit",
      "g i": "editor::GoToImplementation",
      "g I": "editor::GoToImplementationSplit",
      "g t": "editor::GoToTypeDefinition",
      "g T": "editor::GoToTypeDefinitionSplit",
      "g r": "editor::FindAllReferences",
      "] d": "editor::GoToDiagnostic",
      "[ d": "editor::GoToPrevDiagnostic",
      // TODO: Go to next/prev error
      "] e": "editor::GoToDiagnostic",
      "[ e": "editor::GoToPrevDiagnostic",
      // Symbol search
      "s s": "outline::Toggle",
      "s S": "project_symbols::Toggle",
      // Diagnostic
      "space x x": "diagnostics::Deploy",

      // +Git
      // Git prev/next hunk
      "] h": "editor::GoToHunk",
      "[ h": "editor::GoToPrevHunk",

      // TODO: git diff is not ready yet, refer https://github.com/zed-industries/zed/issues/8665#issuecomment-2194000497

      // + Buffers
      // Switch between buffers
      "shift-h": "pane::ActivatePrevItem",
      "shift-l": "pane::ActivateNextItem",
      // Close active panel
      "shift-q": "pane::CloseActiveItem",
      "ctrl-q": "pane::CloseActiveItem",
      "space b d": "pane::CloseActiveItem",
      // Close other items
      "space b o": "pane::CloseInactiveItems",
      // Save file
      "ctrl-s": "workspace::Save",
      // File finder
      "space space": "file_finder::Toggle",
      // TODO: Open other files
      // Show project panel with current file
      "space e": "pane::RevealInProjectPanel",
    },
  },
  // Empty pane, set of keybindings that are available when there is no active editor
  {
    "context": "EmptyPane || SharedScreen",
    "bindings": {
      // Open file finder
      "space space": "file_finder::Toggle",
      // Open recent project
      "space f p": "projects::OpenRecent",
    },
  },
  // Comment code
  {
    "context": "Editor && vim_mode == visual && !VimWaiting && !menu",
    "bindings": {
      // visual, visual line & visual block modes
      "g c": "editor::ToggleComments",
    },
  },
  // Better escape
  {
    "context": "Editor && vim_mode == insert && !menu",
    "bindings": {
      "j j": "vim::NormalBefore", // remap jj in insert mode to escape
      "j k": "vim::NormalBefore", // remap jk in insert mode to escape
    },
  },
  // Rename
  {
    "context": "Editor && vim_operator == c",
    "bindings": {
      "c": "vim::CurrentLine",
      "r": "editor::Rename", // zed specific
    },
  },
  // Code Action
  {
    "context": "Editor && vim_operator == c",
    "bindings": {
      "c": "vim::CurrentLine",
      "a": "editor::ToggleCodeActions", // zed specific
    },
  },
  // Toggle terminal
  {
    "context": "Workspace",
    "bindings": {
      "ctrl-\\": "terminal_panel::ToggleFocus",
    },
  },
  {
    "context": "Terminal",
    "bindings": {},
  },
  // File panel (netrw)
  {
    "context": "ProjectPanel && not_editing",
    "bindings": {
      "a": "project_panel::NewFile",
      "A": "project_panel::NewDirectory",
      "r": "project_panel::Rename",
      "d": "project_panel::Delete",
      "x": "project_panel::Cut",
      "c": "project_panel::Copy",
      "p": "project_panel::Paste",
      // Close project panel as project file panel on the right
      "q": "workspace::ToggleRightDock",
      "space e": "workspace::ToggleRightDock",
    },
  },
  // Panel nagivation
  {
    "context": "Dock",
    "bindings": {
      "ctrl-w h": ["workspace::ActivatePaneInDirection", "Left"],
      "ctrl-w l": ["workspace::ActivatePaneInDirection", "Right"],
      "ctrl-w k": ["workspace::ActivatePaneInDirection", "Up"],
      "ctrl-w j": ["workspace::ActivatePaneInDirection", "Down"],
    },
  },
  {
    "context": "Workspace",
    "bindings": {
      // Map VSCode like keybindings
      "cmd-b": "workspace::ToggleRightDock",
    },
  },
  // Subword motion is not working really nice with `ciw`, disable for now
  // {
  //   "context": "VimControl && !menu",
  //   "bindings": {
  //     "w": "vim::NextSubwordStart",
  //     "b": "vim::PreviousSubwordStart",
  //     "e": "vim::NextSubwordEnd",
  //     "g e": "vim::PreviousSubwordEnd"
  //   }
  // }
]

Setup local AI with Ollama

Refer to the Ollama Setup Guide for detailed instructions.

Recommend extensions

Resources

How to generate the settings

cp ~/.config/zed/settings.json settings.json
cp ~/.config/zed/keymap.json keymap.json
bun run cli.ts

Author

πŸ‘€ Huynh Duc Dung

Show your support

If this guide has been helpful, please give it a ⭐️.

kofi paypal buymeacoffee

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dung Duc Huynh (Kaka)
Dung Duc Huynh (Kaka)

πŸ’» πŸ“–
d1y
d1y

πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!

zed-101-setup's People

Contributors

allcontributors[bot] avatar d1y avatar jellydn avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

zed-101-setup's Issues

Select arround tag

Describe the bug

after use the cfgs i faced an error: select arround tag/select inside tag and others options are not working.

Reproduction

paste the cfgs

System Info

System:
    OS: Linux 6.10 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 4500 6-Core Processor
    Memory: 6.59 GB / 15.42 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh

Used Package Manager

bun

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • chore(deps): lock file maintenance

Detected dependencies

bun
package.json
  • @biomejs/biome 1.8.3
  • typescript ^5.0.0
example/package.json
  • @antfu/eslint-config 2.27.1
  • eslint 9.9.1
  • typescript ^5.0.0
github-actions
.github/workflows/pre-commit.yml
  • actions/checkout v4
  • actions/setup-python v5
  • stefanzweifel/git-auto-commit-action v5
nvm
.nvmrc

  • Check this box to trigger a request for Renovate to run again on this repository

vim mode blank page not work

Describe the bug

space sapce not response

image

Reproduction

open zed editor, close all files

System Info

macos  Zed 0.143.6

Used Package Manager

npm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.