Salta ai contenuti

Configurazione dell'Editor

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

VS Code

Sezione intitolata 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 nel tuo progetto Astro.

Gli IDE di JetBrains

Sezione intitolata 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

Sezione intitolata 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

Sezione intitolata 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

Sezione intitolata Altri strumenti

ESLint

Sezione intitolata 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

Sezione intitolata 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

Sezione intitolata 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:

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

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

Terminal window
prettier --write .

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