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:
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user