From 45f9edcbb98a9ffffd5dd8962c256a42b5bab7a5 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 29 May 2025 08:43:54 -0300 Subject: [PATCH] docs: Add small refinements to CSS adjacent pages (#31683) Follow up to https://github.com/zed-industries/zed/pull/31681. Was visiting some of these pages and noticed these somewhat small formatting and copywriting improvement opportunities. The docs for Svelte in particular felt somewhat unorganized. Release Notes: - N/A --- docs/src/ai/agent-panel.md | 2 +- docs/src/languages/css.md | 13 +++++++------ docs/src/languages/html.md | 16 +++++++--------- docs/src/languages/javascript.md | 11 +++++++---- docs/src/languages/svelte.md | 12 ++++-------- docs/src/languages/typescript.md | 9 +++------ 6 files changed, 29 insertions(+), 34 deletions(-) diff --git a/docs/src/ai/agent-panel.md b/docs/src/ai/agent-panel.md index 18dc021604..3bdced2a1e 100644 --- a/docs/src/ai/agent-panel.md +++ b/docs/src/ai/agent-panel.md @@ -3,7 +3,7 @@ The Agent Panel provides you with a way to interact with LLMs. You can use it for various tasks, such as generating code, asking questions about your code base, and general inquiries such as emails and documentation. -To open the Agent Panel, use the `agent: new thread` action in [the Command Palette](../getting-started.md#command-palette) or click the ✨ (sparkles) icon in the status bar. +To open the Agent Panel, use the `agent: new thread` action in [the Command Palette](./getting-started.md#command-palette) or click the ✨ (sparkles) icon in the status bar. If you're using the Agent Panel for the first time, you'll need to [configure at least one LLM provider](./configuration.md). diff --git a/docs/src/languages/css.md b/docs/src/languages/css.md index cf860d1b4f..c31f3578fb 100644 --- a/docs/src/languages/css.md +++ b/docs/src/languages/css.md @@ -1,18 +1,19 @@ # CSS -CSS support is available natively in Zed. +Zed has built-in support for CSS. - Tree-sitter: [tree-sitter/tree-sitter-css](https://github.com/tree-sitter/tree-sitter-css) - Language Servers: - [microsoft/vscode-html-languageservice](https://github.com/microsoft/vscode-html-languageservice) - [tailwindcss-language-server](https://github.com/tailwindlabs/tailwindcss-intellisense) - +## Tailwind CSS -## See also: +Zed also supports [Tailwind CSS](./tailwindcss.md) out-of-the-box for languages and frameworks like JavaScript, Astro, Svelte, and more. + + + +## Recommended Reading - [HTML](./html.md) - [TypeScript](./typescript.md) diff --git a/docs/src/languages/html.md b/docs/src/languages/html.md index 15c0efdd20..3afa34068d 100644 --- a/docs/src/languages/html.md +++ b/docs/src/languages/html.md @@ -5,9 +5,7 @@ HTML support is available through the [HTML extension](https://github.com/zed-in - Tree-sitter: [tree-sitter/tree-sitter-html](https://github.com/tree-sitter/tree-sitter-html) - Language Server: [microsoft/vscode-html-languageservice](https://github.com/microsoft/vscode-html-languageservice) -This extension is automatically installed. - -If you do not want to use the HTML extension, you can add the following to your settings: +This extension is automatically installed, but if you do not want to use it, you can add the following to your settings: ```json { @@ -19,9 +17,9 @@ If you do not want to use the HTML extension, you can add the following to your ## Formatting -By default Zed uses [Prettier](https://prettier.io/) for formatting HTML +By default Zed uses [Prettier](https://prettier.io/) for formatting HTML. -You can disable `format_on_save` by adding the following to your Zed settings: +You can disable `format_on_save` by adding the following to your Zed `settings.json`: ```json "languages": { @@ -31,11 +29,11 @@ You can disable `format_on_save` by adding the following to your Zed settings: } ``` -You can still trigger formatting manually with {#kb editor::Format} or by opening the command palette ( {#kb commandPalette::Toggle} and selecting `Format Document`. +You can still trigger formatting manually with {#kb editor::Format} or by opening [the Command Palette](..//getting-started.md#command-palette) ({#kb command_palette::Toggle}) and selecting "Format Document". ### LSP Formatting -If you prefer you can use `vscode-html-language-server` instead of Prettier for auto-formatting by adding the following to your Zed settings: +To use the `vscode-html-language-server` language server auto-formatting instead of Prettier, add the following to your Zed settings: ```json "languages": { @@ -45,7 +43,7 @@ If you prefer you can use `vscode-html-language-server` instead of Prettier for } ``` -You can customize various [formatting options](https://code.visualstudio.com/docs/languages/html#_formatting) for `vscode-html-language-server` via Zed settings.json: +You can customize various [formatting options](https://code.visualstudio.com/docs/languages/html#_formatting) for `vscode-html-language-server` via your Zed `settings.json`: ```json "lsp": { @@ -66,7 +64,7 @@ You can customize various [formatting options](https://code.visualstudio.com/doc } ``` -## See also: +## See also - [CSS](./css.md) - [JavaScript](./javascript.md) diff --git a/docs/src/languages/javascript.md b/docs/src/languages/javascript.md index 89e0db9eac..b42fa31922 100644 --- a/docs/src/languages/javascript.md +++ b/docs/src/languages/javascript.md @@ -7,7 +7,10 @@ JavaScript support is available natively in Zed. ## Code formatting -Formatting on save is enabled by default for JavaScript, using TypeScript's built-in code formatting. But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/). You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings. See [the configuration docs](../configuring-zed.md) for more information. +Formatting on save is enabled by default for JavaScript, using TypeScript's built-in code formatting. +But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/). +You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings. +See [the configuration docs](../configuring-zed.md) for more information. For example, if you have Prettier installed and on your `PATH`, you can use it to format JavaScript files by adding the following to your `settings.json`: @@ -34,12 +37,12 @@ In JSX strings, the [`tailwindcss-language-server`](./tailwindcss.md) is used pr ## JSDoc -Zed supports JSDoc syntax in JavaScript and TypeScript comments that match the JSDoc syntax. Zed uses [tree-sitter/tree-sitter-jsdoc](https://github.com/tree-sitter/tree-sitter-jsdoc) for parsing and highlighting JSDoc. +Zed supports JSDoc syntax in JavaScript and TypeScript comments that match the JSDoc syntax. +Zed uses [tree-sitter/tree-sitter-jsdoc](https://github.com/tree-sitter/tree-sitter-jsdoc) for parsing and highlighting JSDoc. ## ESLint -You can configure Zed to format code using `eslint --fix` by running the ESLint -code action when formatting: +You can configure Zed to format code using `eslint --fix` by running the ESLint code action when formatting: ```json { diff --git a/docs/src/languages/svelte.md b/docs/src/languages/svelte.md index e52e7c9892..66d0d0cb50 100644 --- a/docs/src/languages/svelte.md +++ b/docs/src/languages/svelte.md @@ -7,7 +7,7 @@ Svelte support is available through the [Svelte extension](https://github.com/ze ## Extra theme styling configuration -You can modify how certain styles such as directives and modifiers appear in attributes: +You can modify how certain styles, such as directives and modifiers, appear in attributes: ```json "syntax": { @@ -24,7 +24,7 @@ You can modify how certain styles such as directives and modifiers appear in att ## Inlay Hints -Zed sets the following initialization options for inlay hints: +When inlay hints is enabled in Zed, to make the language server send them back, Zed sets the following initialization options: ```json "inlayHints": { @@ -51,9 +51,7 @@ Zed sets the following initialization options for inlay hints: } ``` -to make the language server send back inlay hints when Zed has them enabled in the settings. - -Use +To override these settings, use the following: ```json "lsp": { @@ -72,6 +70,4 @@ Use } ``` -to override these settings. - -See https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json for more information. +See [the TypeScript language server `package.json`](https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json) for more information. diff --git a/docs/src/languages/typescript.md b/docs/src/languages/typescript.md index d14210febf..8e6a437cdb 100644 --- a/docs/src/languages/typescript.md +++ b/docs/src/languages/typescript.md @@ -12,7 +12,7 @@ TBD: Document the difference between Language servers ## Language servers -By default Zed uses [vtsls](https://github.com/yioneko/vtsls) for TypeScript, TSX and JavaScript files. +By default Zed uses [vtsls](https://github.com/yioneko/vtsls) for TypeScript, TSX, and JavaScript files. You can configure the use of [typescript-language-server](https://github.com/typescript-language-server/typescript-language-server) per language in your settings file: ```json @@ -65,12 +65,9 @@ Prettier will also be used for TypeScript files by default. To disable this: ## Inlay Hints -Zed sets the following initialization options to make the language server send back inlay hints -(that is, when Zed has inlay hints enabled in the settings). +Zed sets the following initialization options to make the language server send back inlay hints (that is, when Zed has inlay hints enabled in the settings). -You can override these settings in your Zed settings file. - -When using `typescript-language-server`: +You can override these settings in your Zed `settings.json` when using `typescript-language-server`: ```json {