エディタのセットアップ

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

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をセットアップするのか見る。

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

• 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パース、自動補完を提供します。

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

JetBrainsの次期IDEであるFleetは言語サーバーもサポートしているため、現在利用可能なツールはそこで問題なく動作するはずです。

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

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

ESLintはJavaScriptとJSX向けの人気のリンターです。Astro向けのサポートとしては、コミュニティがメンテナンスしているプラグインをインストールできます。

あなたのプロジェクトにESLintをインストールし設定するための詳細については、同プロジェクトのユーザーガイドを参照してください。

PrettierはJavaScript、HTML、CSSなどのための人気のフォーマッターです。.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を参照してください。