Astroを使った開発で実際に使っているVSCodeの拡張機能15選

プロフィール画像

かわにし

2024年12月10日

リンクをコピーXでシェアするfacebookでシェアする

この記事は「BEMA Lab Advent Calendar 2024Open in new tab」の10日目の記事です。

はじめに 

こんにちは!
この記事は「BEMA Advent Calendar2024」の10日目の記事として、Astroを使った開発に役立つVSCode拡張機能をご紹介します。

普段はフロントエンドエンジニア兼ディレクターとしてWebサイトの構築や運用の開発に携わっています。近年はJasmtack構成の開発に参画しており、この記事ではAstroを使った開発で実際に使っているVSCodeの拡張機能15選をご紹介します。
この記事が少しでも参考になれば嬉しいです。

結論

ご紹介する拡張機能は以下の通りです。

  1. Astro
  2. Prettier - Code formatter
  3. ESLint
  4. EditorConfig for VS Code
  5. Code Spell Checker
  6. Pretty TypeScript Errors
  7. indent-rainbow
  8. Rainbow CSV
  9. Pretty TypeScript Errors
  10. Output Colorizer
  11. WordCounter
  12. vscode-pdf
  13. Svg Preview
  14. Reload
  15. Markdown Preview Enhanced

すぐに試してみたい方は、以下の内容を.vscode/extensions.jsonに設定していただくと、拡張機能の「推奨」に全て表示されます。(イントール済みのものは表示されません。)

{
  "recommendations": [
    "astro-build.astro-vscode",
    "EditorConfig.EditorConfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker",
    "oderwat.indent-rainbow",
    "kirozen.wordcounter",
    "tomoki1207.pdf",
    "SimonSiefke.svg-preview",
    "natqe.reload",
    "mechatroner.rainbow-csv",
    "MylesMurphy.prettify-ts",
    "YoavBls.pretty-ts-errors",
    "IBM.output-colorizer",
    "shd101wyy.markdown-preview-enhanced",
  ]
}

導入必須

Astro

拡張機能ID:astro-build.astro-vscode

公式の拡張機能です。Astroを立ち上げると.vscode/extensions.jsonファイルにデフォルトで設定されています。
こちらの拡張機能が入っていなくてもAstroは動作しますが、拡張機能を入れておくことで.astroファイルに対してシンタックスハイライト表示されたり、TypeScript型情報が表示されるので入れない選択肢はありません。

Astro.js公式ドキュメント VS Code:https://docs.astro.build/ja/editor-setup/#vs-codeOpen in new tab

コード品質

続いて、コードの品質をあげるために導入している拡張機能をご紹介します。

Prettier - Code formatter

拡張機能ID:esbenp.prettier-vscode

コードフォーマット機能を持つPrettierの拡張機能です。
AstroでPrettierを使用するには以下のプラグインのインストールが必要です。

  • Prettierのプラグイン:prettier」
  • Astro用のプラグイン:prettier-plugin-astro

Astro.js公式ドキュメント Prettier:https://docs.astro.build/ja/editor-setup/#prettierOpen in new tab

ESLint

拡張機能ID:dbaeumer.vscode-eslint

リンター機能を持つESLintの拡張機能です。

EditorConfig for VS Code

拡張機能ID:EditorConfig.EditorConfig

EditorConfigの拡張機能です。
エディタの設定をカスタマイズできる機能があり、VSCode以外のエディタとの連携などで便利です。
settings.jsonにも設定できますが、editorconfingは設定が楽に書くことができるので使用しています。

Code Spell Checker

拡張機能ID:streetsidesoftware.code-spell-checker

英単語のスペルをチェックしてくれる機能です。誤ったスペルにはエラー表示をして、修正候補も定時するので便利です。
修正候補の出し方は、エラーにカーソルを当てると表示される「クイック フィック」を選択すると出てきます。

エラー表示にしたくないワードはワークスペースに登録することで、エラーから対象外にすることができます。
.vscode/settings.jsonで設定する場合は次のように設定します。

{
  "cSpell.words": ["ここに除外するワードを登録していきます"]
}

コードの可読性

コードを読みやすくするために導入している拡張機能をご紹介します。

Prettify TypeScript: Better Type Previews

拡張機能ID:MylesMurphy.prettify-ts

TypeScriptのエラーを見やすく表示する機能です。

▲導入前
▲導入前
▲導入後
▲導入後


indent-rainbow

拡張機能ID:oderwat.indent-rainbow

インデントごとに色を分けて表示する機能です。

▲導入前
▲導入前
▲導入後
▲導入後


Rainbow CSV

拡張機能ID:mechatroner.rainbow-csv

CSVを色を分けて表示する機能です。

▲導入前
▲導入前
▲導入後
▲導入後


Output Colorizer

拡張機能ID:IBM.output-colorizer

ターミナルの出力を見やすく表示する機能です。
表示イメージは公式ページをご参照ください。https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizerOpen in new tab

便利機能


WordCounter

拡張機能ID:kirozen.wordcounter

コードの文字数をカウントする機能です。「単語数・文字数・行数・段落数・推定読了時間」のカウントが可能です。
ファイル全体と、マウスで範囲を選択することでその範囲のみカウントすることも可能です。
カウントはVScodeの下側に表示されます。

表示をカスタマイズすることが可能で、文字カウントのみを表示させる場合はこのようになります。

{
  "wordcounter.side.left": ["char"],
  "wordcounter.text.char": "文字",
  "wordcounter.text.chars": "文字"
}

下記画像は「To get started」を選択しています。


vscode-pdf

拡張機能ID:tomoki1207.pdf

VSCode上でPDFが表示できる機能です。


Svg Preview

拡張機能ID:SimonSiefke.svg-preview

VSCode上でSVGが表示できる機能です。


Reload

拡張機能ID:natqe.reload

インストールするとVScodeの下側に「Reload」ボタンが追加されて、すぐにWindowのリロードをすることができる拡張機能です。


Markdown Preview Enhanced

拡張機能ID:shd101wyy.markdown-preview-enhanced

VSCode上でMarkdownのプレビューができる機能です。

気になる拡張機能

GitHub Copilot

拡張機能ID:GitHub.copilot

AIアシスタント機能をもつ拡張機能です。
コードやコミットメッセージが自動生成されるなど、開発者体験の向上に期待できます。使用には定額料金がかかるので、導入するメリットと比較して今後利用を検討しています。

VSCodeのアップデート

最新バージョンの拡張機能を使用する時や、インストールした拡張機能が反映されない時は、VSCodeのバージョンアップが必要な場合があります。
歯車ボタン > 更新の確認 > 再起動でアップデートして試してみてください。

この記事を書いた人

かわにし
かわにし
2021年メンバーズ入社。現在エンジニアとディレクターの二つの役割で日々奮闘中です。
ページトップへ戻る