From b7f941a40a5139b556f8412780e6fcd70ea5b19f Mon Sep 17 00:00:00 2001 From: Katie Geer Date: Tue, 16 Dec 2025 11:40:34 -0800 Subject: [PATCH] Completed outliens for RustRover Pycharm Webstorm --- docs/src/SUMMARY.md | 3 + docs/src/migrate/pycharm.md | 388 +++++++++++++++++++++++++++- docs/src/migrate/rustrover.md | 466 +++++++++++++++++++++++++++++++++- docs/src/migrate/webstorm.md | 406 +++++++++++++++++++++++++++++ 4 files changed, 1261 insertions(+), 2 deletions(-) diff --git a/docs/src/SUMMARY.md b/docs/src/SUMMARY.md index d6dd7a0aef9737fb095e87705e813f87fd0ed683..d874b463ae847858d77d2ec4eec4191b725e9cb9 100644 --- a/docs/src/SUMMARY.md +++ b/docs/src/SUMMARY.md @@ -91,6 +91,9 @@ - [VS Code](./migrate/vs-code.md) - [IntelliJ IDEA](./migrate/intellij.md) +- [PyCharm](./migrate/pycharm.md) +- [WebStorm](./migrate/webstorm.md) +- [RustRover](./migrate/rustrover.md) # Language Support diff --git a/docs/src/migrate/pycharm.md b/docs/src/migrate/pycharm.md index c7d371bf4a8974723fc3f9f325df52966212eea5..f08dd52644b7ba3e0bda08500b718ea898e29f07 100644 --- a/docs/src/migrate/pycharm.md +++ b/docs/src/migrate/pycharm.md @@ -4,48 +4,434 @@ This guide covers how to set up Zed if you're coming from PyCharm, including key ## Install Zed +Zed is available on macOS, Windows, and Linux. + +For macOS, you can download it from zed.dev/download, or install via Homebrew: + +```sh +brew install --cask zed +``` + +For Windows, download the installer from zed.dev/download, or install via winget: + +```sh +winget install Zed.Zed +``` + +For most Linux users, the easiest way to install Zed is through our installation script: + +```sh +curl -f https://zed.dev/install.sh | sh +``` + +After installation, you can launch Zed from your Applications folder (macOS), Start menu (Windows), or directly from the terminal using: +`zed .` +This opens the current directory in Zed. + ## Set Up the JetBrains Keymap +If you're coming from PyCharm, the fastest way to feel at home is to use the JetBrains keymap. During onboarding, you can select it as your base keymap. If you missed that step, you can change it anytime: + +1. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows) +2. Search for `base_keymap` +3. Select `JetBrains` + +Or add this directly to your `settings.json`: + +```json +{ + "base_keymap": "JetBrains" +} +``` + +This maps familiar shortcuts like `Shift Shift` for Search Everywhere, `Cmd+O` for Go to Class, and `Cmd+Shift+A` for Find Action. + ## Set Up Editor Preferences +You can configure settings manually in the Settings Editor. + +To edit your settings: + +1. `Cmd+,` to open the Settings Editor. +2. Run `zed: open settings` in the Command Palette. + +Settings PyCharm users typically configure first: + +| Zed Setting | What it does | +| ----------------------- | ------------------------------------------------------------------------------- | +| `format_on_save` | Auto-format when saving. Set to `"on"` to enable. | +| `soft_wrap` | Wrap long lines. Options: `"none"`, `"editor_width"`, `"preferred_line_length"` | +| `preferred_line_length` | Column width for wrapping and rulers. Default is 80, PEP 8 recommends 79. | +| `inlay_hints` | Show parameter names and type hints inline, like PyCharm's hints. | +| `relative_line_numbers` | Useful if you're coming from IdeaVim. | + +Zed also supports per-project settings. Create a `.zed/settings.json` file in your project root to override global settings for that project, similar to how you might use `.idea` folders in PyCharm. + +> **Tip:** If you're joining an existing project, check `format_on_save` before making your first commit. Otherwise you might accidentally reformat an entire file when you only meant to change one line. + ## Open or Create a Project +After setup, press `Cmd+Shift+O` (with JetBrains keymap) to open a folder. This becomes your workspace in Zed. Unlike PyCharm, there's no project configuration wizard, no interpreter selection dialog, and no project structure setup required. + +To start a new project, create a directory using your terminal or file manager, then open it in Zed. The editor will treat that folder as the root of your project. + +You can also launch Zed from the terminal inside any folder with: +`zed .` + +Once inside a project: + +- Use `Cmd+Shift+O` or `Cmd+E` to jump between files quickly (like PyCharm's "Recent Files") +- Use `Cmd+Shift+A` or `Shift Shift` to open the Command Palette (like PyCharm's "Search Everywhere") +- Use `Cmd+O` to search for symbols (like PyCharm's "Go to Symbol") + +Open buffers appear as tabs across the top. The sidebar shows your file tree and Git status. Toggle it with `Cmd+1` (just like PyCharm's Project tool window). + ## Differences in Keybindings +If you chose the JetBrains keymap during onboarding, most of your shortcuts should already feel familiar. Here's a quick reference for how Zed compares to PyCharm. + ### Common Shared Keybindings (Zed with JetBrains keymap ↔ PyCharm) +| Action | Shortcut | +| ----------------------------- | ----------------------- | +| Search Everywhere | `Shift Shift` | +| Find Action / Command Palette | `Cmd + Shift + A` | +| Go to File | `Cmd + Shift + O` | +| Go to Symbol | `Cmd + O` | +| Recent Files | `Cmd + E` | +| Go to Definition | `Cmd + B` | +| Find Usages | `Alt + F7` | +| Rename Symbol | `Shift + F6` | +| Reformat Code | `Cmd + Alt + L` | +| Toggle Project Panel | `Cmd + 1` | +| Toggle Terminal | `Alt + F12` | +| Duplicate Line | `Cmd + D` | +| Delete Line | `Cmd + Backspace` | +| Move Line Up/Down | `Shift + Alt + Up/Down` | +| Expand/Shrink Selection | `Alt + Up/Down` | +| Comment Line | `Cmd + /` | +| Go Back / Forward | `Cmd + [` / `Cmd + ]` | +| Toggle Breakpoint | `Ctrl + F8` | + ### Different Keybindings (PyCharm → Zed) +| Action | PyCharm | Zed (JetBrains keymap) | +| ---------------------- | ----------- | ------------------------ | +| File Structure | `Cmd + F12` | `Cmd + F12` (outline) | +| Navigate to Next Error | `F2` | `F2` | +| Run | `Ctrl + R` | `Ctrl + Alt + R` (tasks) | +| Debug | `Ctrl + D` | `Alt + Shift + F9` | +| Stop | `Cmd + F2` | `Ctrl + F2` | + ### Unique to Zed +| Action | Shortcut | Notes | +| ----------------- | -------------------------- | ------------------------------ | +| Toggle Right Dock | `Cmd + R` | Assistant panel, notifications | +| Split Panes | `Cmd + K`, then arrow keys | Create splits in any direction | + ### How to Customize Keybindings +- Open the Command Palette (`Cmd+Shift+A` or `Shift Shift`) +- Run `Zed: Open Keymap Editor` + +This opens a list of all available bindings. You can override individual shortcuts or remove conflicts. + +Zed also supports key sequences (multi-key shortcuts). + ## Differences in User Interfaces ### No Indexing +If you've used PyCharm on large projects, you know the wait: "Indexing..." can take anywhere from 30 seconds to several minutes depending on project size and dependencies. PyCharm builds a comprehensive index of your entire codebase to power its code intelligence, and it re-indexes when dependencies change or when you install new packages. + +Zed doesn't index. You open a folder and start working immediately. File search and navigation work instantly regardless of project size. + +The trade-off is real: PyCharm's index powers features like finding all usages across your entire codebase, understanding class hierarchies, and detecting unused imports project-wide. Zed delegates this work to language servers, which may not analyze as deeply or as broadly. + +**How to adapt:** + +- For project-wide symbol search, use `Cmd+O` / Go to Symbol (relies on your language server) +- For finding files by name, use `Cmd+Shift+O` / Go to File +- For text search across files, use `Cmd+Shift+F`—this is fast even on large codebases +- For deep static analysis, consider running tools like `mypy`, `pylint`, or `ruff check` from the terminal + ### LSP vs. Native Language Intelligence +PyCharm has its own language analysis engine built specifically for Python. This engine understands your code deeply: it resolves types without annotations, tracks data flow, knows about Django models and Flask routes, and offers specialized refactorings. + +Zed uses the Language Server Protocol (LSP) for code intelligence. For Python, Zed provides several language servers out of the box: + +- **basedpyright** (default) — Fast type checking and completions +- **Ruff** (default) — Linting and formatting +- **Pyright** — Microsoft's type checker +- **PyLSP** — Plugin-based server with tool integrations + +The LSP experience for Python is strong. basedpyright provides accurate completions, type checking, and navigation. Ruff handles formatting and linting with excellent performance. + +Where you might notice differences: + +- Framework-specific intelligence (Django ORM, Flask routes) isn't built-in +- Some complex refactorings (extract method with proper scope analysis) may be less sophisticated +- Auto-import suggestions depend on what the language server knows about your environment + +**How to adapt:** + +- Use + `Alt+Enter` for available code actions—the list will vary by language server +- Ensure your virtual environment is selected so the language server can resolve your dependencies +- Use Ruff for + fast, consistent formatting (it's enabled by default) + +### Virtual Environments and Interpreters + +In PyCharm, you select a Python interpreter through a GUI, and PyCharm manages the connection between your project and that interpreter. It shows available packages, lets you install new ones, and keeps track of which environment each project uses. + +Zed handles virtual environments through its toolchain system: + +- Zed automatically discovers virtual environments in common locations (`.venv`, `venv`, `.env`, `env`) +- When a virtual environment is detected, the terminal auto-activates it +- Language servers are automatically configured to use the discovered environment +- You can manually select a toolchain if auto-detection picks the wrong one + +**How to adapt:** + +- Create your virtual environment with `python -m venv .venv` or `uv sync` +- Open the folder in Zed—it will detect the environment automatically +- If you need to switch environments, use the toolchain selector +- For conda environments, ensure they're activated in your shell before launching Zed + +> **Tip:** If basedpyright shows import errors for packages you've installed, check that Zed has selected the correct virtual environment. Use the toolchain selector to verify or change the active environment. + ### No Project Model +PyCharm manages projects through `.idea` folders containing XML configuration files, interpreter assignments, and run configurations. This model lets PyCharm remember your interpreter choice, manage dependencies through the UI, and persist complex run/debug setups. + +Zed has no project model. A project is a folder. There's no wizard, no interpreter selection screen, no project structure configuration. + +This means: + +- Run configurations don't exist. You define tasks or use the terminal. +- Interpreter management is external. Zed discovers environments but doesn't create them. +- Dependencies are managed through pip, uv, poetry, or conda—not through the editor. + +**How to adapt:** + +- Create a `.zed/settings.json` in your project root for project-specific settings +- Define common commands in `tasks.json` (open via Command Palette: `zed: open tasks`): + +```json +[ + { + "label": "run", + "command": "python main.py" + }, + { + "label": "test", + "command": "pytest" + }, + { + "label": "test current file", + "command": "pytest $ZED_FILE" + } +] +``` + +- Use `Ctrl+Alt+R` to run tasks quickly +- Lean on your terminal (`Alt+F12`) for anything tasks don't cover + ### No Framework Integration -### Virtual Environments and Interpreters +PyCharm Professional's value for web development comes largely from its framework integration. Django templates are understood and navigable. Flask routes are indexed. SQLAlchemy models get special treatment. Template variables autocomplete. + +Zed has none of this. The language server sees Python code as Python code—it doesn't understand that `@app.route` defines an endpoint or that a Django model class creates database tables. + +**How to adapt:** + +- Use grep and file search liberally. `Cmd+Shift+F` with a regex can find route definitions, model classes, or template usages. +- Rely on your language server's "find references" (`Alt+F7`) for navigation—it works, just without framework context +- Consider using framework-specific CLI tools (`python manage.py`, `flask routes`) from Zed's terminal + +> **Tip:** For database work, pick up a dedicated tool like DataGrip, DBeaver, or TablePlus. Many developers who switch to Zed keep DataGrip around specifically for SQL. ### Tool Windows vs. Docks +PyCharm organizes auxiliary views into numbered tool windows (Project = 1, Python Console = 4, Terminal = Alt+F12, etc.). Zed uses a similar concept called "docks": + +| PyCharm Tool Window | Zed Equivalent | Shortcut (JetBrains keymap) | +| -------------------- | -------------- | --------------------------- | +| Project (1) | Project Panel | `Cmd + 1` | +| Git (9 or Cmd+0) | Git Panel | `Cmd + 0` | +| Terminal (Alt+F12) | Terminal Panel | `Alt + F12` | +| Structure (7) | Outline Panel | `Cmd + 7` | +| Problems (6) | Diagnostics | `Cmd + 6` | +| Debug (5) | Debug Panel | `Cmd + 5` | + +Zed has three dock positions: left, bottom, and right. Panels can be moved between docks by dragging or through settings. + ### Debugging +Both PyCharm and Zed offer integrated debugging, but the experience differs: + +- Zed uses `debugpy` (the same debug adapter that VS Code uses) +- Set breakpoints with `Ctrl+F8` +- Start debugging with `Alt+Shift+F9` or press `F4` and select a debug target +- Step through code with `F7` (step into), `F8` (step over), `Shift+F8` (step out) +- Continue execution with `F9` + +Zed can automatically detect debuggable entry points. Press `F4` to see available options, including: + +- Python scripts +- Modules +- pytest tests + +For more control, create a `.zed/debug.json` file: + +```json +[ + { + "label": "Debug Current File", + "adapter": "Debugpy", + "program": "$ZED_FILE", + "request": "launch" + }, + { + "label": "Debug Flask App", + "adapter": "Debugpy", + "request": "launch", + "module": "flask", + "args": ["run", "--debug"], + "env": { + "FLASK_APP": "app.py" + } + } +] +``` + +### Running Tests + +PyCharm has a dedicated test runner with a visual interface showing pass/fail status for each test. Zed provides test running through: + +- **Gutter icons** — Click the play button next to test functions or classes +- **Tasks** — Define pytest or unittest commands in `tasks.json` +- **Terminal** — Run `pytest` directly + +The test output appears in the terminal panel. For pytest, use `--tb=short` for concise tracebacks or `-v` for verbose output. + ### Extensions vs. Plugins +PyCharm has a plugin ecosystem covering everything from additional language support to database tools to deployment integrations. + +Zed's extension ecosystem is smaller and more focused: + +- Language support and syntax highlighting +- Themes +- Slash commands for AI +- Context servers + +Several features that require plugins in PyCharm are built into Zed: + +- Real-time collaboration with voice chat +- AI coding assistance +- Built-in terminal +- Task runner +- LSP-based code intelligence +- Ruff formatting and linting + +### What's Not in Zed + +To set expectations clearly, here's what PyCharm offers that Zed doesn't have: + +- **Scientific Mode / Jupyter integration** — For notebooks, use JupyterLab or VS Code +- **Database tools** — Use DataGrip, DBeaver, or TablePlus +- **Django/Flask template navigation** — Use file search and grep +- **Visual package manager** — Use pip, uv, or poetry from the terminal +- **Remote interpreters** — Zed has remote development, but it works differently +- **Profiler integration** — Use cProfile, py-spy, or similar tools externally + ## Collaboration in Zed vs. PyCharm +PyCharm offers Code With Me as a separate plugin for collaboration. Zed has collaboration built into the core experience. + +- Open the Collab Panel in the left dock +- Create a channel and [invite your collaborators](https://zed.dev/docs/collaboration#inviting-a-collaborator) to join +- [Share your screen or your codebase](https://zed.dev/docs/collaboration#share-a-project) directly + +Once connected, you'll see each other's cursors, selections, and edits in real time. Voice chat is included. There's no need for separate tools or third-party logins. + ## Using AI in Zed +If you're used to AI assistants in PyCharm (like GitHub Copilot or JetBrains AI Assistant), Zed offers similar capabilities with more flexibility. + ### Configuring GitHub Copilot +1. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows) +2. Navigate to **AI → Edit Predictions** +3. Click **Configure** next to "Configure Providers" +4. Under **GitHub Copilot**, click **Sign in to GitHub** + +Once signed in, just start typing. Zed will offer suggestions inline for you to accept. + ### Additional AI Options +To use other AI models in Zed, you have several options: + +- Use Zed's hosted models, with higher rate limits. Requires [authentication](https://zed.dev/docs/accounts.html) and subscription to [Zed Pro](https://zed.dev/docs/ai/subscription.html). +- Bring your own [API keys](https://zed.dev/docs/ai/llm-providers.html), no authentication needed +- Use [external agents like Claude Code](https://zed.dev/docs/ai/external-agents.html) + ## Advanced Config and Productivity Tweaks +Zed exposes advanced settings for power users who want to fine-tune their environment. + +Here are a few useful tweaks: + +**Format on Save:** + +```json +"format_on_save": "on" +``` + +**Enable direnv support (useful for Python projects using direnv):** + +```json +"load_direnv": "shell_hook" +``` + +**Customize virtual environment detection:** + +```json +{ + "terminal": { + "detect_venv": { + "on": { + "directories": [".venv", "venv", ".env", "env"], + "activate_script": "default" + } + } + } +} +``` + +**Configure basedpyright type checking strictness:** + +If you find basedpyright too strict or too lenient, configure it in your project's `pyrightconfig.json`: + +```json +{ + "typeCheckingMode": "basic" +} +``` + +Options are `"off"`, `"basic"`, `"standard"` (default), `"strict"`, or `"all"`. + ## Next Steps + +Now that you're set up, here are some resources to help you get the most out of Zed: + +- [Configuring Zed](../configuring-zed.md) — Customize settings, themes, and editor behavior +- [Key Bindings](../key-bindings.md) — Learn how to customize and extend your keymap +- [Tasks](../tasks.md) — Set up build and run commands for your projects +- [AI Features](../ai/overview.md) — Explore Zed's AI capabilities beyond code completion +- [Collaboration](../collaboration/overview.md) — Share your projects and code together in real time +- [Python in Zed](../languages/python.md) — Python-specific setup and configuration diff --git a/docs/src/migrate/rustrover.md b/docs/src/migrate/rustrover.md index 87a03097bd95e1b4e9cf84db44e1b12303ba801b..24d0ef64d4e032b3540810b5292645dec717f809 100644 --- a/docs/src/migrate/rustrover.md +++ b/docs/src/migrate/rustrover.md @@ -1,49 +1,513 @@ # How to Migrate from RustRover to Zed -This guide covers how to set up Zed if you're coming from RustRover, including keybindings, settings, and the differences you should expect. +This guide covers how to set up Zed if you're coming from RustRover, including keybindings, settings, and the differences you should expect as a Rust developer. ## Install Zed +Zed is available on macOS, Windows, and Linux. + +For macOS, you can download it from zed.dev/download, or install via Homebrew: + +```sh +brew install --cask zed +``` + +For Windows, download the installer from zed.dev/download, or install via winget: + +```sh +winget install Zed.Zed +``` + +For most Linux users, the easiest way to install Zed is through our installation script: + +```sh +curl -f https://zed.dev/install.sh | sh +``` + +After installation, you can launch Zed from your Applications folder (macOS), Start menu (Windows), or directly from the terminal using: +`zed .` +This opens the current directory in Zed. + ## Set Up the JetBrains Keymap +If you're coming from RustRover, the fastest way to feel at home is to use the JetBrains keymap. During onboarding, you can select it as your base keymap. If you missed that step, you can change it anytime: + +1. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows) +2. Search for `base_keymap` +3. Select `JetBrains` + +Or add this directly to your `settings.json`: + +```json +{ + "base_keymap": "JetBrains" +} +``` + +This maps familiar shortcuts like `Shift Shift` for Search Everywhere, `Cmd+O` for Go to Class, and `Cmd+Shift+A` for Find Action. + ## Set Up Editor Preferences +You can configure settings manually in the Settings Editor. + +To edit your settings: + +1. `Cmd+,` to open the Settings Editor. +2. Run `zed: open settings` in the Command Palette. + +Settings RustRover users typically configure first: + +| Zed Setting | What it does | +| ----------------------- | ------------------------------------------------------------------------------- | +| `format_on_save` | Auto-format when saving. Set to `"on"` to enable (uses rustfmt by default). | +| `soft_wrap` | Wrap long lines. Options: `"none"`, `"editor_width"`, `"preferred_line_length"` | +| `preferred_line_length` | Column width for wrapping and rulers. Rust convention is 100. | +| `inlay_hints` | Show type hints, parameter names, and chaining hints inline. | +| `relative_line_numbers` | Useful if you're coming from IdeaVim. | + +Zed also supports per-project settings. Create a `.zed/settings.json` file in your project root to override global settings for that project, similar to how you might use `.idea` folders in RustRover. + +> **Tip:** If you're joining an existing project, check `format_on_save` before making your first commit. Otherwise you might accidentally reformat an entire file when you only meant to change one line. + ## Open or Create a Project +After setup, press `Cmd+Shift+O` (with JetBrains keymap) to open a folder. This becomes your workspace in Zed. Unlike RustRover, there's no project configuration wizard, no toolchain selection dialog, and no Cargo project setup screen. + +To start a new project, use Cargo from the terminal: + +```sh +cargo new my_project +cd my_project +zed . +``` + +Or for a library: + +```sh +cargo new --lib my_library +``` + +You can also launch Zed from the terminal inside any existing Cargo project with: +`zed .` + +Once inside a project: + +- Use `Cmd+Shift+O` or `Cmd+E` to jump between files quickly (like RustRover's "Recent Files") +- Use `Cmd+Shift+A` or `Shift Shift` to open the Command Palette (like RustRover's "Search Everywhere") +- Use `Cmd+O` to search for symbols (like RustRover's "Go to Symbol") + +Open buffers appear as tabs across the top. The sidebar shows your file tree and Git status. Toggle it with `Cmd+1` (just like RustRover's Project tool window). + ## Differences in Keybindings +If you chose the JetBrains keymap during onboarding, most of your shortcuts should already feel familiar. Here's a quick reference for how Zed compares to RustRover. + ### Common Shared Keybindings (Zed with JetBrains keymap ↔ RustRover) +| Action | Shortcut | +| ----------------------------- | ----------------------- | +| Search Everywhere | `Shift Shift` | +| Find Action / Command Palette | `Cmd + Shift + A` | +| Go to File | `Cmd + Shift + O` | +| Go to Symbol | `Cmd + O` | +| Recent Files | `Cmd + E` | +| Go to Definition | `Cmd + B` | +| Find Usages | `Alt + F7` | +| Rename Symbol | `Shift + F6` | +| Reformat Code | `Cmd + Alt + L` | +| Toggle Project Panel | `Cmd + 1` | +| Toggle Terminal | `Alt + F12` | +| Duplicate Line | `Cmd + D` | +| Delete Line | `Cmd + Backspace` | +| Move Line Up/Down | `Shift + Alt + Up/Down` | +| Expand/Shrink Selection | `Alt + Up/Down` | +| Comment Line | `Cmd + /` | +| Go Back / Forward | `Cmd + [` / `Cmd + ]` | +| Toggle Breakpoint | `Ctrl + F8` | + ### Different Keybindings (RustRover → Zed) +| Action | RustRover | Zed (JetBrains keymap) | +| ---------------------- | ----------- | ------------------------ | +| File Structure | `Cmd + F12` | `Cmd + F12` (outline) | +| Navigate to Next Error | `F2` | `F2` | +| Run | `Ctrl + R` | `Ctrl + Alt + R` (tasks) | +| Debug | `Ctrl + D` | `Alt + Shift + F9` | +| Stop | `Cmd + F2` | `Ctrl + F2` | +| Expand Macro | `Alt+Enter` | `Cmd + Shift + M` | + ### Unique to Zed +| Action | Shortcut | Notes | +| ----------------- | -------------------------- | ------------------------------ | +| Toggle Right Dock | `Cmd + R` | Assistant panel, notifications | +| Split Panes | `Cmd + K`, then arrow keys | Create splits in any direction | + ### How to Customize Keybindings +- Open the Command Palette (`Cmd+Shift+A` or `Shift Shift`) +- Run `Zed: Open Keymap Editor` + +This opens a list of all available bindings. You can override individual shortcuts or remove conflicts. + +Zed also supports key sequences (multi-key shortcuts). + ## Differences in User Interfaces ### No Indexing +RustRover indexes your project when you first open it to build a model of your codebase. This process runs whenever you open a project or when dependencies change via Cargo. + +Zed doesn't index. You open a folder and start working immediately. Because both editors use rust-analyzer under the hood for Rust intelligence, the "indexing" you experience in Zed is rust-analyzer's own analysis, which happens in the background without blocking the UI. + +**How to adapt:** + +- For project-wide symbol search, use `Cmd+O` / Go to Symbol (powered by rust-analyzer) +- For finding files by name, use `Cmd+Shift+O` / Go to File +- For text search across files, use `Cmd+Shift+F`—this is fast even on large codebases +- For deep static analysis, run `cargo clippy` from the terminal + ### rust-analyzer: Shared Foundation, Different Integration +Here's what makes the RustRover-to-Zed transition unique: **both editors use rust-analyzer** for Rust language intelligence. This means the core code analysis—completions, go-to-definition, find references, type inference—is fundamentally the same. + +RustRover integrates rust-analyzer into its JetBrains platform, adding a GUI layer, additional refactorings, and its own indexing on top. Zed uses rust-analyzer more directly through the Language Server Protocol (LSP). + +What this means for you: + +- **Completions** — Same quality, powered by rust-analyzer +- **Type inference** — Identical, it's the same engine +- **Go to definition / Find usages** — Works the same way +- **Macro expansion** — Available in both (use `Cmd+Shift+M` in Zed) +- **Inlay hints** — Both support type hints, parameter hints, and chaining hints + +Where you might notice differences: + +- Some refactorings available in RustRover may not have rust-analyzer equivalents +- RustRover's GUI for configuring rust-analyzer is replaced by JSON configuration in Zed +- RustRover-specific inspections (beyond Clippy) won't exist in Zed + +**How to adapt:** + +- Use `Alt+Enter` for available code actions—rust-analyzer provides many +- Configure rust-analyzer settings in `.zed/settings.json` for project-specific needs +- Run `cargo clippy` for linting (it integrates with rust-analyzer diagnostics) + ### No Project Model +RustRover manages projects through `.idea` folders containing XML configuration files, toolchain assignments, and run configurations. The Cargo tool window provides a visual interface for your project structure, targets, and dependencies. + +Zed has no project model. A project is a folder containing a `Cargo.toml`. There's no wizard, no toolchain selection screen, no visual Cargo management. + +This means: + +- Run configurations don't exist. You define tasks or use the terminal. +- Toolchain management is external. Use `rustup` from the terminal. +- Dependencies are managed through `Cargo.toml` directly—no GUI. + +**How to adapt:** + +- Create a `.zed/settings.json` in your project root for project-specific settings +- Define common commands in `tasks.json` (open via Command Palette: `zed: open tasks`): + +```json +[ + { + "label": "cargo run", + "command": "cargo run" + }, + { + "label": "cargo build", + "command": "cargo build" + }, + { + "label": "cargo test", + "command": "cargo test" + }, + { + "label": "cargo clippy", + "command": "cargo clippy" + }, + { + "label": "cargo run --release", + "command": "cargo run --release" + } +] +``` + +- Use `Ctrl+Alt+R` to run tasks quickly +- Lean on your terminal (`Alt+F12`) for anything tasks don't cover + ### No Cargo Integration UI +RustRover's Cargo tool window provides visual access to your project's targets, dependencies, and common Cargo commands. You can run builds, tests, and benchmarks with a click. + +Zed doesn't have a Cargo GUI. You work with Cargo through: + +- **Terminal** — Run any Cargo command directly +- **Tasks** — Define shortcuts for common commands +- **Gutter icons** — Run tests and binaries with clickable icons + +**How to adapt:** + +- Get comfortable with Cargo CLI commands: `cargo build`, `cargo run`, `cargo test`, `cargo clippy`, `cargo doc` +- Use tasks for commands you run frequently +- For dependency management, edit `Cargo.toml` directly (rust-analyzer provides completions for crate names and versions) + ### Tool Windows vs. Docks +RustRover organizes auxiliary views into numbered tool windows (Project = 1, Cargo = Alt+1, Terminal = Alt+F12, etc.). Zed uses a similar concept called "docks": + +| RustRover Tool Window | Zed Equivalent | Shortcut (JetBrains keymap) | +| --------------------- | -------------- | --------------------------- | +| Project (1) | Project Panel | `Cmd + 1` | +| Git (9 or Cmd+0) | Git Panel | `Cmd + 0` | +| Terminal (Alt+F12) | Terminal Panel | `Alt + F12` | +| Structure (7) | Outline Panel | `Cmd + 7` | +| Problems (6) | Diagnostics | `Cmd + 6` | +| Debug (5) | Debug Panel | `Cmd + 5` | + +Zed has three dock positions: left, bottom, and right. Panels can be moved between docks by dragging or through settings. + +Note that there's no dedicated Cargo tool window in Zed. Use the terminal or define tasks for your common Cargo commands. + ### Debugging +Both RustRover and Zed offer integrated debugging for Rust, but using different backends: + +- RustRover uses its own debugger integration +- Zed uses **CodeLLDB** (the same debug adapter popular in VS Code) + +To debug Rust code in Zed: + +- Set breakpoints with `Ctrl+F8` +- Start debugging with `Alt+Shift+F9` or press `F4` and select a debug target +- Step through code with `F7` (step into), `F8` (step over), `Shift+F8` (step out) +- Continue execution with `F9` + +Zed can automatically detect debuggable targets in your Cargo project. Press `F4` to see available options. + +For more control, create a `.zed/debug.json` file: + +```json +[ + { + "label": "Debug Binary", + "adapter": "CodeLLDB", + "request": "launch", + "program": "${workspaceFolder}/target/debug/my_project" + }, + { + "label": "Debug Tests", + "adapter": "CodeLLDB", + "request": "launch", + "cargo": { + "args": ["test", "--no-run"], + "filter": { + "kind": "test" + } + } + }, + { + "label": "Debug with Arguments", + "adapter": "CodeLLDB", + "request": "launch", + "program": "${workspaceFolder}/target/debug/my_project", + "args": ["--config", "dev.toml"] + } +] +``` + +> **Note:** Some users have reported that RustRover's debugger can have issues with variable inspection and breakpoints in certain scenarios. CodeLLDB in Zed provides a solid alternative, though debugging Rust can be challenging in any editor due to optimizations and macro-generated code. + +### Running Tests + +RustRover has a dedicated test runner with a visual interface showing pass/fail status for each test. Zed provides test running through: + +- **Gutter icons** — Click the play button next to `#[test]` functions or test modules +- **Tasks** — Define `cargo test` commands in `tasks.json` +- **Terminal** — Run `cargo test` directly + +The test output appears in the terminal panel. For more detailed output, use: + +- `cargo test -- --nocapture` to see println! output +- `cargo test -- --test-threads=1` for sequential test execution +- `cargo test specific_test_name` to run a single test + ### Extensions vs. Plugins +RustRover has a plugin ecosystem, though it's more limited than other JetBrains IDEs since Rust support is built-in. + +Zed's extension ecosystem is smaller and more focused: + +- Language support and syntax highlighting +- Themes +- Slash commands for AI +- Context servers + +Several features that might require plugins in other editors are built into Zed: + +- Real-time collaboration with voice chat +- AI coding assistance +- Built-in terminal +- Task runner +- rust-analyzer integration +- rustfmt formatting + +### What's Not in Zed + +To set expectations clearly, here's what RustRover offers that Zed doesn't have: + +- **Cargo.toml GUI editor** — Edit the file directly (rust-analyzer helps with completions) +- **Visual dependency management** — Use `cargo add`, `cargo remove`, or edit `Cargo.toml` +- **Profiler integration** — Use `cargo flamegraph`, `perf`, or external profiling tools +- **Database tools** — Use DataGrip, DBeaver, or TablePlus +- **HTTP Client** — Use tools like `curl`, `httpie`, or Postman +- **Coverage visualization** — Use `cargo tarpaulin` or `cargo llvm-cov` externally + +## A Note on Licensing and Telemetry + +If you're moving from RustRover partly due to licensing concerns or telemetry policies, you should know: + +- **Zed is open source** (MIT licensed for the editor, AGPL for collaboration services) +- **Telemetry is optional** and can be disabled in settings +- **No license tiers** — all features are available to everyone + +```json +{ + "telemetry": { + "diagnostics": false, + "metrics": false + } +} +``` + ## Collaboration in Zed vs. RustRover +RustRover offers Code With Me as a separate feature for collaboration. Zed has collaboration built into the core experience. + +- Open the Collab Panel in the left dock +- Create a channel and [invite your collaborators](https://zed.dev/docs/collaboration#inviting-a-collaborator) to join +- [Share your screen or your codebase](https://zed.dev/docs/collaboration#share-a-project) directly + +Once connected, you'll see each other's cursors, selections, and edits in real time. Voice chat is included. There's no need for separate tools or third-party logins. + ## Using AI in Zed +If you're used to AI assistants in RustRover (like JetBrains AI Assistant), Zed offers similar capabilities with more flexibility. + ### Configuring GitHub Copilot +1. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows) +2. Navigate to **AI → Edit Predictions** +3. Click **Configure** next to "Configure Providers" +4. Under **GitHub Copilot**, click **Sign in to GitHub** + +Once signed in, just start typing. Zed will offer suggestions inline for you to accept. + ### Additional AI Options +To use other AI models in Zed, you have several options: + +- Use Zed's hosted models, with higher rate limits. Requires [authentication](https://zed.dev/docs/accounts.html) and subscription to [Zed Pro](https://zed.dev/docs/ai/subscription.html). +- Bring your own [API keys](https://zed.dev/docs/ai/llm-providers.html), no authentication needed +- Use [external agents like Claude Code](https://zed.dev/docs/ai/external-agents.html) + ## Advanced Config and Productivity Tweaks +Zed exposes advanced settings for power users who want to fine-tune their environment. + +Here are a few useful tweaks for Rust developers: + +**Format on Save (uses rustfmt by default):** + +```json +"format_on_save": "on" +``` + +**Configure inlay hints for Rust:** + +```json +{ + "inlay_hints": { + "enabled": true, + "show_type_hints": true, + "show_parameter_hints": true, + "show_other_hints": true + } +} +``` + +**Configure rust-analyzer settings:** + +```json +{ + "lsp": { + "rust-analyzer": { + "initialization_options": { + "checkOnSave": { + "command": "clippy" + }, + "cargo": { + "allFeatures": true + }, + "procMacro": { + "enable": true + } + } + } + } +} +``` + +**Use a separate target directory for rust-analyzer (faster builds):** + +```json +{ + "lsp": { + "rust-analyzer": { + "initialization_options": { + "rust-analyzer.cargo.targetDir": true + } + } + } +} +``` + +This tells rust-analyzer to use `target/rust-analyzer` instead of `target`, so IDE analysis doesn't conflict with your manual `cargo build` commands. + +**Enable direnv support (useful for Rust projects using direnv):** + +```json +"load_direnv": "shell_hook" +``` + +**Configure linked projects for workspaces:** + +If you work with multiple Cargo projects that aren't in a workspace, you can tell rust-analyzer about them: + +```json +{ + "lsp": { + "rust-analyzer": { + "initialization_options": { + "linkedProjects": [ + "./project-a/Cargo.toml", + "./project-b/Cargo.toml" + ] + } + } + } +} +``` + ## Next Steps + +Now that you're set up, here are some resources to help you get the most out of Zed: + +- [Configuring Zed](../configuring-zed.md) — Customize settings, themes, and editor behavior +- [Key Bindings](../key-bindings.md) — Learn how to customize and extend your keymap +- [Tasks](../tasks.md) — Set up build and run commands for your projects +- [AI Features](../ai/overview.md) — Explore Zed's AI capabilities beyond code completion +- [Collaboration](../collaboration/overview.md) — Share your projects and code together in real time +- [Rust in Zed](../languages/rust.md) — Rust-specific setup and configuration diff --git a/docs/src/migrate/webstorm.md b/docs/src/migrate/webstorm.md index 4fd581ec0175effa5d915ed46aaa852c8d891e59..ea69053045183ecd4c66775aacc01b60b710fa31 100644 --- a/docs/src/migrate/webstorm.md +++ b/docs/src/migrate/webstorm.md @@ -4,46 +4,452 @@ This guide covers how to set up Zed if you're coming from WebStorm, including ke ## Install Zed +Zed is available on macOS, Windows, and Linux. + +For macOS, you can download it from zed.dev/download, or install via Homebrew: + +```sh +brew install --cask zed +``` + +For Windows, download the installer from zed.dev/download, or install via winget: + +```sh +winget install Zed.Zed +``` + +For most Linux users, the easiest way to install Zed is through our installation script: + +```sh +curl -f https://zed.dev/install.sh | sh +``` + +After installation, you can launch Zed from your Applications folder (macOS), Start menu (Windows), or directly from the terminal using: +`zed .` +This opens the current directory in Zed. + ## Set Up the JetBrains Keymap +If you're coming from WebStorm, the fastest way to feel at home is to use the JetBrains keymap. During onboarding, you can select it as your base keymap. If you missed that step, you can change it anytime: + +1. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows) +2. Search for `base_keymap` +3. Select `JetBrains` + +Or add this directly to your `settings.json`: + +```json +{ + "base_keymap": "JetBrains" +} +``` + +This maps familiar shortcuts like `Shift Shift` for Search Everywhere, `Cmd+O` for Go to Class, and `Cmd+Shift+A` for Find Action. + ## Set Up Editor Preferences +You can configure settings manually in the Settings Editor. + +To edit your settings: + +1. `Cmd+,` to open the Settings Editor. +2. Run `zed: open settings` in the Command Palette. + +Settings WebStorm users typically configure first: + +| Zed Setting | What it does | +| ----------------------- | ------------------------------------------------------------------------------- | +| `format_on_save` | Auto-format when saving. Set to `"on"` to enable. | +| `soft_wrap` | Wrap long lines. Options: `"none"`, `"editor_width"`, `"preferred_line_length"` | +| `preferred_line_length` | Column width for wrapping and rulers. Default is 80. | +| `inlay_hints` | Show parameter names and type hints inline, like WebStorm's hints. | +| `relative_line_numbers` | Useful if you're coming from IdeaVim. | + +Zed also supports per-project settings. Create a `.zed/settings.json` file in your project root to override global settings for that project, similar to how you might use `.idea` folders in WebStorm. + +> **Tip:** If you're joining an existing project, check `format_on_save` before making your first commit. Otherwise you might accidentally reformat an entire file when you only meant to change one line. + ## Open or Create a Project +After setup, press `Cmd+Shift+O` (with JetBrains keymap) to open a folder. This becomes your workspace in Zed. Unlike WebStorm, there's no project configuration wizard, no framework selection dialog, and no project structure setup required. + +To start a new project, create a directory using your terminal or file manager, then open it in Zed. The editor will treat that folder as the root of your project. For new projects, you'd typically run `npm init`, `pnpm create`, or your framework's CLI tool first, then open the resulting folder in Zed. + +You can also launch Zed from the terminal inside any folder with: +`zed .` + +Once inside a project: + +- Use `Cmd+Shift+O` or `Cmd+E` to jump between files quickly (like WebStorm's "Recent Files") +- Use `Cmd+Shift+A` or `Shift Shift` to open the Command Palette (like WebStorm's "Search Everywhere") +- Use `Cmd+O` to search for symbols (like WebStorm's "Go to Symbol") + +Open buffers appear as tabs across the top. The sidebar shows your file tree and Git status. Toggle it with `Cmd+1` (just like WebStorm's Project tool window). + ## Differences in Keybindings +If you chose the JetBrains keymap during onboarding, most of your shortcuts should already feel familiar. Here's a quick reference for how Zed compares to WebStorm. + ### Common Shared Keybindings (Zed with JetBrains keymap ↔ WebStorm) +| Action | Shortcut | +| ----------------------------- | ----------------------- | +| Search Everywhere | `Shift Shift` | +| Find Action / Command Palette | `Cmd + Shift + A` | +| Go to File | `Cmd + Shift + O` | +| Go to Symbol | `Cmd + O` | +| Recent Files | `Cmd + E` | +| Go to Definition | `Cmd + B` | +| Find Usages | `Alt + F7` | +| Rename Symbol | `Shift + F6` | +| Reformat Code | `Cmd + Alt + L` | +| Toggle Project Panel | `Cmd + 1` | +| Toggle Terminal | `Alt + F12` | +| Duplicate Line | `Cmd + D` | +| Delete Line | `Cmd + Backspace` | +| Move Line Up/Down | `Shift + Alt + Up/Down` | +| Expand/Shrink Selection | `Alt + Up/Down` | +| Comment Line | `Cmd + /` | +| Go Back / Forward | `Cmd + [` / `Cmd + ]` | +| Toggle Breakpoint | `Ctrl + F8` | + ### Different Keybindings (WebStorm → Zed) +| Action | WebStorm | Zed (JetBrains keymap) | +| ---------------------- | ----------- | ------------------------ | +| File Structure | `Cmd + F12` | `Cmd + F12` (outline) | +| Navigate to Next Error | `F2` | `F2` | +| Run | `Ctrl + R` | `Ctrl + Alt + R` (tasks) | +| Debug | `Ctrl + D` | `Alt + Shift + F9` | +| Stop | `Cmd + F2` | `Ctrl + F2` | + ### Unique to Zed +| Action | Shortcut | Notes | +| ----------------- | -------------------------- | ------------------------------ | +| Toggle Right Dock | `Cmd + R` | Assistant panel, notifications | +| Split Panes | `Cmd + K`, then arrow keys | Create splits in any direction | + ### How to Customize Keybindings +- Open the Command Palette (`Cmd+Shift+A` or `Shift Shift`) +- Run `Zed: Open Keymap Editor` + +This opens a list of all available bindings. You can override individual shortcuts or remove conflicts. + +Zed also supports key sequences (multi-key shortcuts). + ## Differences in User Interfaces ### No Indexing +If you've used WebStorm on large projects, you know the wait. Opening a project with many dependencies can mean watching "Indexing..." for anywhere from 30 seconds to several minutes. WebStorm indexes your entire codebase and `node_modules` to power its code intelligence, and re-indexes when dependencies change. + +> "I work for AWS and the applications I deal with are massive. Often I need to keep many projects open due to tight dependencies. I'm talking about complex microservices and micro frontend infrastructure which oftentimes lead to 2-15 minutes of indexing wait time whenever I open a project or build the system locally." +> — Developer working on large-scale microservices + +Zed doesn't index. You open a folder and start working immediately. File search and navigation work instantly regardless of project size. The trade-off is real: WebStorm's index powers features like finding all usages across your entire codebase, understanding import hierarchies, and detecting unused exports project-wide. Zed delegates this work to language servers, which may not analyze as deeply or as broadly. + +**How to adapt:** + +- For project-wide symbol search, use `Cmd+O` / Go to Symbol (relies on your language server) +- For finding files by name, use `Cmd+Shift+O` / Go to File +- For text search across files, use `Cmd+Shift+F`—this is fast even on large codebases +- For deep static analysis, consider running ESLint, TypeScript compiler checks, or other tools from the terminal + ### LSP vs. Native Language Intelligence +WebStorm has its own JavaScript and TypeScript analysis engine built by JetBrains. This engine understands your code deeply: it resolves types, tracks data flow, knows about framework-specific patterns, and offers specialized refactorings. + +Zed uses the Language Server Protocol (LSP) for code intelligence. For JavaScript and TypeScript, Zed supports: + +- **vtsls** (default) — Fast TypeScript language server with excellent performance +- **typescript-language-server** — The standard TypeScript LSP implementation +- **ESLint** — Linting integration +- **Prettier** — Code formatting (built-in) + +The TypeScript LSP experience is mature and robust. You get accurate completions, type checking, go-to-definition, and find-references. The experience is comparable to VS Code, which uses the same underlying TypeScript services. + +Where you might notice differences: + +- Framework-specific intelligence (Angular templates, Vue SFCs) may be less integrated +- Some complex refactorings (extract component with proper imports) may be less sophisticated +- Auto-import suggestions depend on what the language server knows about your project + +**How to adapt:** + +- Use `Alt+Enter` for available code actions—the list will vary by language server +- Ensure your `tsconfig.json` is properly configured so the language server understands your project structure +- Use Prettier for consistent formatting (it's enabled by default for JS/TS) + ### No Project Model +WebStorm manages projects through `.idea` folders containing XML configuration files, framework detection, and run configurations. This model lets WebStorm remember your project settings, manage npm scripts through the UI, and persist run/debug setups. + +Zed has no project model. A project is a folder. There's no wizard, no framework detection screen, no project structure configuration. + +This means: + +- Run configurations don't exist. You define tasks or use the terminal. +- npm script management is external. Use `npm run`, `pnpm`, or `yarn` from the terminal. +- Framework detection doesn't happen. Zed treats all JavaScript/TypeScript the same. + +**How to adapt:** + +- Create a `.zed/settings.json` in your project root for project-specific settings +- Define common commands in `tasks.json` (open via Command Palette: `zed: open tasks`): + +```json +[ + { + "label": "dev", + "command": "npm run dev" + }, + { + "label": "build", + "command": "npm run build" + }, + { + "label": "test", + "command": "npm test" + }, + { + "label": "test current file", + "command": "npm test -- $ZED_FILE" + } +] +``` + +- Use `Ctrl+Alt+R` to run tasks quickly +- Lean on your terminal (`Alt+F12`) for anything tasks don't cover + ### No Framework Integration +WebStorm's value for web development comes largely from its framework integration. React components get special treatment. Angular has dedicated tooling. Vue single-file components are fully understood. The npm tool window shows all your scripts. + +Zed has none of this built-in. The TypeScript language server sees your code as TypeScript—it doesn't understand that a function is a React component or that a file is an Angular service. + +**How to adapt:** + +- Use grep and file search liberally. `Cmd+Shift+F` with a regex can find component definitions, route configurations, or API endpoints. +- Rely on your language server's "find references" (`Alt+F7`) for navigation—it works, just without framework context +- Consider using framework-specific CLI tools (`ng`, `next`, `vite`) from Zed's terminal +- For React, JSX/TSX syntax and TypeScript types still provide good intelligence + +> **Tip:** For projects with complex configurations, keep your framework's documentation handy. The trade-off for Zed's speed is less hand-holding for framework-specific features. + ### Tool Windows vs. Docks +WebStorm organizes auxiliary views into numbered tool windows (Project = 1, npm = Alt+F11, Terminal = Alt+F12, etc.). Zed uses a similar concept called "docks": + +| WebStorm Tool Window | Zed Equivalent | Shortcut (JetBrains keymap) | +| -------------------- | -------------- | --------------------------- | +| Project (1) | Project Panel | `Cmd + 1` | +| Git (9 or Cmd+0) | Git Panel | `Cmd + 0` | +| Terminal (Alt+F12) | Terminal Panel | `Alt + F12` | +| Structure (7) | Outline Panel | `Cmd + 7` | +| Problems (6) | Diagnostics | `Cmd + 6` | +| Debug (5) | Debug Panel | `Cmd + 5` | + +Zed has three dock positions: left, bottom, and right. Panels can be moved between docks by dragging or through settings. + +Note that there's no dedicated npm tool window in Zed. Use the terminal or define tasks for your common npm scripts. + ### Debugging +Both WebStorm and Zed offer integrated debugging for JavaScript and TypeScript: + +- Zed uses `vscode-js-debug` (the same debug adapter that VS Code uses) +- Set breakpoints with `Ctrl+F8` +- Start debugging with `Alt+Shift+F9` or press `F4` and select a debug target +- Step through code with `F7` (step into), `F8` (step over), `Shift+F8` (step out) +- Continue execution with `F9` + +Zed can debug: + +- Node.js applications and scripts +- Chrome/browser JavaScript +- Jest, Mocha, Vitest, and other test frameworks +- Next.js (both server and client-side) + +For more control, create a `.zed/debug.json` file: + +```json +[ + { + "label": "Debug Current File", + "adapter": "JavaScript", + "program": "$ZED_FILE", + "request": "launch" + }, + { + "label": "Debug Node Server", + "adapter": "JavaScript", + "request": "launch", + "program": "${workspaceFolder}/src/server.js" + }, + { + "label": "Attach to Chrome", + "adapter": "JavaScript", + "request": "attach", + "port": 9222 + } +] +``` + +Zed also recognizes `.vscode/launch.json` configurations, so existing VS Code debug setups often work out of the box. + +### Running Tests + +WebStorm has a dedicated test runner with a visual interface showing pass/fail status for each test. Zed provides test running through: + +- **Gutter icons** — Click the play button next to test functions or describe blocks +- **Tasks** — Define test commands in `tasks.json` +- **Terminal** — Run `npm test`, `jest`, `vitest`, etc. directly + +Zed supports auto-detection for common test frameworks: + +- Jest +- Mocha +- Vitest +- Jasmine +- Bun test +- Node.js test runner + +The test output appears in the terminal panel. For Jest, use `--verbose` for detailed output or `--watch` for continuous testing during development. + ### Extensions vs. Plugins +WebStorm has a plugin ecosystem covering additional language support, themes, and tool integrations. + +Zed's extension ecosystem is smaller and more focused: + +- Language support and syntax highlighting +- Themes +- Slash commands for AI +- Context servers + +Several features that require plugins in WebStorm are built into Zed: + +- Real-time collaboration with voice chat +- AI coding assistance +- Built-in terminal +- Task runner +- LSP-based code intelligence +- Prettier formatting +- ESLint integration + +### What's Not in Zed + +To set expectations clearly, here's what WebStorm offers that Zed doesn't have: + +- **npm tool window** — Use the terminal or tasks instead +- **HTTP Client** — Use tools like Postman, Insomnia, or curl +- **Database tools** — Use DataGrip, DBeaver, or TablePlus +- **Framework-specific tooling** (Angular schematics, React refactorings) — Use CLI tools +- **Visual package.json editor** — Edit the file directly +- **Built-in REST client** — Use external tools or extensions +- **Profiler integration** — Use Chrome DevTools or Node.js profiling tools + ## Collaboration in Zed vs. WebStorm +WebStorm offers Code With Me as a separate feature for collaboration. Zed has collaboration built into the core experience. + +- Open the Collab Panel in the left dock +- Create a channel and [invite your collaborators](https://zed.dev/docs/collaboration#inviting-a-collaborator) to join +- [Share your screen or your codebase](https://zed.dev/docs/collaboration#share-a-project) directly + +Once connected, you'll see each other's cursors, selections, and edits in real time. Voice chat is included. There's no need for separate tools or third-party logins. + ## Using AI in Zed +If you're used to AI assistants in WebStorm (like GitHub Copilot, JetBrains AI Assistant, or Junie), Zed offers similar capabilities with more flexibility. + ### Configuring GitHub Copilot +1. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows) +2. Navigate to **AI → Edit Predictions** +3. Click **Configure** next to "Configure Providers" +4. Under **GitHub Copilot**, click **Sign in to GitHub** + +Once signed in, just start typing. Zed will offer suggestions inline for you to accept. + ### Additional AI Options +To use other AI models in Zed, you have several options: + +- Use Zed's hosted models, with higher rate limits. Requires [authentication](https://zed.dev/docs/accounts.html) and subscription to [Zed Pro](https://zed.dev/docs/ai/subscription.html). +- Bring your own [API keys](https://zed.dev/docs/ai/llm-providers.html), no authentication needed +- Use [external agents like Claude Code](https://zed.dev/docs/ai/external-agents.html) + ## Advanced Config and Productivity Tweaks +Zed exposes advanced settings for power users who want to fine-tune their environment. + +Here are a few useful tweaks for JavaScript/TypeScript developers: + +**Format on Save:** + +```json +"format_on_save": "on" +``` + +**Configure Prettier as the default formatter:** + +```json +{ + "formatter": { + "external": { + "command": "prettier", + "arguments": ["--stdin-filepath", "{buffer_path}"] + } + } +} +``` + +**Enable ESLint code actions:** + +```json +{ + "lsp": { + "eslint": { + "settings": { + "codeActionOnSave": { + "rules": ["import/order"] + } + } + } + } +} +``` + +**Configure TypeScript strict mode hints:** + +In your `tsconfig.json`, enable strict mode for better type checking: + +```json +{ + "compilerOptions": { + "strict": true, + "noUncheckedIndexedAccess": true + } +} +``` + +**Enable direnv support (useful for projects using direnv for environment variables):** + +```json +"load_direnv": "shell_hook" +``` + ## Next Steps + +Now that you're set up, here are some resources to help you get the most out of Zed: + +- [Configuring Zed](../configuring-zed.md) — Customize settings, themes, and editor behavior +- [Key Bindings](../key-bindings.md) — Learn how to customize and extend your keymap +- [Tasks](../tasks.md) — Set up build and run commands for your projects +- [AI Features](../ai/overview.md) — Explore Zed's AI capabilities beyond code completion +- [Collaboration](../collaboration/overview.md) — Share your projects and code together in real time +- [JavaScript in Zed](../languages/javascript.md) — JavaScript-specific setup and configuration +- [TypeScript in Zed](../languages/typescript.md) — TypeScript-specific setup and configuration