Configuration de l'éditeur de code

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

VS Code

Titre de la section 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 decode. Cependant, VS Code est l’éditeur que nous recommandons pour les projets Astro. Nous maintenons une extension Astro pour VS Code officielle 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.

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

Voir comment configurer TypeScript dans votre projet Astro.

Zed

Titre de la section Zed

Zed est un éditeur de code open-source qui a ajouté le support d’Astro dans la version 0.123.2. 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.

JetBrains IDEs

Titre de la section JetBrains IDEs

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 plugin 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

Titre de la section Autres éditeurs de code

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

• VS Code Extension on Open VSX Official - L’extension officielle Astro VS Code, disponible sur le registre Open VSX pour les plateformes ouvertes telles que VSCodium
• Nova Extension Community - Fournit la coloration syntaxique et la complétion de code pour Astro à l’intérieur de Nova
• Vim Plugin Community - Fournit la coloration syntaxique, l’indentation et le support de pliage de code pour Astro à l’intérieur de Vim ou Neovim.
• Neovim LSP and TreeSitter Plugins Community - Fournit la coloration syntaxique, l’analyse des repertoires et l’achèvement du code pour Astro dans Neovim.
• Emacs - Voir les instructions pour Configurer Emacs et Eglot Community pour travailler avec Astro
• Coloration syntaxique Astro pour Sublime Text Community - Le paquet Astro pour Sublime Text, disponible sur le gestionnaire de paquets de Sublime Text.

Éditeur de code “In-Browser”

Titre de la section Éditeur de code “In-Browser”

En plus des éditeurs locaux, Astro fonctionne aussi bien sur les éditeurs “In-Browser” hébergés, comme :

• StackBlitz et CodeSandbox - des éditeurs en ligne qui s’exécutent dans votre navigateur, avec un support intégré de coloration syntaxique pour les fichiers .astro. Aucune installation ou configuration n’est nécessaire !
• GitHub.dev) - vous permet d’installer l’extension Astro 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.
• Gitpod - un environnement de développement complet dans le nuage qui peut installer l’extension officielle Astro VS Code d’Open VSX.

Autres Outils

Titre de la section Autres Outils

ESLint

Titre de la section ESLint

ESLint est un linter populaire pour JavaScript et JSX. Pour la prise en charge d’Astro, un plugin 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

Titre de la section Stylelint

Stylelint est un linter populaire pour CSS. Une configuration Stylelint maintenue par la communauté fournit un support Astro.

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

Prettier

Titre de la section Prettier

Prettier est un formateur populaire pour JavaScript, HTML, CSS, et plus encore. Si vous utilisez Astro VS Code Extension ou le serveur de langage Astro dans un autre éditeur, le formatage du code avec Prettier est inclus.

Pour ajouter le support du formatage des fichiers .astro en dehors de l’éditeur (par exemple, CLI) ou dans des éditeurs qui ne supportent pas notre outil d’édition, installez le plugin officiel Astro Prettier.

1. Installez prettier et prettier-plugin-astro.

   npm

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

   pnpm

   pnpm add -D prettier prettier-plugin-astro

   Yarn

   yarn add --dev prettier prettier-plugin-astro

2. Créez un fichier de configuration .prettierrc.mjs à 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.

   .prettierrc.mjs

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

3. Exécutez la commande prettier . --write dans le terminal pour formater vos fichiers.

   npm

   npx prettier . --write

   pnpm

   pnpm exec prettier . --write

   Yarn

   yarn prettier . --write

Voir le README du plugin Prettier pour plus d’informations sur les options supportées, comment configurer Prettier dans VS Code, et plus encore.