Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>Astro Developer PackNew to Visual Studio Code? Get it now.
Astro Developer Pack

Astro Developer Pack

九条涼果

|
8 installs
| (0) | Free
Recommended extensions for Astro developers
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Astro Developer Pack

This is a set of VSCode extensions that I (enihsyou) recommend installing for Astro project development.

Extension List

Extension ID Choose Reason Badges
astro-build.astro-vscode 🔗 Provides syntax highlighting and IntelliSense for Astro files. downloads rating
davidanson.vscode-markdownlint 🔗 Helps maintain consistent Markdown style with linting. downloads rating
dbaeumer.vscode-eslint 🔗 Integrates ESLint for JavaScript and TypeScript linting. downloads rating
editorconfig.editorconfig 🔗 Supports EditorConfig files to maintain consistent coding styles. Works well with Prettier. downloads rating
esbenp.prettier-vscode 🔗 Formats code using Prettier, ensuring a consistent code style. downloads rating
jock.svg 🔗 Support editing and previewing SVG files directly in VS Code. downloads rating
mattpocock.ts-error-translator 🔗 Learn TypeScript on the way with writing code. downloads rating
mikestead.dotenv 🔗 Provides syntax highlighting for .env files. downloads rating
oven.bun-vscode 🔗 Use Bun as the JavaScript runtime for Astro. downloads rating
unifiedjs.vscode-mdx 🔗 Adds support for MDX files, allowing JSX in Markdown. downloads rating
ms-vscode.wordcount 🔗 Counts words in Markdown files, useful for content management. downloads rating
yoavbls.pretty-ts-errors 🔗 Enhances TypeScript error messages with better formatting and readability. downloads rating

Only includes additionally required extensions; essential extensions are not listed here.

FAQ

Q: When do I need this extension pack?

A: There are multiple ways to control which extensions are enabled in a workspace in VSCode.

  1. Settings Sync is suitable for user-level global extension enable/disable control and cannot be precise to a single workspace.
  2. Manage Extension can enable/disable extensions for the current project, but it needs to be repeated for each project of the same type.
  3. Workspace Extension Recommendations are suitable for sharing single/same-type projects among teams, but they only suggest extensions and do not force installation and enablement.
  4. Extension Packs are suitable for distributing a set of extension recommendations for specific usage scenarios. Combined with the previous methods, they can achieve rapid control of extension sets for similar projects.
  5. Profiles recommend a set of configuration files for each project type, managed completely independently, and are the most powerful way. However, it is difficult to synchronize profile forks with each other (e.g., wanting to apply an extension to all profiles except a specific one).

I want to provide a recommended set of extensions for project development. When a user opens an Astro project in VSCode, for example, these extensions should be automatically enabled. Therefore, this extension pack was created. Disabling the extension pack for a workspace will synchronously disable all extensions listed in the pack, achieving batch management.

Q: Why not enable all extensions directly, but selectively enable them?

A: Simply put, for performance and experience. Although VSCode extensions now have rich lazy-loading activation conditions, there are still plugins that will automatically activate unconditionally when enabled. Also, some plugins are only needed at specific times. For example, not all projects will repeatedly use the Docker extension, but it automatically activates when it detects a Dockerfile in the workspace, then creates a toolbar, tries to connect to the Docker Host, and even pops up a notification if the connection fails. I don't want this kind of interruption.

Q: How to uninstall this extension pack without uninstalling all the extensions it references?

A: If you uninstall the extension pack directly in VSCode, it will also uninstall all the extensions it references. This is generally not the desired behavior, so this extension pack only includes additionally required extensions and excludes commonly used ones. Currently, VSCode does not and will not provide a feature to uninstall an extension pack without uninstalling its bundled extensions, but there is a manual workaround.

  1. Delete the $HOME/.vscode/extensions/enihsyou.astro-developer-pack-<version> folder
  2. Remove the entry for the extension pack from $HOME/.vscode/extensions/extensions.json

Other Information

  • Icon drawn using the Method Draw tool.

  • This extension pack is highly opinionated and is best used in a private publishing mode. However, until VSCode supports private extension repositories, it will be published with public visibility to the VSCode Marketplace for easy synchronization across multiple devices and automatic updates.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft