Skip to content
yazilimrehberi.dev

Editor Settings

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

VS Code

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

Astro works with any code editor, but we recommend VS Code for Astro projects. We have an official Astro VS Code Extension that unlocks various essential features and enhances the developer experience for Astro projects, including:

  • Syntax highlighting for .astro files.
  • TypeScript type information for .astro files.
  • Code completion, hints, and more with VS Code Intellisense.

To get started, install the Astro vs Code Extension today.

JetBrains IDE

The first support for Astro came with WebStorm 2023.1. You can install the official extension through the JetBrains Marketplace or by searching for ‘Astro’ in the IDE’s Extensions tab. This extension includes features such as syntax highlighting, code completion, and formatting, with plans for even more advanced features in the future. It can also be used by all other JetBrains IDEs that have JavaScript support, available here.

JetBrains’ upcoming Fleet IDE will include language server support and will be able to use official Astro tools.

Other Editors

Our fantastic community has various extensions for other popular editors, including:

  • VS Code Extension on Open VSX (Official Extension) - The official Astro VS Code Extension available in 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

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.

To get started, first install Prettier and the plugin:

Terminal window
npm install --save-dev prettier prettier-plugin-astro

Prettier will then automatically detect the plugin and use it to process .astro files when you run it:

Terminal window
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.