편집기 설정

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 확장을 설치하세요.

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 확장 또는 다른 편집기에서 Astro 언어 서버를 사용하는 경우 Prettier를 사용한 코드 포맷팅이 포함됩니다.

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

prettier와 prettier-plugin-astro를 설치합니다.
- npm
- pnpm
- Yarn
터미널 창
npm install --save-dev --save-exact prettier prettier-plugin-astro
터미널 창
pnpm add --save-dev --save-exact prettier prettier-plugin-astro
터미널 창
yarn add --dev --exact prettier prettier-plugin-astro
프로젝트 루트에 .prettierrc 구성 파일 (또는 .prettierrc.json, .prettierrc.mjs 또는 기타 지원되는 형식)을 생성하고 prettier-plugin-astro를 추가합니다.

이 파일에서 Astro 파일의 파서를 수동으로 지정합니다.
.prettierrc
```
{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro",
      }
    }
  ]
}
```
프로젝트에 다른 Prettier 플러그인을 설치하여 구성 파일에 추가할 수도 있습니다. 이러한 추가 플러그인은 특정 순서로 나열해야 할 수도 있습니다. 예를 들어 Tailwind를 사용하는 경우 prettier-plugin-tailwindcss는 Prettier 플러그인 배열의 마지막에 위치해야 합니다.
.prettierrc
```
{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // 반드시 마지막에 추가합니다.
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}
```
터미널에서 다음 명령을 실행하여 파일을 포맷팅합니다.
- npm
- pnpm
- Yarn
터미널 창
npx prettier . --write
터미널 창
pnpm exec prettier . --write
터미널 창
yarn exec prettier . --write

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

dprint

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

기여하기 커뮤니티 후원하기