10 Awesome Brackets Extensions du verkligen behöver

2019

Brackets.io släppte version 1.2 nyligen, med några bra nya funktioner som du kan läsa om på deras blogg. Vi har sammanställt en lista med 10 av de bästa och mest användbara Brackets-utvidgningarna där ute (i ingen särskild ordning), tillsammans med fullständiga instruktioner för varje förlängning.

Brackets Extensions

1.Code Folding

Till skillnad från många andra IDE och kodredigerare har parentes inte ett kodvalsalternativ som standard. Med kodflikning kan du enkelt kollapsera stora delar av din kod till en enda rad. Kodfoldningsförlängningen är tillgänglig på Github och från Brackets extension manager.

Hur man använder

För att kasta någon nestad tagg klickar du bara på nedpilen till vänster om parent taggen som visas ovan. Samma princip för Javascript eller något annat format. Klicka bara på nedpilen till vänster om moderelementet för att lägga alla nestade uttalanden i en rad. För att expandera, klicka bara på plustecknet.

Linjens nummer på de veckade linjerna är dolda, så det är lätt att se vikta linjer när du koncentrerar dig på koden.

2. Lorem Pixel

Det finns många sätt att generera platshållartekst, men främre webbutvecklare behöver ofta platshållare bilder. Istället för att försöka skapa en blank platshållare bild, använd Lorem Pixel-förlängningen. Det låter dig infoga underbara platshållare bilder av vilken storlek du vill ha. Den snygga delen om Lorem Pixel är att den låter dig välja den kategori som du vill ha en bild från.

Om det inte är tillräckligt nog, ändras platsbilderna varje gång du laddar om sidan! Bilder kan ofta störa färgscheman, så Lorem Pixel ger dig också ett "gråskala" alternativ för att bara använda b / w platshållningsbilder. Denna förlängning drivs av lorempixel.com och är tillgänglig från Brackets Extensions Manager.

Använda Lorem Pixel

Hur man använder

När du har installerat Lorem Pixel-förlängningen visas Lorem Pixel-logotypen - en rutad kvadrat - i förlängningsfönstret (rutan till höger med knappen Live Preview). Klicka på logotypen för att få fram en inställningsruta. Ange önskad bildstorlek och önskad bildkategori. Om du vill ha gråskala bilder, kolla alternativet gråskala. Kopiera länken till urklippet och använd den efter behov eller sätt in den aktuella markörpositionen.

3. Autoprefixer

Lägga till leverantörs prefix till din kod är drudgery. Autoprefixer-förlängningen kan spara mycket tid (och mycket arbete!) Eftersom det automatiskt lägger till de nödvändiga leverantörs prefixen till din kod. Det behöver ingen konfiguration, och uppdaterar dina prefix varje gång du sparar koden. Du kan också välja kod och auto prefix det om du vill.

Hur man använder

För att använda Autoprefixer, börja bara skriva prefix-fri kod. Utvidgningen kommer automatiskt att lägga till prefixad kod så snart du sparar. För att automatiskt prefixa vissa valda koder väljer du först koden och sedan Redigera fliken ⇒ Auto prefix val.

Autoprefixer låter dig också lägga till egna prefix i dess inställningar. För att gå till förlängningsinställningarna: Redigera ⇒ Autoprefixer-inställningar.

För att ha en vacker kaskad prefixad kod, aktivera alternativet Visuell kaskad i tilläggsinställningarna.

4. Markdown Preview

Markdown är en härlig plain-text markup språk som enkelt kan konverteras till HTML. Markdown Preview ger den gjorda Markdown precis under textversionen. Det låter dig välja mellan två olika stilar, Github Flavored Markdown och Standard Markdown.

Det finns tre teman du kan välja för förhandsgranskningsfönstret - Ljus, Mörk och Klassisk. Markdown Preview har också ett scroll synkroniseringsalternativ (aktiverat som standard). Utvidgningen kan laddas ner från Github eller från Brackets Extensions Manager.

Hur man använder

Öppna en .md eller en .markdown- fil. Om du har installerat Markdown Preview, ska knappen M ↓ visas till höger. Klicka på den, och du kommer att se gjorda Markdown. Om du vill ändra temaet eller inaktivera rullningssynkronisering klickar du bara på kugghjulsikonen längst upp till höger i avsnittet Markdown Preview.

5. Fästen Ikoner

Det är alltid roligt att krydda din kodredigerare med filikoner. Brackets Ikoner lägger till färgglada ikoner, baserat på filtyp, till alla filer som anges i sidofältet. Den har ikoner för de flesta filtyper, och du kan lägga till ikonförfrågningar på Github-sidan.

Bonus Tips:

Brackets Ikoner använder ikoner från Ionicons-projektet. Du kan också kolla in filnamnens förlängningsfil (en gaffel i Brackets Icons-projektet) som använder ikoner från Font Awesome-projektet. Det kokar ner till personliga preferenser i slutet.

Hur man använder

Installera bara förlängningen och ladda om fästena (F5).

6. Dokumentverktygsfält

Fästen saknar flikar. Vanligt och enkelt faktum. Utvidgningen av dokumentverktygsfält lägger till den här funktionaliteten. Alla filer som finns i avsnittet "Aktiv" i sidofältet visas som flikar i den här utvidgningen. Du kan också gömma sidofältet och använda endast verktygsfältet för ett bra gränssnitt.

Hur man använder

Installera förlängningen och ladda om fästena (F5).

7. Fästen Git

Allt försöker integrera med Git dessa dagar; Det är överlägset det mest populära Version Control System (VCS). Fästen Git är lätt det bästa bland liknande fästenförlängningar. Den har alla git-funktioner du behöver. Du kan enkelt begå ändringar inom hakparentes själv, tryck och dra ändringar med ett enda klick, se filhistorik och sammanlagd engagemangshistoria. Om du är bra med Git, hittar du inga problem med denna Extension.

Obs! För att använda Brackets Git behöver du ha Git installerat på din dator. Efter installationen av tillägget kan du behöva ange sökvägen till din Git-körbara fil (om den inte finns i standardvägen).

Hur man använder

Föra en fil med parentes Git

Använda fästen Git är ganska rakt framåt. Gör din lokala Github repo-mapp i projektmappen i parenteser. Öppna sedan en fil, gör några ändringar och spara den. Sedan kan du gå vidare och klicka på Git-ikonen till höger och det här öppnar fönstret Gitets Git längst ner. Det kommer att lista alla ändringar du har gjort i dina filer.

Kontrollera vilka filer du vill begå, och klicka sedan på Commit-knappen. Detta öppnar en popup med de ändringar som gjorts. Ange ditt meddelande och klicka på Ok. Och du har framgångsrikt begått en fil att Git direkt från parenteser!

Efter att ha begåtts klickar du bara på tryckknappen (det visar också antalet osynliga förpliktelser, som du kan se i GIF ovan).

Konfigurera inställningar

Öppna fönstret Gitets Git och klicka på knappen Inställningar (andra från höger). Gärna konfigurera fästen Git ändå du gillar det.

Visa fil- och förlovningshistorik

Klicka bara på respektive knapp för att se din filhistorik och förbigående historia på ett vackert sätt. Nämnde vi att du kan byta avatar till en svartvit avatar, en färgad avatar eller din Gravatar?

Commit History

8. Lint alla saker

Lint ALLA saker. Allt. Denna förlängning liner alla dina filer på en gång. Mycket hjälpsam när du har ett stort projekt med många anslutna filer. Alla lintfel dyker upp snyggt i en ruta.

Hur man använder

För att använda Lint ALL Things, gå till fliken Visa och klicka på Lint hela projektet .

9. Fästen Todo

Brackets Todo är en snygg liten förlängning som visar alla TODO kommentarer i ett snyggt listformat. Som standard stöder den 5 taggar - TODO, NOTE, FIXME, CHANGES och Future. Du kan också markera kommentarer som gjort. I visningsalternativen kan du filtrera kommentarer med taggar. Brackets Todo kan du definiera anpassade färger för taggar samt dina egna taggar också, om du någonsin vill bli kreativ med dina kommentarer.

Om du arbetar med ett stort projekt, och behöver hålla reda på kommentarer från flera filer, kan du ändra omfattningen av Brackets Todos sökning. Vill du utesluta några filer och mappar som leverantörsmappar? Inga problem. Lägg bara till sökvägen i exkluderingslistan. Du kan anpassa inställningarna för varje projekt genom att lägga till en .todo-fil i rotprojektkatalogen.

Du kan gå igenom alla inställningsalternativ i githubdokumentationen.

Hur man använder

För att använda Brackets Todo, lägg bara till en kommentar till din kod med en tagg inuti. Taggen måste vara i stor bokstav, följt av ett kolon (:). För att visa alla Todos, klicka bara på ikonen Todo i den högra utvidgningsrutan.

Konfigurera:

För att tillåta Todos HTML-kommentarer: Öppna bara inställningarna - Klicka på ikonen Todo → Inställningar (växelsymbol) - och klicka för att öppna .todo-filen. Till den här filen lägger du till den här koden:
```
 {"regex": {"prefix": "(? :)"}} 
```
Hur inställningsmenyn för Todo ser ut
Ändra sökomfattning : Lägg till den här koden i .todo-filen:
```
 {"search": {"scope": "mitt projekt"}} 
```
Så här utesluter du fil / mapp / filtillägg från sökområdet: Lägg till den här koden i .todo-filen:
```
 {"search": {"scope": "mitt projekt", 
```
"ExcludeFolders": ["yourfolder"]
```
 "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}} 
```