diff --git a/docs/guide/ide-integration.md b/docs/guide/ide-integration.md index e6b32e98bb..8bbe5765d6 100644 --- a/docs/guide/ide-integration.md +++ b/docs/guide/ide-integration.md @@ -1,6 +1,6 @@ # IDE Integration -Vite+ supports VS Code through the [Vite Plus Extension Pack](https://marketplace.visualstudio.com/items?itemName=VoidZero.vite-plus-extension-pack) and the VS Code settings that `vp create` and `vp migrate` can automatically write into your project. +Vite+ supports VS Code and Zed through editor-specific settings that `vp create` and `vp migrate` can automatically write into your project. ## VS Code @@ -46,3 +46,58 @@ To let the VS Code NPM Scripts panel run scripts through `vp`, add the following ``` This is included automatically by `vp create` but not by `vp migrate`, since existing projects may have team members who do not have `vp` installed locally. + +## Zed + +For the best Zed experience with Vite+, install the [oxc-zed](https://github.com/oxc-project/oxc-zed) extension from the Zed extensions marketplace. It provides formatting and linting via `vp check`. + +When you create or migrate a project, Vite+ prompts you to choose whether you want the editor config written for Zed. + +You can also manually set up the Zed config: + +`.zed/settings.json` + +```json +{ + "lsp": { + "oxlint": { + "initialization_options": { + "settings": { + "run": "onType", + "fixKind": "safe_fix", + "typeAware": true, + "unusedDisableDirectives": "deny" + } + } + }, + "oxfmt": { + "initialization_options": { + "settings": { + "configPath": "./vite.config.ts", + "run": "onSave" + } + } + } + }, + "languages": { + "JavaScript": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }], + "code_action": "source.fixAll.oxc" + }, + "TypeScript": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + }, + "Vue.js": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + } + } +} +``` + +Setting `oxfmt.configPath` to `./vite.config.ts` keeps editor format-on-save aligned with the `fmt` block in your Vite+ config. The full generated config covers additional languages (CSS, HTML, JSON, Markdown, etc.) — run `vp create` or `vp migrate` to get the complete file written automatically.