import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

Astro 개발자 경험을 향상시키고 새로운 기능을 잠금 해제하도록 코드 편집기를 사용자 정의하세요.

VS Code

VS Code는 Microsoft에서 개발한 웹 개발자를 위한 인기 있는 코드 편집기입니다. VS Code 엔진은 GitHub Codespaces 및 Gitpod과 같은 인기 있는 브라우저 내 코드 편집기에도 사용됩니다.

Astro는 모든 코드 편집기에서 작동합니다. 하지만 VS Code는 Astro 프로젝트에 권장되는 편집기입니다. Astro 프로젝트를 위한 몇 가지 주요 기능과 개발자 경험 개선 사항을 제공하는 공식 Astro VS Code 확장을 관리하고 있습니다.

• .astro 파일의 구문 강조 표시
• .astro 파일에 대한 TypeScript 타입 정보
• 코드 완성, 힌트 등을 위한 VS Code Intellisense

시작하려면 오늘 Astro VS Code 확장을 설치하세요.

import ReadMore from '~/components/ReadMore.astro';

Astro 프로젝트에서 TypeScript를 설정하는 방법을 알아보세요.

Zed

Zed는 고성능 오픈 소스 코드 편집기입니다. IDE의 Extensions 탭에서 Astro 확장을 설치할 수 있습니다. 이 확장에는 구문 강조 표시, 코드 완성 및 포맷팅과 같은 기능이 포함되어 있습니다.

JetBrains IDEs

Webstorm은 2024.2 버전에서 Astro 언어 서버에 대한 지원을 추가한 JavaScript 및 TypeScript IDE입니다. 이 업데이트는 구문 강조 표시, 코드 완성 및 포맷팅과 같은 기능을 제공합니다.

JetBrains Marketplace를 통해 공식 플러그인을 설치하거나 IDE의 플러그인 탭에서 "Astro"를 검색하여 설치하세요. Settings | Languages & Frameworks | TypeScript | Astro에서 언어 서버를 전환할 수 있습니다.

Webstorm의 Astro 지원에 대한 자세한 내용은 공식 Webstorm Astro 문서를 참조하세요.

기타 코드 편집기

우리의 놀라운 커뮤니티는 다음을 포함하여 다른 인기 있는 편집기를 위한 여러 확장을 관리합니다.

• Open VSX의 VS Code 확장 - Cursor 또는 VSCodium과 같은 편집기에서 사용 가능한 Open VSX 레지스트리의 공식 Astro VS Code 확장
• Vim 플러그인 - Vim 또는 Neovim에서 Astro에 대한 구문 강조 표시, 들여쓰기 및 코드 접기 지원 제공
• Neovim LSP 및 TreeSitter 플러그인 - Neovim에서 Astro에 대한 구문 강조 표시, treesitter 파싱 및 코드 완성 제공
• Emacs - Astro와 함께 작동하도록 Emacs 및 Eglot를 구성 하는 방법에 대한 지침을 참조하세요.
• Sublime Text용 Astro 구문 강조 표시 - Sublime Text 패키지 관리자에서 사용할 수 있는 Sublime Text용 Astro 패키지
• Nova 확장 - Nova에서 Astro에 대한 구문 강조 표시 및 코드 완성 제공

브라우저 내 편집기

로컬 편집기 외에도 Astro는 다음을 포함하여 브라우저에서 호스팅되는 편집기에서도 잘 실행됩니다.

• StackBlitz 및 CodeSandbox - .astro 파일에 대한 구문 강조 표시를 기본적으로 지원하는 브라우저에서 실행되는 온라인 편집기. 설치나 구성이 필요하지 않습니다!
• GitHub.dev - Astro VS Code 확장을 웹 확장으로 설치할 수 있으며, 이를 통해 전체 확장 기능 중 일부에만 액세스할 수 있습니다. 현재는 구문 강조 표시만 지원됩니다.
• IDX 및 Gitpod - Open VSX에서 공식 Astro VS Code 확장을 설치할 수 있는 클라우드의 완전한 개발 환경

기타 도구

ESLint

ESLint는 JavaScript 및 JSX를 위한 인기 있는 린터입니다. Astro 지원을 위해 커뮤니티에서 관리하는 플러그인을 설치할 수 있습니다.

프로젝트에 ESLint를 설치하고 설정하는 방법에 대한 자세한 내용은 프로젝트의 사용자 가이드를 참조하세요.

Stylelint

Stylelint는 CSS를 위한 인기 있는 린터입니다. 커뮤니티에서 관리하는 Stylelint 구성은 Astro 지원을 제공합니다.

설치 지침, 편집기 통합 및 추가 정보는 프로젝트의 README에서 찾을 수 있습니다.

Biome

Biome은 웹을 위한 올인원 린터 및 포맷터입니다. Biome은 현재 .astro 파일을 부분적으로 지원하며, .astro 파일의 프런트매터를 린팅하고 포맷팅하는 데 사용할 수 있습니다.

Prettier

Prettier는 JavaScript, HTML, CSS 등을 위한 인기 있는 포맷터입니다. Astro VS Code 확장을 사용하는 경우 Prettier를 사용한 코드 포맷팅이 포함됩니다.

편집기 외부 (예: CLI) 또는 편집기 도구를 지원하지 않는 편집기에서 .astro 파일에 대한 포맷팅을 지원하려면 공식 Astro Prettier 플러그인을 설치하세요.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npm install --save-dev --save-exact prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add --save-dev --save-exact prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add --dev --exact prettier prettier-plugin-astro ``` </Fragment> </PackageManagerTabs>

2. 프로젝트 루트에 .prettierrc 구성 파일 (또는 .prettierrc.json, .prettierrc.mjs 또는 기타 지원되는 형식)을 생성하고 prettier-plugin-astro를 추가합니다.

이 파일에서 Astro 파일의 파서를 수동으로 지정합니다. ```json title=".prettierrc" { "plugins": ["prettier-plugin-astro"], "overrides": [ { "files": "*.astro", "options": { "parser": "astro", } } ] } ```

3. 프로젝트에 다른 Prettier 플러그인을 설치하여 구성 파일에 추가할 수도 있습니다. 이러한 추가 플러그인은 특정 순서로 나열해야 할 수도 있습니다. 예를 들어 Tailwind를 사용하는 경우 prettier-plugin-tailwindcss는 Prettier 플러그인 배열의 마지막에 위치해야 합니다.

```json title=".prettierrc" { "plugins": [ "prettier-plugin-astro", "prettier-plugin-tailwindcss" // 반드시 마지막에 추가합니다. ], "overrides": [ { "files": "*.astro", "options": { "parser": "astro" } } ] } ```

4. 터미널에서 다음 명령을 실행하여 파일을 포맷팅합니다.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx prettier . --write ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec prettier . --write ``` </Fragment> <Fragment slot="yarn"> ```shell yarn exec prettier . --write ``` </Fragment> </PackageManagerTabs>

자세한 내용은 Prettier 플러그인의 README에서 지원되는 옵션, VS Code에서 Prettier를 설정하는 방법 등을 참조하세요.

dprint

dprint는 JavaScript, TypeScript, CSS 등 다양한 언어를 지원하는 고도로 구성 가능한 코드 포맷터입니다. markup_fmt 플러그인을 사용하여 .astro 파일에 대한 지원을 추가할 수 있습니다.