From beb0c6e53c7db10583c94475864b7ea9bf08cded Mon Sep 17 00:00:00 2001
From: Junseong Park <junseongpark.dev@gmail.com>
Date: Tue, 18 Jun 2024 21:42:37 +0900
Subject: [PATCH] i18n(ko-KR): update `editor-setup.mdx`

---
 src/content/docs/ko/editor-setup.mdx | 92 +++++++++++++++++++---------
 1 file changed, 64 insertions(+), 28 deletions(-)

diff --git a/src/content/docs/ko/editor-setup.mdx b/src/content/docs/ko/editor-setup.mdx
index 3123db0b26c20..a7beb5f9e1a35 100644
--- a/src/content/docs/ko/editor-setup.mdx
+++ b/src/content/docs/ko/editor-setup.mdx
@@ -4,8 +4,9 @@ description: Astro로 구축하기 위한 편집기 설정
 i18nReady: true
 ---
 
-import Badge from "~/components/Badge.astro"
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
+import Badge from "~/components/Badge.astro"
 
 Astro 개발자 경험을 개선하고 새로운 기능을 사용하려면 코드 편집기를 사용자 정의하세요.
 
@@ -72,30 +73,65 @@ Astro에 대한 초기 지원은 WebStorm 2023.1에서 시작되었습니다. [J
 
 편집기 외부(예: CLI) 또는 우리의 도구를 지원하지 않는 편집기에서 `.astro` 파일에 대한 포맷팅 지원을 추가하려면 [공식 Astro Prettier 플러그인](https://github.com/withastro/prettier-plugin-astro)을 설치하세요.
 
-시작하려면 먼저 Prettier와 플러그인을 설치하세요.
-
-<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는 플러그인을 자동으로 감지합니다. 감지된 플러그인은 다음 명령을 실행할 때 `.astro` 파일을 처리하는 데 사용됩니다.
-
-```shell
-prettier --write .
-```
-
-지원하는 옵션, VS Code에서 Prettier를 설정하는 방법 등에 대한 자세한 내용은 [Prettier 플러그인 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)를 확인하세요.
+<Steps>
+1. `prettier`와 `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. 프로젝트 루트에 `.prettierrc.mjs` 구성 파일을 생성하고, 이 파일에 `prettier-plugin-astro`를 추가합니다.
+
+    또한, 이 파일에서 Astro 파일에 대한 파서를 수동으로 지정합니다.
+
+    ```js title=".prettierrc.mjs"
+    /** @type {import("prettier").Config} */
+    export default {
+      plugins: ['prettier-plugin-astro'],
+      overrides: [
+        {
+          files: '*.astro',
+          options: {
+            parser: 'astro',
+          },
+        },
+      ],
+    };
+    ```
+
+3. 파일 형식을 지정하기 위해 터미널에서 `prettier . --write` 명령을 실행합니다.
+
+    <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>
+
+지원하는 옵션, VS Code에서 Prettier를 설정하는 방법 등에 대한 자세한 내용은 [Prettier 플러그인 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)를 확인하세요.
\ No newline at end of file