Customize your code editor to improve the Astro developer experience and unlock new features.
VS CodeSection titled VS Code
Astro works with any code editor. However, VS Code is our recommended editor for Astro projects. We maintain an official Astro VS Code Extension that unlocks several key features and developer experience improvements for Astro projects.
- Syntax highlighting for
- TypeScript type information for
- VS Code Intellisense for code completion, hints and more.
To get started, install the Astro VS Code Extension today.
📚 See how to set up TypeScript in your Astro project.
Other Code EditorsSection titled Other Code Editors
Our amazing community maintains several extensions for other popular editors, including:
- VS Code Extension on Open VSX Official - The official Astro VS Code Extension, available on the Open VSX registry for open platforms like VSCodium
- Nova Extension Community - Provides syntax highlighting and code completion for Astro inside of Nova
- Vim Plugin Community - Provides syntax highlighting, indentation, and code folding support for Astro inside of Vim or Neovim
- Neovim LSP and TreeSitter Plugins Community - Provides syntax highlighting, treesitter parsing, and code completion for Astro inside of Neovim
JetBrains IDEsSection titled JetBrains IDEs
JetBrains’ upcoming Fleet IDE also supports language servers and therefore, our currently available tooling will be able to run there without any problem.
In-Browser EditorsSection titled In-Browser Editors
In addition to local editors, Astro also runs well on in-browser hosted editors, including:
- StackBlitz and CodeSandbox - online editors that run in your browser, with built-in syntax highlighting support for
.astrofiles. No installation or configuration required!
- GitHub.dev - allows you to install the Astro VS Code extension as a web extension, which gives you access to only some of the full extension features. Currently, only syntax highlighting is supported.
- Gitpod - a full dev environment in the cloud that can install the official Astro VS Code Extension from Open VSX.
Other toolsSection titled Other tools
ESLintSection titled ESLint
See the project’s User Guide for more information on how to install and set up ESLint for your project.
PrettierSection titled Prettier
To get started, first install Prettier and the plugin:
Prettier will then automatically detect the plugin and use it to process
.astro files when you run it:
See the Prettier plugin’s README for more information about its supported options, how to set up Prettier inside VS Code, and more.