Update instructions on using prettier-plugin-astro

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:
-
-<PackageManagerTabs>
-  <Fragment slot="npm">
-  ```shell
-  npm install --save-dev prettier prettier-plugin-astro
-  ```
-  </Fragment>
-  <Fragment slot="pnpm">
-  ```shell
-  pnpm add -D prettier prettier-plugin-astro
-  ```
-  </Fragment>
-  <Fragment slot="yarn">
-  ```shell
-  yarn add --dev prettier prettier-plugin-astro
-  ```
-  </Fragment>
-</PackageManagerTabs>
-
-Prettier will then automatically detect the plugin and use it to process `.astro` files when you run it:
-
-```shell
-prettier --write .
-```
+<Steps>
+1. Install `prettier` and `prettier-plugin-astro`.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install --save-dev prettier prettier-plugin-astro
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add -D prettier prettier-plugin-astro
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add --dev prettier prettier-plugin-astro
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+2. Create a `.prettierrc.mjs` config file at the root of your project and add `prettier-plugin-astro` to it.
+
+    In this file, also manually specify the parser for Astro files.
+
+    ```js title=".prettierrc.mjs"
+    /** @type {import("prettier").Config} */
+    export default {
+      plugins: ['prettier-plugin-astro'],
+      overrides: [
+        {
+          files: '*.astro',
+          options: {
+            parser: 'astro',
+          },
+        },
+      ],
+    };
+    ```
+
+3. Run the command `prettier . --write` in the terminal to format your files.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npx prettier . --write
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm exec prettier . --write
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn prettier . --write
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+</Steps>
 
 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.