From bc8fa573ac867009eb3a9872d33da8217ae6cc30 Mon Sep 17 00:00:00 2001
From: Trevor Lee <49603972+trevortylerlee@users.noreply.github.com>
Date: Tue, 18 Jun 2024 01:52:19 -0700
Subject: [PATCH 1/2] Update instructions on using prettier-plugin-astro
---
src/content/docs/en/editor-setup.mdx | 86 ++++++++++++++++++++--------
1 file changed, 61 insertions(+), 25 deletions(-)
diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx
index 5a0b843be902c..54c6271b42646 100644
--- a/src/content/docs/en/editor-setup.mdx
+++ b/src/content/docs/en/editor-setup.mdx
@@ -5,6 +5,7 @@ i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"
Customize your code editor to improve the Astro developer experience and unlock new features.
@@ -72,30 +73,65 @@ Installation instructions, editor integration, and additional information can be
To add support for formatting `.astro` files outside of the editor (e.g. CLI) or inside editors that don't support our editor tooling, install [the official Astro Prettier plugin](https://github.com/withastro/prettier-plugin-astro).
-To get started, first install Prettier and the plugin:
-
-
-
- ```shell
- npm install --save-dev prettier prettier-plugin-astro
- ```
-
-
- ```shell
- pnpm add -D prettier prettier-plugin-astro
- ```
-
-
- ```shell
- yarn add --dev prettier prettier-plugin-astro
- ```
-
-
-
-Prettier will then automatically detect the plugin and use it to process `.astro` files when you run it:
-
-```shell
-prettier --write .
-```
+
+1. Install `prettier` and `prettier-plugin-astro`.
+
+
+
+ ```shell
+ npm install --save-dev prettier prettier-plugin-astro
+ ```
+
+
+ ```shell
+ pnpm add -D prettier prettier-plugin-astro
+ ```
+
+
+ ```shell
+ yarn add --dev prettier prettier-plugin-astro
+ ```
+
+
+
+2. Create a `.prettierrc.mjs` config file and add `prettier-plugin-astro` to it.
+
+ It's also recommended to manually specify the parser being used for Astro files.
+
+ ```js title=".prettierrc.mjs"
+ /** @type {import("prettier").Config} */
+ export default {
+ plugins: ['prettier-plugin-astro'],
+ overrides: [
+ {
+ files: '*.astro',
+ options: {
+ parser: 'astro',
+ },
+ },
+ ],
+ };
+ ```
+
+3. Use `prettier . --write` to format your files.
+
+
+
+ ```shell
+ npx prettier . --write
+ ```
+
+
+ ```shell
+ pnpm exec prettier . --write
+ ```
+
+
+ ```shell
+ yarn prettier . --write
+ ```
+
+
+
See the [Prettier plugin's README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) for more information about its supported options, how to set up Prettier inside VS Code, and more.
From baa0a1e602400045f2ad662a4de5da9737d17bc1 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger
Date: Tue, 18 Jun 2024 08:32:00 -0300
Subject: [PATCH 2/2] tiny text edits
---
src/content/docs/en/editor-setup.mdx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx
index 54c6271b42646..cd8510ed504c1 100644
--- a/src/content/docs/en/editor-setup.mdx
+++ b/src/content/docs/en/editor-setup.mdx
@@ -94,9 +94,9 @@ To add support for formatting `.astro` files outside of the editor (e.g. CLI) or
-2. Create a `.prettierrc.mjs` config file and add `prettier-plugin-astro` to it.
+2. Create a `.prettierrc.mjs` config file at the root of your project and add `prettier-plugin-astro` to it.
- It's also recommended to manually specify the parser being used for Astro files.
+ In this file, also manually specify the parser for Astro files.
```js title=".prettierrc.mjs"
/** @type {import("prettier").Config} */
@@ -113,7 +113,7 @@ To add support for formatting `.astro` files outside of the editor (e.g. CLI) or
};
```
-3. Use `prettier . --write` to format your files.
+3. Run the command `prettier . --write` in the terminal to format your files.