Astro環境でPrettierを設定する手順

エディタをカスタマイズし、新機能を追加して開発者体験を向上させましょう。 VS CodeはMicrosoft社が開発した、web開発者に人気のあるコードエディタです。VS Codeのエンジンは GitHub Codespacesや Gitpod といった人気のあるブラウザ内コードエディタもサポートしています。 Astroはどのようなコードエディタでも動作しますが、VS CodeはAstroで開発する際におすすめのエディタです。 私たちはいくつかの重要な機能の追加と、開発者体験を向上させる公式の Astro VS Code拡張機能 をメンテナンスしています。 早速、 Astro VS Code拡張機能 をインストールしてみましょう。 📚 Astroプロジェクトでどのように TypeScriptをセットアップ するのか見る。 素晴らしいコミュニティが他の人気エディタ用の拡張機能をメンテナンスしています。 JetBrainsは、今後 Webstorm IDEでAstroをサポートすることを発表しました。 ロードマップ によると、Astroは2023年3月末の2023.1リリースでサポートされる予定です。 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とプラグインをインストールしましょう: これにより、Prettierは実行時にプラグインを自動的に認識し、.astro ファイルを処理します。 Prettierプラグインの対応オプション、VS Code内でのPrettierの設定方法などについては、 PrettierプラグインのREADME を参照してください。 pnpm との併用 Prettier内のアップストリームの問題により、 pnpm を使用した場合にはプラグインが自動的に認識されません。プラグインを認識させるためには、Prettierの実行時に以下のパラメータを付与する必要があります。 VS Code内でPrettierを使用する場合は、さらに追加の設定が必要です。詳しくはプラグインのREADMEを参照してください。