10 fantastiche estensioni per staffe di cui hai davvero bisogno

Brackets.io ha recentemente rilasciato la versione 1.2, con alcune fantastiche nuove funzionalità di cui puoi leggere sul loro blog. Abbiamo compilato un elenco di 10 delle migliori e più utili estensioni di Brackets disponibili (in nessun ordine particolare), insieme a istruzioni complete per ciascuna estensione.

Estensioni staffe

1.Codice pieghevole

A differenza di molti altri IDE ed editor di codice, Brackets non ha un’opzione di piegatura del codice disponibile per impostazione predefinita. Con Code Folding, puoi facilmente comprimere grandi porzioni del tuo codice in un’unica riga. L’estensione Code Folding è disponibile su Github e dal gestore estensioni Brackets.

Se volete continuare a leggere questo post su "10 fantastiche estensioni per staffe di cui hai davvero bisogno" cliccate sul pulsante "Mostra tutti" e potrete leggere il resto del contenuto gratuitamente. ebstomasborba.pt è un sito specializzato in Tecnologia, Notizie, Giochi e molti altri argomenti che potrebbero interessarvi. Se desiderate leggere altre informazioni simili a 10 fantastiche estensioni per staffe di cui hai davvero bisogno, continuate a navigare sul web e iscrivetevi alle notifiche del blog per non perdere le ultime novità.

Seguir leyendo


Come usare

Per piegare qualsiasi tag nidificato basta fare clic sulla freccia giù a sinistra del tag principale come mostrato sopra. Stesso principio per Javascript o qualsiasi altro formato. Basta fare clic sulla freccia giù a sinistra dell’elemento genitore per raggruppare tutte le istruzioni nidificate in una riga. Per espandere, basta fare clic sul segno più.

I numeri di riga delle linee piegate sono nascosti, quindi è facile individuare le linee piegate quando ci si concentra sul codice.

2. Lorem Pixel

Esistono molti modi per generare testo segnaposto, ma gli sviluppatori Web front-end spesso hanno bisogno di immagini segnaposto. Invece di provare a creare un’immagine segnaposto vuota, usa l’estensione Lorem Pixel. Ti consente di inserire splendide immagini segnaposto di qualsiasi dimensione desideri. La parte interessante di Lorem Pixel è che ti consente di scegliere la categoria da cui desideri un’immagine.

Se ciò non bastasse, le immagini segnaposto continuano a cambiare ogni volta che ricarichi la pagina! Le immagini possono spesso sconvolgere le combinazioni di colori, quindi Lorem Pixel ti offre anche un’opzione “scala di grigi” per utilizzare solo immagini segnaposto in bianco e nero. Questa estensione è alimentata da lorempixel.com ed è disponibile dal gestore delle estensioni Brackets. Usando LoremPixel

Come usare

Una volta installata l’estensione Lorem Pixel, il logo Lorem Pixel, un quadrato controllato, viene visualizzato nel riquadro dell’estensione (il riquadro a destra con il pulsante Anteprima dal vivo). Fare clic sul logo per visualizzare una finestra delle impostazioni. Imposta la dimensione dell’immagine richiesta e la categoria di immagine preferita. Se vuoi immagini in scala di grigi, controlla l’opzione scala di grigi. Copia il link negli appunti e usalo come richiesto o inseriscilo nella posizione corrente del cursore.

3. Prefisso automatico

L’aggiunta di prefissi del fornitore al codice è faticosa. L’estensione Autoprefixer può farti risparmiare molto tempo (e molto lavoro!) perché aggiunge automaticamente i prefissi del fornitore richiesti al tuo codice. Non ha bisogno di alcuna configurazione e aggiorna i tuoi prefissi ogni volta che salvi il tuo codice. Puoi anche selezionare il codice e aggiungerlo automaticamente al prefisso, se lo desideri.

Come usare

Per utilizzare Autoprefixer, inizia a scrivere codice senza prefisso. L’estensione aggiungerà automaticamente il codice prefissato non appena si salva. Per prefissare automaticamente un codice selezionato, selezionare prima il codice e poi la scheda Modifica ⇒ Selezione prefisso automatica.

Autoprefixer ti consente anche di aggiungere prefissi personalizzati nelle sue impostazioni. Per andare alle impostazioni dell’estensione: Modifica ⇒ Impostazioni prefisso automatico.

Per avere un codice bello, a cascata, con prefisso, abilita l’opzione Cascata visiva nelle impostazioni dell’estensione.

4. Anteprima Markdown

Markdown è un bel linguaggio di markup in testo semplice facilmente convertibile in HTML. L’anteprima di Markdown fornisce il Markdown renderizzato proprio sotto la versione testuale. Ti consente di scegliere tra due diversi stili, Github Flavored Markdown e Standard Markdown.

Ci sono tre temi che puoi scegliere per la finestra di anteprima: Chiaro, Scuro e Classico. Markdown Preview ha anche un’opzione di sincronizzazione dello scorrimento (abilitata per impostazione predefinita). L’estensione può essere scaricata da Github o dal gestore delle estensioni Brackets.

Come usare

Apri un file .md o .markdown. Se hai installato Markdown Preview, il pulsante M ↓ dovrebbe apparire sulla destra. Fai clic e vedrai Markdown reso. Per cambiare il tema o disabilitare la sincronizzazione dello scorrimento, fai clic sull’icona a forma di ingranaggio nell’angolo in alto a destra della sezione Anteprima Markdown.

5. Icone delle parentesi graffe

È sempre divertente ravvivare il tuo editor di codice con le icone dei file. Brackets Icons aggiunge icone colorate, in base al tipo di file, a tutti i file elencati nella barra laterale. Ha icone per la maggior parte dei tipi di file e puoi pubblicare richieste di icone sulla pagina Github.

Suggerimento bonus:

Brackets Icons utilizza le icone del progetto Ionicons. Puoi anche controllare l’estensione File Icons (un fork del progetto Brackets Icons) che utilizza le icone del progetto Font Awesome. Alla fine si riduce alle preferenze personali.

Come usare

Basta installare l’estensione e ricaricare le staffe (F5).

6. Barra degli strumenti Documenti

Parentesi prive di linguette. Fatto puro e semplice. L’estensione Documents Toolbar aggiunge questa funzionalità. Tutti i file che si trovano nella sezione “attiva” della barra laterale vengono visualizzati come schede in questa estensione. Puoi anche nascondere la barra laterale e utilizzare solo la barra degli strumenti Documenti per una bella interfaccia.

Come usare

Installare l’estensione e ricaricare le staffe (F5).

7. Parentesi Git

Tutto cerca di integrarsi con Git in questi giorni; è di gran lunga il sistema di controllo della versione (VCS) più popolare. Brackets Git è facilmente il migliore tra estensioni di staffe simili. Ha tutte le funzionalità git di cui avrai bisogno. Puoi facilmente eseguire il commit delle modifiche all’interno delle parentesi stesse, eseguire il push e il pull delle modifiche con un solo clic, visualizzare anche la cronologia dei file e la cronologia totale dei commit. Se sei bravo con Git, non troverai alcun problema con questa estensione.

Nota: per utilizzare Brackets Git è necessario che Git sia installato sul computer. Dopo aver installato l’estensione, potrebbe essere necessario inserire il percorso del file eseguibile Git (se non si trova nel percorso predefinito).

Come usare

Commit di un file usando Brackets Git

Usare le parentesi Git è piuttosto semplice. Rendi la tua cartella del repository Github locale la cartella del progetto tra parentesi. Quindi apri un file, apporta alcune modifiche e salvalo. Quindi puoi andare avanti e fare clic sull’icona Git a destra e questo aprirà il riquadro Parentesi Git in basso. Elencherà tutte le modifiche che hai apportato ai tuoi file.

Seleziona i file che desideri salvare, quindi fai clic sul pulsante Commit. Si aprirà un popup che elenca le modifiche apportate. Inserisci il tuo messaggio Commit e fai clic su Ok. E hai eseguito correttamente il commit di un file su Git direttamente da Brackets!

Dopo aver effettuato il commit basta fare clic sul pulsante (mostra anche il numero di commit non sincronizzati, come puoi vedere nella GIF sopra).

Configurazione delle impostazioni

Apri il riquadro Brackets Git e fai clic sul pulsante Impostazioni (il secondo da destra). Sentiti libero di configurare Brackets Git come preferisci.

Per visualizzare la cronologia dei file e dei commit

Basta fare clic sui rispettivi pulsanti per visualizzare la cronologia dei file e la cronologia dei commit splendidamente elencate. Abbiamo già detto che puoi cambiare l’avatar in un avatar in bianco e nero, un avatar colorato o il tuo Gravatar? Commit storia

8. Lint TUTTE le cose

Lint TUTTE le cose. Qualunque cosa. Questa estensione filtra tutti i tuoi file in una volta sola. Molto utile quando hai un progetto di grandi dimensioni con molti file collegati. Tutti gli errori di lint vengono visualizzati correttamente in un riquadro.

Come usare

Per utilizzare Lint ALL Things, vai alla scheda Visualizza e fai clic su Lint whole Project .

9. Parentesi Todo

Parentesi Todo è una piccola estensione ordinata che mostra tutti i commenti TODO in un formato elenco ordinato. Per impostazione predefinita, supporta 5 tag: TODO, NOTE, FIXME, CHANGES e FUTURE. Puoi anche contrassegnare i commenti come Completati. Nelle opzioni di visualizzazione puoi filtrare i commenti per tag. Brackets Todo ti consente di definire colori personalizzati per i tag e anche i tuoi tag, nel caso in cui desideri essere creativo con i tuoi commenti.

Se stai lavorando a un progetto di grandi dimensioni e devi tenere traccia dei commenti di più file, puoi modificare l’ambito della ricerca di Brackets Todo. Vuoi escludere alcuni file e cartelle come le cartelle dei fornitori? Nessun problema. Basta aggiungere il percorso nell’elenco di esclusione. Puoi personalizzare le impostazioni per ciascun progetto aggiungendo un file .todo nella directory principale del progetto.

Puoi esaminare tutte le opzioni delle impostazioni nella documentazione di github.

Come usare

Per utilizzare Brackets Todo, aggiungi semplicemente un commento al tuo codice con un tag all’interno. Il nome del tag deve essere in maiuscolo, seguito da due punti (:). Per visualizzare tutte le attività, fai clic sull’icona Attività nel riquadro dell’estensione a destra.

Configurazione:

  • Per consentire Todo’s per i commenti HTML: Basta aprire le impostazioni – Fare clic sull’icona Todo → Impostazioni (icona a forma di ingranaggio) – e fare clic per aprire il file .todo. A questo file, aggiungi questo codice:
     { " regex " : { " prefisso " : " (?:) " } }

    Come appare il menu delle impostazioni di Todo

  • Per modificare l’ambito di ricerca: aggiungi questo codice al file .todo:
     { " search " : { " scope " : "my project " } }
  • Per escludere qualsiasi estensione di file/cartella/file dall’ambito di ricerca: Aggiungi questo codice al file .todo:
     { "ricerca" : { " ambito " : "il mio progetto " ,

    ” escludiCartelle ” : [ “tuacartella ” ]

     " excludeFiles " : [ "yourfile " ] "excludeFiles": [ ".yourextension"] } }

10. Abbellisci

Beautify rende il tuo codice più bello. Corregge spazi, rientri e linee.

Come usare

È molto facile usare Beautify. Tutto quello che devi fare è selezionare un codice > Tasto destro > Abbellisci .

In alternativa, puoi andare alla scheda Modifica e fare clic su ” Abbellisci “.

GUARDA ANCHE: 20 migliori consigli di Emmet per aiutarti a codificare HTML/CSS in modo pazzesco

Torna in alto