Configurazione dell'Editor

Personalizza il tuo editor di testo per migliorare l’esperienza di sviluppo di Astro e sbloccare nuove funzionalità.

VS Code

VS Code è un popolare editor di testo per i sviluppatori web, ideato da Microsoft. Il motore di VS Code alimenta anche i famosi editor di testo all’interno dei browser come GitHub Codespaces e Gitpod.

Astro funziona con qualsiasi editor di testo. Però, VS Code è l’editor di testo che consigliamo. Noi manteniamo un’estensione Astro per VS Code ufficiale che sblocca diverse caratteristiche chiave e miglioramenti dell’esperienza dello sviluppatore per i progetti Astro.

Evidenziazione della sintassi dei file .astro.
Informazioni sui tipi di TypeScript per i file .astro.
VS Code Intellisense per il completamento del codice, suggerimenti e altro.

Per cominciare, installa l’estensione Astro VS Code oggi.

Guarda come configurare TypeScript (EN) nel tuo progetto Astro.

Gli IDE di JetBrains

Il supporto iniziale per Astro è arrivato da WebStorm a Gennaio 2023. Puoi installare il plugin ufficiale attraverso JetBrains Marketplace oppure cercando “Astro” nella tab dei plugin dell’IDE. Questo plugin include proprietà come l’evidenziazione della sintassi, il completamento del codice e la formattazione, e in futuro ha intenzione di aggiungere anche funzionalità più avanzate. Il plugin è disponibile anche per tutti gli altri JetBrains IDEs con il supporto di JavaScript.

Altri Editor di Testo

La nostra magnifica community mantiene diverse estensioni per altri editor popolari, compresi:

VS Code Extension on Open VSX Official - L’estensione ufficale di Astro su VS Code Extension, disponibile sul registro Open VSXper piattaforme libere come VSCodium
Nova Extension Community - Fornisce l’evidenziazione della sintassi e il completamento del codice per Astro all’interno di Nova
Vim Plugin Community - Fornisce l’evidenziazione della sintassi, indentazione, e il supporto per il ripiegamento del codice per Astro all’insterno di Vim o Neovim
Neovim LSP e TreeSitter Plugins Community - Fornisce l’evidenziazione della sintassi, treesitter parsing, e il completamento del codice per Astro all’interno di Neovim
Emacs - Consulta le instruzioni per Configurare Emacs ed Eglot Community per lavorare con Astro
Evidenziazione della sintassi di Astro per Sublime Text Community - Il pacchetto Astro per Sublime Text, disponibile sul gestore di pacchetti di Sublime Text.

Editor all’interno dei Browser

Oltre agli editor locali, Astro funziona bene anche in quelli ospitati nei browser, compresi:

StackBlitz e CodeSandbox - editor che si possono utilizzare online e che vengono eseguiti nel tuo browser, con annesso il supporto per l’evidenziazione della sintassi per i file .astro. Nessuna installaszione o configurazione sono necessarie!
GitHub.dev - ti permette di installare l’estensione Astro VS Code come un’estensione web, che ti permette l’accesso solo ad alcune delle proprietà dell’estensione completa. Al giorno d’oggi, solo l’evidenziazione della sintassi è supportata.
Gitpod - un ambiente di sviluppo completo nel cloud che può installare l’estensione ufficiale Astro VS Code da Open VSX.

Altri strumenti

ESLint

ESLint è un linter famoso per JavaScript e JSX. Per il supporto per Astro, un plugin mantenuto dalla community può essere installato.

Vedi la Guida per l’utente del progetto per maggiori informazioni su come installare e configurare ESlint per il tuo progetto.

Stylelint

Stylelint è un linter famoso per CSS. Una configuarazione Stylelint mantenuta dalla community fornisce il supporto per Astro.

Le istruzioni per l’installaszione, l’integrazine dell’editor, e altre informazioni aggiuntive possono essere trovate all’interno del file README del progetto.

Prettier

Prettier è un famoso formatter per JavaScript, HTML, CSS, ed altro. Se usi l’estensione Astro VS Code oppure il server di lingua Astro all’interno di un’altro editor, Prettier include la formattazione.

Per aggiungere il supporto per la formattazione dei file .astro al di fuori degli editor (per esempio CLI) o all’interno degli editor che non supportano gli strumenti per il nostro editor, installa il plugin ufficiale Astro Prettier.

Per iniziare, prima installa Prettier ed il plugin:

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

pnpm add -D prettier prettier-plugin-astro

yarn add --dev prettier prettier-plugin-astro

Prettier rivelerà automaticamente il plugin e lo userà per processare i file .astro quando esegui:

prettier --write .

Vedi README del plugin di Prettier per maggiori informazionis ulle opzioni supportate, come configurare Prettier all’interno di VS Code, e altro.

Contribuisci

Comunità