エディタのセットアップ

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

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拡張機能をインストールしてみましょう。

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

WebStorm 2023.1にAstroの初期サポートが追加されました。JetBrains Marketplaceか、IDEのプラグインタブで「Astro」と検索して公式のプラグインをインストールできます。このプラグインにはシンタックスハイライト、コード補完、フォーマットなどの機能が含まれており、今後はさらに高度な機能が追加される予定です。他のすべてのJavaScriptをサポートしているJetBrainsのIDEでも利用可能です。

JetBrainsの次期IDEであるFleetは言語サーバーをサポートしているため、公式のAstroツールを利用できるようになります。

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

• VS Code Extension on Open VSX Official - VSCodiumのようなオープンプラットフォーム向けのOpen VSX Registryで利用可能な公式のAstro VS Code拡張機能です。
• Nova ExtensionCommunity - Nova向けにAstro用シンタックスハイライトや自動補完を提供します。
• Vim Plugin Community - VimとNeovim向けにAstro用シンタックスハイライトやインデント、コードの折りたたみを提供します。
• Neovim LSPとTreeSitter Plugins Community - Neovim向けにAstro用シンタックスハイライトやtreesitterパース、自動補完を提供します。

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

• StackBlitzとCodeSandbox - ブラウザ上で動作するオンラインエディタで、.astroファイル用のシンタックスハイライトをサポートしています。設定やインストールは不要です。
• GitHub.dev - Web ExtentionsとしてAstro VS Code拡張機能をインストールでき、拡張機能の一部をフルに利用できるようになります。現在のところ、シンタックスハイライトのみをサポートしています。
• Gitpod - 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ファイルをフォーマットするためには、公式のAstro Prettierプラグインをインストールしてください。

まず、Prettierとプラグインをインストールしましょう:

npm install --save-dev prettier prettier-plugin-astro

pnpm install -D prettier prettier-plugin-astro

yarn add --dev prettier prettier-plugin-astro

これにより、Prettierは実行時にプラグインを自動的に認識し、.astroファイルを処理します。

prettier --write .

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