docs: Improve the Tailwind CSS page (#31681)
Namely, ensuring we mention the support for their Prettier plugins. Release Notes: - N/A
This commit is contained in:
parent
cb187b0b4d
commit
e3354543c0
6 changed files with 20 additions and 9 deletions
|
@ -12,7 +12,7 @@ mdbook serve docs
|
|||
|
||||
It's important to note the version number above. For an unknown reason, as of 2025-04-23, running 0.4.48 will cause odd URL behavior that breaks docs.
|
||||
|
||||
Before committing, verify that the docs are formatted in the way prettier expects with:
|
||||
Before committing, verify that the docs are formatted in the way Prettier expects with:
|
||||
|
||||
```
|
||||
cd docs && pnpm dlx prettier@3.5.0 . --write && cd ..
|
||||
|
|
|
@ -1361,7 +1361,7 @@ While other options may be changed at a runtime and should be placed under `sett
|
|||
}
|
||||
```
|
||||
|
||||
3. External formatters may optionally include a `{buffer_path}` placeholder which at runtime will include the path of the buffer being formatted. Formatters operate by receiving file content via standard input, reformatting it and then outputting it to standard output and so normally don't know the filename of what they are formatting. Tools like prettier support receiving the file path via a command line argument which can then used to impact formatting decisions.
|
||||
3. External formatters may optionally include a `{buffer_path}` placeholder which at runtime will include the path of the buffer being formatted. Formatters operate by receiving file content via standard input, reformatting it and then outputting it to standard output and so normally don't know the filename of what they are formatting. Tools like Prettier support receiving the file path via a command line argument which can then used to impact formatting decisions.
|
||||
|
||||
WARNING: `{buffer_path}` should not be used to direct your formatter to read from a filename. Your formatter should only read from standard input and should not read or write files directly.
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ 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](../configuring-zed.md) documentation 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`:
|
||||
|
||||
|
@ -77,7 +77,7 @@ You can also only execute a single ESLint rule when using `fixAll`:
|
|||
```
|
||||
|
||||
> **Note:** the other formatter you have configured will still run, after ESLint.
|
||||
> So if your language server or prettier configuration don't format according to
|
||||
> So if your language server or Prettier configuration don't format according to
|
||||
> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
|
||||
> errors.
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ While editing these files you can use `cmd-/` (macOS) or `ctrl-/` (Linux) to tog
|
|||
|
||||
If you use files with the `*.jsonc` extension when using `Format Document` or have `format_on_save` enabled, Zed invokes Prettier as the formatter. Prettier has an [outstanding issue](https://github.com/prettier/prettier/issues/15956) where it will add trailing commas to files with a `jsonc` extension. JSONC files which have a `.json` extension are unaffected.
|
||||
|
||||
To workaround this behavior you can add the following to your `.prettierrc`
|
||||
To workaround this behavior you can add the following to your `.prettierrc` configuration file:
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
# Tailwind CSS
|
||||
|
||||
Tailwind CSS support is built into Zed.
|
||||
Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
|
||||
|
||||
- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)
|
||||
|
||||
|
@ -22,3 +22,14 @@ Languages which can be used with Tailwind CSS in Zed:
|
|||
- [PHP](./php.md)
|
||||
- [Svelte](./svelte.md)
|
||||
- [Vue](./vue.md)
|
||||
|
||||
### Prettier Plugin
|
||||
|
||||
Zed supports Prettier out of the box, which means that if you have the [Tailwind CSS Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) installed, adding it to your Prettier configuration will make it work automatically:
|
||||
|
||||
```json
|
||||
// .prettierrc
|
||||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"]
|
||||
}
|
||||
```
|
||||
|
|
|
@ -32,11 +32,11 @@ Note, settings keys must be nested, so `yaml.keyOrdering` becomes `{"yaml": { "k
|
|||
|
||||
## Formatting
|
||||
|
||||
By default Zed will use prettier for formatting YAML files.
|
||||
By default, Zed uses Prettier for formatting YAML files.
|
||||
|
||||
### Prettier Formatting
|
||||
|
||||
You can customize the formatting behavior of Prettier. For example to use single-quotes in yaml files add the following to a `.prettierrc`:
|
||||
You can customize the formatting behavior of Prettier. For example to use single-quotes in yaml files add the following to your `.prettierrc` configuration file:
|
||||
|
||||
```json
|
||||
{
|
||||
|
@ -53,7 +53,7 @@ You can customize the formatting behavior of Prettier. For example to use single
|
|||
|
||||
### yaml-language-server Formatting
|
||||
|
||||
To use `yaml-language-server` instead of Prettier for YAML formatting, add the following to your Zed settings.json:
|
||||
To use `yaml-language-server` instead of Prettier for YAML formatting, add the following to your Zed `settings.json`:
|
||||
|
||||
```json
|
||||
"languages": {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue