import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

Personnalisez votre éditeur de code pour améliorer l'expérience de développement avec Astro et débloquer de nouvelles fonctionnalités.

VS Code

VS Code est un éditeur de code populaire pour les développeurs web, conçu par Microsoft. Le moteur de VS Code alimente également des éditeurs de code populaires dans le navigateur comme GitHub Codespaces et Gitpod.

Astro fonctionne avec n'importe quel éditeur de code. Cependant, VS Code est l'éditeur que nous recommandons pour les projets Astro. Nous maintenons une extension Astro officielle pour VS Code qui débloque plusieurs fonctionnalités clés et améliore l'expérience des développeurs pour les projets Astro.

• Coloration syntaxique pour les fichiers .astro.
• Informations sur le typage TypeScript pour les fichiers .astro.
• Intellisense VS Code pour l'autocomplétion, les suggestions et plus encore.

Pour commencer, installez l'extension Astro pour VS Code dès maintenant.

import ReadMore from '~/components/ReadMore.astro';

Découvrez comment configurer TypeScript dans votre projet Astro.

Zed

Zed est un éditeur de code open source hautement performant. Vous pouvez installer l'extension Astro dans l'onglet Extensions de l'IDE. Cette extension inclut des fonctionnalités telles que la coloration syntaxique, la complétion de code et le formatage.

Les IDE de JetBrains

Webstorm est un IDE JavaScript et TypeScript qui a ajouté la prise en charge d'Astro Language Server dans la version 2024.2. Cette mise à jour apporte des fonctionnalités telles que la coloration syntaxique, la saisie semi-automatique du code et la mise en forme.

Installez le module d'extension officiel via le marketplace de JetBrains ou en recherchant « Astro » dans l'onglet Plugins de l'IDE. Vous pouvez activer/désactiver le serveur de langue dans Settings | Languages & Frameworks | TypeScript | Astro.

Pour plus d'informations sur la prise en charge d'Astro dans Webstorm, consultez la page Astro dans la documentation officielle de Webstorm.

Autres éditeurs de code

Notre incroyable communauté gère plusieurs extensions pour d'autres éditeurs populaires, notamment :

• Extension VS Code sur Open VSX - L'extension Astro officielle pour VS Code, disponible dans le registre Open VSX pour les éditeurs tels que Cursor et VSCodium
• Module d'extension Vim - Fournit la coloration syntaxique, l'indentation et la prise en charge du repli de code pour Astro à l'intérieur de Vim ou Neovim.
• Modules d'extension LSP et TreeSitter pour Neovim - Fournit la coloration syntaxique, l'analyse des répertoires et la complétion du code pour Astro dans Neovim.
• Emacs - Voir les instructions pour configurer Emacs et Eglot pour fonctionner avec Astro
• Coloration syntaxique Astro pour Sublime Text - Le paquet Astro pour Sublime Text, disponible dans le gestionnaire de paquets de Sublime Text.
• Extension Nova - Fournit la coloration syntaxique et la complétion de code pour Astro à l'intérieur de Nova

Éditeur de code dans le navigateur

En plus des éditeurs locaux, Astro fonctionne également bien dans les éditeurs hébergés dans le navigateur, notamment :

• StackBlitz et CodeSandbox - des éditeurs en ligne qui s'exécutent dans votre navigateur, avec prise en charge intégrée de la coloration syntaxique pour les fichiers .astro. Aucune installation ou configuration n'est nécessaire !
• GitHub.dev - vous permet d'installer l'extension Astro pour VS Code en tant qu'extension web, ce qui ne vous donne accès qu'à certaines des fonctionnalités complètes de l'extension. Actuellement, seule la coloration syntaxique est prise en charge.
• IDX et Gitpod - un environnement de développement complet dans le cloud qui peut installer l'extension officielle Astro pour VS Code depuis Open VSX.

Autres outils

ESLint

ESLint est un linter populaire pour JavaScript et JSX. Pour la prise en charge d'Astro, un module d'extension maintenu par la communauté peut être installé.

Voir le guide de l'utilisateur du projet pour plus d'informations sur l'installation et la configuration d'ESLint pour votre projet.

Stylelint

Stylelint est un linter populaire pour CSS. Une configuration Stylelint maintenue par la communauté fournit la prise en charge d'Astro.

Les instructions d'installation, l'intégration à l'éditeur et d'autres informations sont disponibles dans le README du projet.

Biome

Biome est un linter et un formateur tout-en-un pour le web. Biome dispose actuellement d'une prise en charge partielle pour les fichiers .astro, et peut être utilisé pour analyser et formater le frontmatter dans les fichiers .astro.

Prettier

Prettier est un formateur populaire pour JavaScript, HTML, CSS, et plus encore. Si vous utilisez l'extension Astro pour VS Code, le formatage du code avec Prettier est inclus.

Pour ajouter la prise en charge du formatage des fichiers .astro en dehors de l'éditeur (par exemple, la CLI) ou dans des éditeurs qui ne prennent pas en charge notre outil d'édition, installez le module d'extension officiel Prettier d'Astro.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npm install --save-dev --save-exact prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add --save-dev --save-exact prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add --dev --exact prettier prettier-plugin-astro ``` </Fragment> </PackageManagerTabs>

2. Créez un fichier de configuration .prettierrc.mjs (ou .prettierrc.json, .prettierrc.mjs, ou dans d'autres formats pris en charge) à la racine de votre projet et ajoutez-y prettier-plugin-astro.

Dans ce fichier, vous pouvez également spécifier manuellement l'analyseur pour les fichiers Astro. ```json title=".prettierrc" { "plugins": ["prettier-plugin-astro"], "overrides": [ { "files": "*.astro", "options": { "parser": "astro", }, }, ], }; ```

3. En option, installez d’autres modules d'extension Prettier pour votre projet et ajoutez-les au fichier de configuration. Ces modules d'extension supplémentaires devront peut-être être listés dans un ordre spécifique. Par exemple, si vous utilisez Tailwind, prettier-plugin-tailwindcss doit être le dernier module d'extension Prettier dans le tableau des modules d'extension.

```json title=".prettierrc" { "plugins": [ "prettier-plugin-astro", "prettier-plugin-tailwindcss" // doit être le dernier ], "overrides": [ { "files": "*.astro", "options": { "parser": "astro" } } ] } ```

4. Exécutez la commande suivante dans votre terminal pour formater vos fichiers.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx prettier . --write ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec prettier . --write ``` </Fragment> <Fragment slot="yarn"> ```shell yarn exec prettier . --write ``` </Fragment> </PackageManagerTabs>

Consultez le fichier README du module d'extension Prettier pour plus d'informations sur les options prises en charge, comment configurer Prettier dans VS Code, et plus encore.

dprint

dprint est un formateur de code hautement configurable prenant en charge de nombreux langages, dont JavaScript, TypeScript, CSS, etc. La prise en charge des fichiers .astro peut être ajoutée à l'aide du module d'extension markup_fmt.