Editor Setup

Customize your code editor to improve the Astro developer experience and unlock new features.

VS Code

VS Code is a popular code editor for web developers, built by Microsoft. The VS Code engine also powers popular in-browser code editors like GitHub Codespaces and Gitpod.

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 .astro files.
TypeScript type information for .astro files.
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.

Zed

Zed is an open-source code editor that added support for Astro in version 0.123.2. You can install the Astro extension in the IDE’s Extensions tab. This extension includes features like syntax highlighting, code completion, and formatting.

JetBrains IDEs

Webstorm is a JavaScript and TypeScript IDE that added support for the Astro Language Server in version 2024.2. This update brings features like syntax highlighting, code completion, and formatting.

Install the official plugin through JetBrains Marketplace or by searching for “Astro” in the IDE’s Plugins tab. You can toggle the language server in Settings | Languages & Frameworks | TypeScript | Astro.

For more information on Astro support in Webstorm, check out the official Webstorm Astro Documentation.

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
Emacs - See instructions for Configuring Emacs and Eglot Community to work with Astro
Astro syntax highlighting for Sublime Text Community - The Astro package for Sublime Text, available on the Sublime Text package manager.

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 .astro files. 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 tools

ESLint

ESLint is a popular linter for JavaScript and JSX. For Astro support, a community maintained plugin can be installed.

See the project’s User Guide for more information on how to install and set up ESLint for your project.

Stylelint

Stylelint is a popular linter for CSS. A community maintained Stylelint configuration provides Astro support.

Installation instructions, editor integration, and additional information can be found in the project’s README.

Prettier

Prettier is a popular formatter for JavaScript, HTML, CSS, and more. If you’re using the Astro VS Code Extension or the Astro language server within another editor, code formatting with Prettier is included.

To add support for formatting .astro files outside of the editor (e.g. CLI) or inside editors that don’t support our editor tooling, install the official Astro Prettier plugin.

Install prettier and prettier-plugin-astro.
- npm
- pnpm
- Yarn
Terminal window
npm install --save-dev prettier prettier-plugin-astro
Terminal window
pnpm add -D prettier prettier-plugin-astro
Terminal window
yarn add --dev prettier prettier-plugin-astro

Create a .prettierrc.mjs config file at the root of your project and add prettier-plugin-astro to it.

In this file, also manually specify the parser for Astro files.

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

Run the command prettier . --write in the terminal to format your files.
- npm
- pnpm
- Yarn
Terminal window
npx prettier . --write
Terminal window
pnpm exec prettier . --write
Terminal window
yarn prettier . --write

See the Prettier plugin’s README for more information about its supported options, how to set up Prettier inside VS Code, and more.

Contribute

Community