Astroを使った開発で実際に使っているVSCodeの拡張機能15選
この記事は「BEMA Lab Advent Calendar 2024」の10日目の記事です。
はじめに
こんにちは!
この記事は「BEMA Advent Calendar2024」の10日目の記事として、Astroを使った開発に役立つVSCode拡張機能をご紹介します。
普段はフロントエンドエンジニア兼ディレクターとしてWebサイトの構築や運用の開発に携わっています。近年はJasmtack構成の開発に参画しており、この記事ではAstroを使った開発で実際に使っているVSCodeの拡張機能15選をご紹介します。
この記事が少しでも参考になれば嬉しいです。
結論
ご紹介する拡張機能は以下の通りです。
- Astro
- Prettier - Code formatter
- ESLint
- EditorConfig for VS Code
- Code Spell Checker
- Pretty TypeScript Errors
- indent-rainbow
- Rainbow CSV
- Pretty TypeScript Errors
- Output Colorizer
- WordCounter
- vscode-pdf
- Svg Preview
- Reload
- 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-code
コード品質
続いて、コードの品質をあげるために導入している拡張機能をご紹介します。
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/#prettier
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-colorizer
便利機能
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のバージョンアップが必要な場合があります。
歯車ボタン > 更新の確認 > 再起動でアップデートして試してみてください。
この記事を書いた人
Advent Calendar!
Advent Calendar 2024開催中!