편집기 설정

Astro 개발자 경험을 개선하고 새로운 기능을 사용하려면 코드 편집기를 사용자 정의하세요.

VS Code

VS Code는 Microsoft에서 만든, 웹 개발자를 위한 인기 있는 코드 편집기입니다. 또한 VS Code 엔진은 GitHub Codespaces 및 Gitpod과 같이 인기 있는 브라우저 내 코드 편집기를 지원합니다.

Astro는 모든 코드 편집기에서 작동합니다. 그러나 Astro 프로젝트에는 VS Code 사용을 권장합니다. 우리는 Astro 프로젝트의 개발자 경험을 개선하고 몇 가지 주요 기능을 제공하는 공식 Astro VS Code 확장을 지속적으로 관리하고 있습니다.

.astro 파일의 구문 강조 제공
.astro 파일의 TypeScript 타입 정보 제공
코드 자동 완성, 힌트 등을 위한 VS Code Intellisense

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

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

Zed

Zed는 버전 0.123.2에서 Astro에 대한 지원을 추가한 오픈 소스 코드 편집기입니다. 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 확장 공식 - VSCodium과 같은 개방형 플랫폼용 Open VSX 레지스트리에서 사용할 수 있는 공식 Astro VS Code 확장입니다.
Nova 확장 커뮤니티 - Nova에서 Astro에 대한 구문 강조 및 코드 자동 완성 기능을 제공합니다.
Vim 플러그인 커뮤니티 - Vim 또는 Neovim에서 Astro에 대한 구문 강조, 들여쓰기, 코드 접기 지원을 제공합니다.
Neovim LSP와 TreeSitter 플러그인 커뮤니티 - Neovim에서 Astro에 대한 구문 강조, treesitter 분석, 코드 자동 완성 기능을 제공합니다.
Emacs - Astro를 이용해 작업하기 위해 Emacs 및 Eglot 구성 커뮤니티을 참조하세요.
Sublime Text의 Astro 구문 강조 커뮤니티 - Sublime Text 패키지 관리자에서 사용할 수 있는 Sublime Text용 Astro 패키지입니다.

브라우저 내 편집기

로컬 편집기 외에도 Astro는 다음을 포함하여 브라우저 내 편집기에서도 잘 동작합니다.

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

기타 도구

ESLint

ESLint는 JavaScript 및 JSX용으로 널리 사용되는 린터입니다. 커뮤니티에서 관리하는 플러그인을 설치하여 Astro 지원을 추가할 수 있습니다.

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

Stylelint

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

설치 방법, 편집기 통합, 추가 정보는 프로젝트의 README에서 확인할 수 있습니다.

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 prettier prettier-plugin-astro
터미널 창
pnpm add -D prettier prettier-plugin-astro
터미널 창
yarn add --dev prettier prettier-plugin-astro

프로젝트 루트에 .prettierrc.mjs 구성 파일을 생성하고, 이 파일에 prettier-plugin-astro를 추가합니다.

또한, 이 파일에서 Astro 파일에 대한 파서를 수동으로 지정합니다.

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

파일 형식을 지정하기 위해 터미널에서 prettier . --write 명령을 실행합니다.
- npm
- pnpm
- Yarn
터미널 창
npx prettier . --write
터미널 창
pnpm exec prettier . --write
터미널 창
yarn prettier . --write

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

기여하기

커뮤니티