コンテンツにスキップ

エディタのセットアップ

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

VS Code

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

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

JetBrainsのIDE

セクションタイトル： JetBrainsのIDE

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

その他のコードエディタ

セクションタイトル： その他のコードエディタ

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

  • 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パース、自動補完を提供します。
  • Emacs - Astroと連携するためのEmacsとEglotの設定Communityの説明を参照してください。
  • Astro syntax highlighting for Sublime Text Community - Sublime Text用のAstroパッケージで、Sublime Textパッケージマネージャーから利用できます。

ブラウザ内エディタ

セクションタイトル： ブラウザ内エディタ

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

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

その他のツール

セクションタイトル： その他のツール

ESLint

セクションタイトル： ESLint

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

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

Stylelint

セクションタイトル： Stylelint

StylelintはCSSのための人気のリンターです。コミュニティが管理するStylelintの設定は、Astro向けのサポートを提供します。

インストール手順、エディタでの使い方、および追加情報は、プロジェクトのREADMEに記載されています。

Prettier

セクションタイトル： Prettier

PrettierはJavaScript、HTML、CSSなどのための人気のフォーマッターです。Astro VS Code拡張機能や他のエディタ内でAstro言語サーバーを使用している場合、Prettierによるコードのフォーマット機能は含まれています。

（CLIなど）エディタの外や、Astroのエディタツールをサポートしていないエディタ内で.astroファイルをフォーマットするためには、公式のAstro Prettierプラグインをインストールしてください。

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

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

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

Terminal window
prettier --write .

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