컨텐츠로 건너뛰기

편집기 설정

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

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

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

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

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

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

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

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 LSPTreeSitter 플러그인 커뮤니티 - Neovim에서 Astro에 대한 구문 강조 표시, treesitter 파싱 및 코드 완성 제공
  • Emacs - Astro와 함께 작동하도록 Emacs 및 Eglot를 구성 커뮤니티하는 방법에 대한 지침을 참조하세요.
  • Sublime Text용 Astro 구문 강조 표시 커뮤니티 - Sublime Text 패키지 관리자에서 사용할 수 있는 Sublime Text용 Astro 패키지

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

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

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

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

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

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

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

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

  1. prettierprettier-plugin-astro를 설치합니다.

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

    이 파일에서 Astro 파일의 파서를 수동으로 지정합니다.

    .prettierrc
    {
    "plugins": ["prettier-plugin-astro"],
    "overrides": [
    {
    "files": "*.astro",
    "options": {
    "parser": "astro",
    }
    }
    ]
    }
  3. 터미널에서 다음 명령을 실행하여 파일을 포맷팅합니다.

    터미널 창
    npx prettier . --write

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

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