Brackets.io ha rilasciato la versione 1.2 di recente, con alcune fantastiche nuove funzionalità che puoi leggere sul loro blog. Abbiamo compilato un elenco di 10 tra le migliori e più utili estensioni di Bracket disponibili (in nessun ordine particolare), insieme alle istruzioni complete per ogni estensione.
Estensioni delle parentesi
1.Codice di piegatura
A differenza di molti altri IDE e editor di codice, le parentesi non dispongono di un'opzione di piegatura del codice disponibile per impostazione predefinita. Con la funzione di piegatura del codice, puoi facilmente comprimere grandi porzioni del tuo codice in un'unica riga. L'estensione Piegatura codice è disponibile su Github e dal gestore estensione Brackets.
Come usare
Per piegare qualsiasi tag nidificato, fai clic sulla freccia giù a sinistra del tag principale come mostrato sopra. Lo stesso principio per Javascript o qualsiasi altro formato. Basta fare clic sulla freccia in giù a sinistra dell'elemento genitore per piegare tutte le istruzioni nidificate in una riga. Per espandere, fai semplicemente 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 un testo segnaposto, ma gli sviluppatori Web front-end spesso hanno bisogno di immagini segnaposto. Invece di provare a creare un'immagine segnaposto vuota, utilizza 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 è abbastanza buono, le immagini segnaposto continuano a cambiare ogni volta che ricarichi la pagina! Le immagini possono spesso infastidire le combinazioni di colori, quindi Lorem Pixel offre anche un'opzione "scala di grigi" per utilizzare solo immagini segnaposto in bianco e nero. Questa estensione è supportata da lorempixel.com ed è disponibile dal gestore delle estensioni delle parentesi.
Come usare
Una volta installata l'estensione Lorem Pixel, il logo Lorem Pixel, un quadratino selezionato, viene visualizzato nel riquadro delle estensioni (il riquadro a destra con il pulsante Anteprima dal vivo). Fare clic sul logo per visualizzare una finestra di impostazioni. Imposta la dimensione dell'immagine richiesta e la categoria di immagine preferita. Se si desidera ottenere immagini in scala di grigi, selezionare l'opzione Gradazioni di grigio. Copia il link negli appunti e usalo come richiesto o inseriscilo nella posizione corrente del cursore.
3. Autoprefixer
Aggiungere prefissi di venditore al tuo codice è faticoso. L'estensione Autoprefixer può farti risparmiare un sacco di tempo (e molto lavoro!) Perché aggiunge automaticamente i prefissi dei fornitori 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 prefisso automaticamente se lo desideri.
Come usare
Per utilizzare Autoprefixer, è sufficiente iniziare a scrivere codice senza prefisso. L'estensione aggiungerà automaticamente il codice prefissato non appena salvi. Per prefisso automatico del codice selezionato, selezionare prima il codice e poi la scheda Modifica ⇒ Selezione prefisso automatico.
Autoprefixer ti consente anche di aggiungere prefissi personalizzati nelle sue impostazioni. Per andare alle impostazioni dell'interno: Modifica ⇒ Impostazioni autoprefixer.
Per avere un codice prefissato bello, sovrapposto, abilitare l'opzione Cascata visiva nelle impostazioni dell'estensione.
4. Anteprima Markdown
Markdown è un bel linguaggio di markup in chiaro che è facilmente convertibile in HTML. Markdown Preview dà il Markdown reso proprio sotto la versione del testo. 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 scroll sync (abilitata di default). L'estensione può essere scaricata da Github o dal gestore delle estensioni delle parentesi.
Come usare
Aprire un file .md o .markdown . Se hai installato Markdown Preview, il pulsante M ↓ dovrebbe apparire a destra. Fare clic e vedrai Markdown reso. Per modificare il tema o disattivare la sincronizzazione dello scorrimento, fai clic sull'icona dell'ingranaggio nell'angolo in alto a destra della sezione Anteprima Markdown.
5. Icone dei sostegni
È sempre divertente ravvivare il tuo editor di codice con icone di file. Le icone dei sostegni aggiungono 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 postare richieste di icone sulla pagina Github.
Suggerimento bonus:
Le icone dei sostegni utilizzano le icone del progetto Ionicons. Puoi anche controllare l'estensione File Icons (un fork del progetto Icons Brackets) che usa 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 dei documenti
Le parentesi mancano le linguette. Fatto semplice e semplice. L'estensione della barra degli strumenti Documenti aggiunge questa funzionalità. Tutti i file che si trovano nella sezione "attiva" della barra laterale vengono visualizzati come schede in questa estensione. Puoi nascondere anche la barra laterale e utilizzare solo la barra degli strumenti Documenti per una bella interfaccia.
Come usare
Installa l'estensione e ricarica le staffe (F5).
7. Staffe Git
In questi giorni tutto cerca di integrarsi con Git; è di gran lunga il più diffuso sistema di controllo della versione (VCS). Parentesi Git è facilmente il migliore tra le estensioni di parentesi simili. Ha tutte le caratteristiche git di cui avrai bisogno. Puoi facilmente trasferire le modifiche da parentesi, inserire e modificare le modifiche con un solo clic, visualizzare la cronologia dei file e la cronologia totale dei commit. Se stai bene con Git, non troverai alcun problema con questa estensione.
Nota: per utilizzare le parentesi 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
Usare le parentesi Git è abbastanza semplice. Crea la tua cartella di repository Github locale nella cartella del progetto in Brackets. Quindi apri un file, apporta alcune modifiche e salvalo. Quindi puoi andare avanti e fare clic sull'icona Git sulla destra e questo aprirà il riquadro Git di Brackets in basso. Elencherà tutte le modifiche apportate ai tuoi file.
Verifica quali file vuoi impegnare, quindi fai clic sul pulsante Conferma. Questo aprirà un popup che elenca le modifiche apportate. Inserisci il tuo messaggio di commit e fai clic su Ok. E hai commesso correttamente un file su Git direttamente da Brackets!
Dopo aver premuto, fai clic sul pulsante (mostra anche il numero di commit non sincronizzati, come puoi vedere nella GIF sopra).
Configurazione delle impostazioni
Apri il riquadro Git delle parentesi e fai clic sul pulsante Impostazioni (in secondo luogo a destra). Sentiti libero di configurare Bracket Git comunque ti piace.
Per visualizzare la cronologia di file e commit
Basta fare clic sui rispettivi pulsanti per visualizzare la cronologia dei file e la cronologia dei commit splendidamente elencati. Abbiamo già detto che puoi cambiare l'avatar con un avatar in bianco e nero, un avatar colorato o il tuo Gravatar?
8. Lint TUTTE le cose
Lint TUTTE le cose. Qualunque cosa. Questa estensione contiene tutti i tuoi file in un colpo solo. Molto utile quando si dispone di un progetto di grandi dimensioni con molti file collegati. Tutti gli errori di sfilacciamento si presentano bene in un riquadro.
Come usare
Per usare Lint ALL Things, vai alla scheda View e fai clic su Lint whole Project .
9. Staffe Todo
Parentesi Todo è un'estensione piccola e ordinata che mostra tutti i commenti TODO in un formato ordinato. Di default, supporta 5 tag: TODO, NOTE, FIXME, CHANGE e FUTURE. Puoi anche contrassegnare i commenti come Fatto. Nelle opzioni di visualizzazione è possibile filtrare i commenti per tag. Parentesi Todo ti consente di definire colori personalizzati per i tag e anche i tuoi stessi tag, nel caso tu voglia mai essere creativo con i tuoi commenti.
Se stai lavorando su un progetto di grandi dimensioni e hai bisogno di tenere traccia dei commenti da più file, puoi modificare l'ambito della ricerca dei Bracci di Todo. Vuoi escludere alcuni file e cartelle come le cartelle del venditore? Nessun problema. Basta aggiungere il percorso nell'elenco di esclusione. È possibile personalizzare le impostazioni per ciascun progetto aggiungendo un file .todo nella directory del progetto root.
Puoi consultare tutte le opzioni di impostazione nella documentazione di github.
Come usare
Per utilizzare i brackets Todo, aggiungi un commento al tuo codice con un tag all'interno. Il nome del tag deve essere in maiuscolo, seguito da due punti (:). Per visualizzare tutti i Todo, fai clic sull'icona Todo nel riquadro di estensione a destra.
Configurazione:
- Per consentire commenti Todo per HTML: basta aprire le impostazioni - Fare clic sull'icona di Todo → Impostazioni (icona dell'ingranaggio) - e fare clic per aprire il file. A questo file, aggiungi questo codice:
{"regex": {"prefisso": "(? :)"}}
- Per modificare l'ambito di ricerca: aggiungi questo codice al file .todo:
{"search": {"scope": "il mio progetto"}} - Per escludere qualsiasi estensione file / cartella / file dall'ambito di ricerca: aggiungi questo codice al file .todo:
{"search": {"scope": "il mio progetto","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. Abbellisci
Beautify rende il tuo codice un bell'aspetto. Corregge spazi, indentazione e linee.
Come usare
È molto facile usare Beautify. Tutto quello che devi fare è selezionare un codice> Fare clic destro > Abbellisci .
In alternativa, puoi andare alla scheda Modifica e fare clic su " Abbellisci ".
