エディタのセットアップ
エディタをカスタマイズし、新機能を追加して開発者体験を向上させましょう。
VS Code
Section titled VS CodeVS 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をセットアップするのか見る。
その他のコードエディタ
Section titled その他のコードエディタ素晴らしいコミュニティが他の人気エディタ用の拡張機能をメンテナンスしています。
- 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パース、自動補完を提供します。
JetBrainsのIDE
Section titled JetBrainsのIDEWebStorm 2023.1にAstroの初期サポートが追加されました(現在はアーリーアクセスです)。JetBrains Marketplaceか、IDEのプラグインタブで「Astro」と検索して公式のプラグインをインストールすることで、シンタックスハイライト、コード補完、フォーマットなどの機能を利用できます。今後はさらに高度な機能が追加される予定です。他のすべてのJavaScriptをサポートしているJetBrainsのIDEでも利用可能です。
JetBrainsの次期IDEであるFleetは言語サーバーもサポートしているため、現在利用可能なツールはそこで問題なく動作するはずです。
ブラウザ内エディタ
Section titled ブラウザ内エディタローカルエディタに加え、Astroはブラウザで動作するオンラインエディタでもきちんと動作します。
- StackBlitzとCodeSandbox - ブラウザ上で動作するオンラインエディタで、
.astro
ファイル用のシンタックスハイライトをサポートしています。設定やインストールは不要です。 - GitHub.dev - Web ExtentionsとしてAstro VS Code拡張機能をインストールでき、拡張機能の一部をフルに利用できるようになります。現在のところ、シンタックスハイライトのみをサポートしています。
- Gitpod - Open VSXから公式のAstro VS Code拡張機能をインストールできるクラウド上のフル開発環境です。
その他のツール
Section titled その他のツールESLint
Section titled ESLintESLintはJavaScriptとJSX向けの人気のリンターです。Astro向けのサポートとしては、コミュニティがメンテナンスしているプラグインをインストールできます。
あなたのプロジェクトにESLintをインストールし設定するための詳細については、同プロジェクトのユーザーガイドを参照してください。
Prettier
Section titled PrettierPrettierは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を参照してください。