Brackets.io udgivet version 1.2 for nylig, med nogle fantastiske nye funktioner, som du kan læse om på deres blog. Vi har udarbejdet en liste over 10 af de bedste og mest nyttige Brackets extensions derude (i ingen bestemt rækkefølge) sammen med komplette instruktioner for hver udvidelse.
Brackets Extensions
1.Code Folding
I modsætning til mange andre IDE'er og kodeditorer har Brackets ikke en standardkodeopsætning. Med Code Folding kan du nemt kollapse store dele af din kode til en enkelt linje. Kodefoldningsudvidelsen er tilgængelig på Github og fra Brackets extension manager.
Sådan bruges
Hvis du vil folde et indlejret tag, skal du blot klikke på pil ned til venstre for forælderkoden som vist ovenfor. Samme princip for Javascript eller et andet format. Bare klik på pil ned til venstre for overordnet element for at folde alle de indlejrede udsagn i en linje. For at udvide skal du blot klikke på plustegnet.
Linjens nummer på de foldede linjer er skjult, så det er let at se foldede linjer, når du koncentrerer dig om koden.
2. Lorem Pixel
Der er masser af måder at generere pladsholdertekst på, men front-end-webudviklere har ofte brug for pladsholderbilleder. I stedet for at forsøge at oprette et tomt pladsholderbillede, brug Lorem Pixel-udvidelsen. Det lader dig indsætte smukke pladsholderbilleder af enhver størrelse, du vil have. Den kolde del om Lorem Pixel er, at den lader dig vælge den kategori, hvorfra du vil have et billede.
Hvis det ikke er godt nok, ændrer pladsholderbillederne hver gang du genindlæser siden! Billeder kan ofte forstyrre farveskemaer, så Lorem Pixel giver dig også en "gråtoner" mulighed for kun at bruge b / w pladsholderbilleder. Denne udvidelse er drevet af lorempixel.com og er tilgængelig fra Brackets Extensions Manager.
Sådan bruges
Når du har installeret Lorem Pixel-udvidelsen, vises Lorem Pixel-logoet - en markeret kvadrat - i forlængelsesruden (ruden til højre med knappen Live Preview). Klik på logoet for at hente en indstillingsboks. Indstil din ønskede billedstørrelse og foretrukne billedkategori. Hvis du vil have gråtonebilleder, skal du kontrollere indstillingen gråtoner. Du kan enten kopiere linket til udklipsholder og bruge det som påkrævet eller indsætte i den aktuelle markørposition.
3. Autoprefixer
Tilføjelse af sælgerpræfikser til din kode er drudgery. Autoprefixer-udvidelsen kan spare dig for meget tid (og meget arbejde!), Fordi det automatisk tilføjer de nødvendige leverandørpræfikser til din kode. Det behøver ingen konfiguration, og opdaterer dine præfikser hver gang du gemmer din kode. Du kan også vælge kode og auto præfikset det, hvis du vil.
Sådan bruges
For at bruge Autoprefixer skal du først skrive præfiksfri kode. Udvidelsen vil automatisk tilføje præfikset kode, så snart du gemmer. For automatisk at prefikse nogle valgte kode skal du først vælge koden og derefter redigere fanen ⇒ Automatisk præfiksvalg.
Autoprefixer lader dig også tilføje brugerdefinerede præfikser i dens indstillinger. For at gå til udvidelsesindstillingerne: Rediger ⇒ Autoprefixer Indstillinger.
Hvis du vil have en smuk, kaskad, præfikset kode, skal du aktivere indstillingen Visual cascade i udvidelsesindstillingerne.
4. Markdown Preview
Markdown er dejligt plain-text markup sprog, der nemt kan konverteres til HTML. Markdown Preview giver den gengivne Markdown lige under tekstversionen. Det lader dig vælge mellem to forskellige stilarter, Github Flavored Markdown og Standard Markdown.
Der er tre temaer, du kan vælge for eksempelvinduet - Lys, Mørk og Klassisk. Markdown Preview har også en rulle synkronisering (aktiveret som standard). Udvidelsen kan downloades fra Github eller fra Brackets Extensions Manager.
Sådan bruges
Åbn en .md eller en .markdown- fil. Hvis du har installeret Markdown Preview, skal M ↓ knappen vises til højre. Klik på det, og du vil se gengivet Markdown. Hvis du vil ændre temaet eller deaktivere rullesynkronisering, skal du bare klikke på tandhjulsikonet øverst til højre i afsnittet Markdown Preview.
5. Brackets Ikoner
Det er altid sjovt at krydre din kodeditor med filikoner. Brackets Ikoner tilføjer farverige ikoner, baseret på filtype, til alle filer, der er angivet i sidelinjen. Det har ikoner for de fleste filtyper, og du kan sende ikonforespørgsler på Github-siden.
Bonus Tip:
Brackets Ikoner bruger ikoner fra Ionicons projektet. Du kan også tjekke udvidelsesfilikonerne (en gaffel i Brackets Icons-projektet), der bruger ikoner fra Font Awesome-projektet. Det koger ned til personlig præference i sidste ende.
Sådan bruges
Du skal blot installere udvidelsen og genindlæse parenteserne (F5).
6. Dokumenter Toolbar
Beslag mangler faner. Almindelig og simpel kendsgerning. Dokumenter Toolbar-udvidelsen tilføjer denne funktionalitet. Alle filer, der er i sektionen 'Aktiv' i sidefeltet, vises som faner i denne udvidelse. Du kan også skjule sidebjælken og bruge kun Dokumenter-værktøjslinjen til en god grænseflade.
Sådan bruges
Installer forlængelsen og genindlæs parenteserne (F5).
7. Beslag Git
Alt forsøger at integrere med Git i disse dage; Det er langt det mest populære Version Control System (VCS). Brackets Git er nemt det bedste blandt lignende Brackets Extensions. Det har alle de git funktioner du har brug for. Du kan nemt forpligte ændringer inden for parenteserne, skubbe og trække ændringer med et enkelt klik, se filhistorik og samlet commithistorik også. Hvis du er god med Git, vil du ikke finde nogen problemer med denne Extension.
Bemærk: For at bruge Brackets Git skal du have Git installeret på din computer. Når du har installeret udvidelsen, skal du muligvis indtaste stien til din Git-eksekverbare fil (hvis den ikke er i standardbanen).
Sådan bruges
Brug af parenteser Git er ret lige fremad. Lav din lokale Github repo mappe projektmappen i parenteser. Derefter åbner du en fil, foretager nogle ændringer og gemmer den. Derefter kan du gå videre og klikke på Git-ikonet til højre og dette åbner Brackets Git-panelet nederst. Det vil liste eventuelle ændringer, du har lavet til dine filer.
Kontroller, hvilke filer du vil begå, og klik derefter på kommandoen. Dette åbner en popup med notering af de foretagne ændringer. Indtast dit budskab og klik på OK. Og du har heldigvis begået en fil til Git direkte fra parenteser!
Efter at have begået klikker du blot på knappen (det viser også antallet af usynkroniserede forpligtelser, som du kan se i GIF ovenfor).
Konfiguration af indstillinger
Åbn Brackets Git rude, og klik på knappen Settings (andet fra højre). Du er velkommen til at konfigurere Brackets Git alligevel, du kan lide det.
For at få vist fil- og begivenhedshistorik
Du skal bare klikke på de respektive knapper for at se din filhistorik og begivenhedshistorie smukt opført. Har vi nævnt, at du kan ændre avataren til enten en sort og hvid avatar, en farvet avatar eller din Gravatar?
8. Lint alle ting
Lint ALLE ting. Alt. Denne udvidelse liner alle dine filer på én gang. Meget nyttigt, når du har et stort projekt med mange tilsluttede filer. Alle lintfejl dukker op pænt i en rude.
Sådan bruges
For at bruge Lint ALL Things, skal du bare gå til fanen Vis og klikke på Lint hele projektet .
9. Beslag Todo
Brackets Todo er en pæn lille udvidelse, der viser alle TODO kommentarer i et pænt listformat. Som standard understøtter den 5 tags - TODO, NOTE, FIXME, CHANGES og Future. Du kan også markere kommentarer som Udført. I visningsindstillingerne kan du filtrere kommentarer ved tags. Brackets Todo lader dig definere brugerdefinerede farver til tags såvel som dine egne tags, hvis du nogensinde vil blive kreativ med dine kommentarer.
Hvis du arbejder på et stort projekt, og skal holde styr på kommentarer fra flere filer, kan du ændre omfanget af Brackets Todos søgning. Vil du ekskludere nogle filer og mapper som sælgermapper? Ingen problemer. Tilføj blot stien i ekskluderingslisten. Du kan tilpasse indstillinger for hvert projekt ved at tilføje en .todo-fil i rodprojektmappen.
Du kan gennemgå alle indstillingerne i github-dokumentationen.
Sådan bruges
Hvis du vil bruge parenteser, skal du blot tilføje en kommentar til din kode med et tag indeni. Tagnavn skal være i store bogstaver efterfulgt af et kolon (:). For at se alle Todo'erne skal du blot klikke på Todo-ikonet i højre side af udvidelsen.
Konfiguration:
- For at tillade Todo's til HTML-kommentarer: Bare åbn indstillingerne - Klik på ikonet Todo → Indstillinger (gearikon) - og klik for at åbne .todo-filen. Til denne fil, tilføj denne kode:
{"regex": {"prefix": "(? :)"}}
- For at ændre søgeomfanget : Tilføj denne kode til .todo-filen:
{"search": {"scope": "mit projekt"}} - At udelukke enhver fil / mappe / filudvidelse fra søgeomfanget : Tilføj denne kode til .todo-filen:
{"search": {"scope": "mit projekt","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. Beautify
Beautify gør din kode ser godt ud. Det løser mellemrum, indrykning og linjer.
Sådan bruges
Det er meget nemt at bruge forskønne. Alt du skal gøre er at vælge en kode> Højreklik > Forsmøre .
Alternativt kan du gå over til fanen Rediger og klikke på ' Forsmøre '.
