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. |
  |
| davidanson.vscode-markdownlint 🔗 |
Helps maintain consistent Markdown style with linting. |
  |
| dbaeumer.vscode-eslint 🔗 |
Integrates ESLint for JavaScript and TypeScript linting. |
  |
| editorconfig.editorconfig 🔗 |
Supports EditorConfig files to maintain consistent coding styles. Works well with Prettier. |
  |
| esbenp.prettier-vscode 🔗 |
Formats code using Prettier, ensuring a consistent code style. |
  |
| jock.svg 🔗 |
Support editing and previewing SVG files directly in VS Code. |
  |
| mattpocock.ts-error-translator 🔗 |
Learn TypeScript on the way with writing code. |
  |
| mikestead.dotenv 🔗 |
Provides syntax highlighting for .env files. |
  |
| oven.bun-vscode 🔗 |
Use Bun as the JavaScript runtime for Astro. |
  |
| unifiedjs.vscode-mdx 🔗 |
Adds support for MDX files, allowing JSX in Markdown. |
  |
| ms-vscode.wordcount 🔗 |
Counts words in Markdown files, useful for content management. |
  |
| yoavbls.pretty-ts-errors 🔗 |
Enhances TypeScript error messages with better formatting and readability. |
  |
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.
- Settings Sync is suitable for user-level global extension enable/disable control and cannot be precise to a single workspace.
- Manage Extension can enable/disable extensions for the current project, but it needs to be repeated for each project of the same type.
- 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.
- 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.
- 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.
- Delete the
$HOME/.vscode/extensions/enihsyou.astro-developer-pack-<version> folder
- Remove the entry for the extension pack from
$HOME/.vscode/extensions/extensions.json
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.
