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
This commit is contained in:
Danilo Leal
GitHub
parent
e3354543c0
commit
45f9edcbb9
6 changed files with 29 additions and 34 deletions
|
|
@ -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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
<!--
|
||||
TBD: Document CSS
|
||||
TBD: Document [Tailwind CSS](./tailwindcss.md)
|
||||
-->
|
||||
## 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.
|
||||
|
||||
<!-- TBD: Document CS -->
|
||||
|
||||
## Recommended Reading
|
||||
|
||||
- [HTML](./html.md)
|
||||
- [TypeScript](./typescript.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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue