편집기 설정
Astro 개발자 경험을 향상시키고 새로운 기능을 잠금 해제하도록 코드 편집기를 사용자 정의하세요.
VS Code
섹션 제목: VS CodeVS Code는 Microsoft에서 개발한 웹 개발자를 위한 인기 있는 코드 편집기입니다. VS Code 엔진은 GitHub Codespaces 및 Gitpod과 같은 인기 있는 브라우저 내 코드 편집기에도 사용됩니다.
Astro는 모든 코드 편집기에서 작동합니다. 하지만 VS Code는 Astro 프로젝트에 권장되는 편집기입니다. Astro 프로젝트를 위한 몇 가지 주요 기능과 개발자 경험 개선 사항을 제공하는 공식 Astro VS Code 확장을 관리하고 있습니다.
.astro
파일의 구문 강조 표시.astro
파일에 대한 TypeScript 타입 정보- 코드 완성, 힌트 등을 위한 VS Code Intellisense
시작하려면 오늘 Astro VS Code 확장을 설치하세요.
Zed
섹션 제목: ZedZed는 0.123.2 버전에서 Astro 지원을 추가한 오픈 소스 코드 편집기입니다. IDE의 Extensions 탭에서 Astro 확장을 설치할 수 있습니다. 이 확장에는 구문 강조 표시, 코드 완성 및 포맷팅과 같은 기능이 포함되어 있습니다.
JetBrains IDEs
섹션 제목: JetBrains IDEsWebstorm은 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 확장을 웹 확장으로 설치할 수 있으며, 이를 통해 전체 확장 기능 중 일부에만 액세스할 수 있습니다. 현재는 구문 강조 표시만 지원됩니다.
- IDX 및 Gitpod - Open VSX에서 공식 Astro VS Code 확장을 설치할 수 있는 클라우드의 완전한 개발 환경
기타 도구
섹션 제목: 기타 도구ESLint
섹션 제목: ESLintESLint는 JavaScript 및 JSX를 위한 인기 있는 린터입니다. Astro 지원을 위해 커뮤니티에서 관리하는 플러그인을 설치할 수 있습니다.
프로젝트에 ESLint를 설치하고 설정하는 방법에 대한 자세한 내용은 프로젝트의 사용자 가이드를 참조하세요.
Stylelint
섹션 제목: StylelintStylelint는 CSS를 위한 인기 있는 린터입니다. 커뮤니티에서 관리하는 Stylelint 구성은 Astro 지원을 제공합니다.
설치 지침, 편집기 통합 및 추가 정보는 프로젝트의 README에서 찾을 수 있습니다.
Prettier
섹션 제목: PrettierPrettier는 JavaScript, HTML, CSS 등을 위한 인기 있는 포맷터입니다. Astro VS Code 확장 또는 다른 편집기에서 Astro 언어 서버를 사용하는 경우 Prettier를 사용한 코드 포맷팅이 포함됩니다.
편집기 외부 (예: CLI) 또는 편집기 도구를 지원하지 않는 편집기에서 .astro
파일에 대한 포맷팅을 지원하려면 공식 Astro Prettier 플러그인을 설치하세요.
-
prettier
와prettier-plugin-astro
를 설치합니다.터미널 창 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",}}]} -
터미널에서 다음 명령을 실행하여 파일을 포맷팅합니다.
터미널 창 npx prettier . --write터미널 창 pnpm exec prettier . --write터미널 창 yarn exec prettier . --write
자세한 내용은 Prettier 플러그인의 README에서 지원되는 옵션, VS Code에서 Prettier를 설정하는 방법 등을 참조하세요.
Learn