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

エディタをカスタマイズし、新機能を追加して開発者体験を向上させましょう。

VS Code

VS CodeはMicrosoft社が開発した、web開発者に人気のあるコードエディタです。VS CodeのエンジンはGitHub CodespacesやGitpodといった人気のあるブラウザ内コードエディタもサポートしています。

Astroはどのようなコードエディタでも動作しますが、VS CodeはAstroで開発する際におすすめのエディタです。 私たちはいくつかの重要な機能の追加と、開発者体験を向上させる公式のAstro VS Code拡張機能をメンテナンスしています。

  • .astroファイルのシンタックスハイライト
  • .astroファイルのTypeScript型情報
  • VS Code Intellisenseによるコード補完、ヒントなど

早速、Astro VS Code拡張機能をインストールしてみましょう。

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

AstroプロジェクトでどのようにTypeScriptをセットアップするのか見る。

Zed

Zedはオープンソースのコードエディタで、バージョン0.123.2でAstroのサポートが追加されました。IDEの「拡張機能」タブからAstro extensionをインストールできます。この拡張機能には、構文のハイライト、コード補完、フォーマットなどの機能が含まれています。

JetBrainsのIDE

WebStormはJavaScriptとTypeScriptに対応したIDEで、バージョン2024.2でAstro Language Serverのサポートが追加されました。このアップデートでは、構文のハイライト、コード補完、フォーマットなどの機能が追加されています。

公式プラグインはJetBrains Marketplaceから、またはIDEの"Plugins"タブで"Astro"を検索してインストールしてください。言語サーバーの切り替えは Settings | Languages & Frameworks | TypeScript | Astro で行えます。

WebStormでのAstroサポートの詳細については、公式のWebStorm Astro Documentationを参照してください。

その他のコードエディタ

素晴らしいコミュニティが他の人気エディタ用の拡張機能をメンテナンスしています。

  • VS Code Extension on Open VSX - VSCodiumのようなオープンプラットフォーム向けのOpen VSX Registryで利用可能な公式のAstro VS Code拡張機能です。
  • Nova Extension - Nova向けにAstro用シンタックスハイライトや自動補完を提供します。
  • Vim Plugin - VimとNeovim向けにAstro用シンタックスハイライトやインデント、コードの折りたたみを提供します。
  • Neovim LSPとTreeSitter Plugins - Neovim向けにAstro用シンタックスハイライトやtreesitterパース、自動補完を提供します。
  • Emacs - Astroと連携するためのEmacsとEglotの設定の説明を参照してください。
  • Astro syntax highlighting for Sublime Text - Sublime Text用のAstroパッケージで、Sublime Textパッケージマネージャーから利用できます。

ブラウザ内エディタ

ローカルエディタに加え、Astroはブラウザで動作するオンラインエディタでもきちんと動作します。

  • StackBlitzとCodeSandbox - ブラウザ上で動作するオンラインエディタで、.astroファイル用のシンタックスハイライトをサポートしています。設定やインストールは不要です。
  • GitHub.dev - Web ExtensionsとしてAstro VS Code拡張機能をインストールでき、一部の機能のみ利用できるようになります。現在のところ、シンタックスハイライトのみをサポートしています。
  • IDXとGitpod – Open VSXから公式Astro VS Code拡張機能をインストールできるクラウドIDEです。

その他のツール

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ファイルをフォーマットするためには、公式の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. フォーマットを実行するには、以下のコマンドをターミナルで実行してください。

<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プラグインの対応オプション、VS Code内でのPrettierの設定方法などについては、PrettierプラグインのREADMEを参照してください。

レイアウト
はじめに