Brackets.io utgitt versjon 1.2 nylig, med noen flotte nye funksjoner som du kan lese om på bloggen deres. Vi har samlet en liste over 10 av de beste og mest nyttige Brackets-utvidelsene der ute (i ingen bestemt rekkefølge), sammen med komplette instruksjoner for hver utvidelse.
Brakettforlengelser
1.Code Folding
I motsetning til mange andre IDEer og kodeditorer har Brackets ikke et kodefeltalternativ som standard. Med Code Folding kan du enkelt kollapse store deler av koden din i en enkelt linje. Kodefeltforlengelsen er tilgjengelig på Github og fra Brackets forlengelsesleder.
Hvordan å bruke
For å kaste noen nestet tag klikker du bare på nedpilen til venstre for parent taggen som vist ovenfor. Samme prinsipp for Javascript eller et annet format. Bare klikk på nedpilen til venstre for overordnet elementet for å brette alle de nestede utsagnene inn i en linje. For å utvide, klikk bare på plustegnet.
Linjene på de brettede linjene er skjulte, så det er lett å se sammen foldede linjer når du konsentrerer deg om koden.
2. Lorem Pixel
Det er mange måter å generere plassholdertekst på, men fremre webutviklere trenger ofte plassholderbilder. I stedet for å prøve å lage et tomt plassholderbilde, bruk Lorem Pixel-utvidelsen. Den lar deg sette inn flotte plassholderbilder av hvilken som helst størrelse du vil ha. Den kule delen om Lorem Pixel er at den lar deg velge kategorien du vil ha et bilde fra.
Hvis det ikke er bra nok, fortsetter stedholderbildene hver gang du laster opp siden! Bilder kan ofte forstyrre fargeskjemaer, så Lorem Pixel gir deg også et "gråskala" alternativ for å bruke bare b / w plassholderbilder. Denne utvidelsen er drevet av lorempixel.com og er tilgjengelig fra Brackets Extensions Manager.
Hvordan å bruke
Når du har installert Lorem Pixel-utvidelsen, vises Lorem Pixel-logoen - et merket firkant - i utvidelsesruten (ruten til høyre med Live Preview-knappen). Klikk på logoen for å få opp en innstillingsboks. Angi ønsket bildeformat og ønsket bildekategori. Hvis du vil ha gråtonebilder, må du sjekke alternativet gråtoner. Kopier koplingen til utklippstavlen og bruk den som nødvendig eller sett inn i gjeldende markørposisjon.
3. Autoprefixer
Å legge til leverandør prefikser til koden din er drudgery. Autoprefixer-utvidelsen kan spare deg for mye tid (og mye arbeid!) Fordi det automatisk legger til de nødvendige leverandørprefiksetene til koden din. Det trenger ikke noen konfigurasjon, og oppdaterer prefikser hver gang du lagrer koden. Du kan også velge kode og automatisk prefiks det hvis du vil.
Hvordan å bruke
For å bruke Autoprefixer, bare begynn å skrive prefiksfri kode. Utvidelsen vil automatisk legge til prefikset kode så snart du lagrer. For å automatisk prefikse noen valgt kode, velg du først koden og deretter Rediger- fanen ⇒ Automatisk prefiksvalg.
Autoprefixer lar deg også legge til egendefinerte prefikser i sine innstillinger. For å gå til utvidelsesinnstillingene: Rediger ⇒ Autoprefixer Innstillinger.
For å ha en vakker, kaskad, prefikset kode, aktiver alternativet Visual cascade i utvidelsesinnstillingene.
4. Markdown Preview
Markdown er nydelig ren tekst-opptakspråk som lett kan konverteres til HTML. Markdown Preview gir den gjengitte Markdown like under tekstversjonen. Den lar deg velge mellom to forskjellige stilarter, Github Flavored Markdown og Standard Markdown.
Det er tre temaer du kan velge for forhåndsvisningsvinduet - Lys, Mørk og Klassisk. Markdown Preview har også et rullesynkroniseringsalternativ (aktivert som standard). Utvidelsen kan lastes ned fra Github eller fra Brackets Extensions Manager.
Hvordan å bruke
Åpne en .md eller en .markdown- fil. Hvis du har installert Markdown Preview, skal M ↓ -knappen vises til høyre. Klikk på den, og du vil se gjengitt Markdown. Hvis du vil endre temaet, eller deaktivere rullesynkronisering, klikker du bare på tannhjulikonet øverst til høyre i delen Markdown Preview.
5. Braketter Ikoner
Det er alltid morsomt å krydre kodeditoren din med filikoner. Brackets Ikoner legger til fargerike ikoner, basert på filtype, til alle filer som er oppført i sidelinjen. Den har ikoner for de fleste filtyper, og du kan legge inn ikonforespørsler på Github-siden.
Bonus Tips:
Brackets Ikoner bruker ikoner fra Ionicons prosjektet. Du kan også sjekke utvidelsesfilikonene (en gaffel i Brackets Icons-prosjektet) som bruker ikoner fra Font Awesome-prosjektet. Det koker ned til personlig preferanse til slutt.
Hvordan å bruke
Bare installer utvidelsen og last på nytt braketter (F5).
6. Dokumenter Verktøylinje
Braketter mangler faner. Vanlig og enkel fakta. Dokumenter Verktøylinjeutvidelsen legger til denne funksjonaliteten. Alle filer som er i den aktive delen av sidefeltet, vises som faner i denne utvidelsen. Du kan også skjule sidebjellet, og bruk bare Dokumenter-verktøylinjen for et fint grensesnitt.
Hvordan å bruke
Installer forlengelsen og sett på på nytt (F5).
7. Braketter Git
Alt prøver å integrere med Git disse dager; det er langt det mest populære versjonskontrollsystemet (VCS). Braketter Git er lett det beste blant lignende Brackets Extensions. Den har alle git-funksjonene du trenger. Du kan enkelt forplikte endringer fra selve parentesene, trykk og trekk endringer med ett enkelt klikk, se filhistorikk og total forlovelseshistorie også. Hvis du er god med Git, vil du ikke finne noen problemer med denne utvidelsen.
Merk: For å bruke Brackets Git må du ha Git installert på datamaskinen. Etter at du har installert utvidelsen, må du kanskje skrive inn banen til din Git-kjørbare fil (hvis den ikke er i standardbanen).
Hvordan å bruke
Bruke braketter Git er ganske rett frem. Gjør din lokale Github repo-mappe prosjektmappen i Brackets. Åpne deretter en fil, gjør noen endringer og lagre den. Deretter kan du gå videre og klikke på Git-ikonet til høyre og dette åpner Brackets Git-panelet nederst. Det vil liste eventuelle modifikasjoner du har gjort på filene dine.
Kontroller hvilke filer du vil begå, og klikk deretter på Commit-knappen. Dette åpner en popup som viser endringene som er gjort. Skriv inn meldingen din og klikk på OK. Og du har vellykket en fil å Git direkte fra Brackets!
Etter å ha begått, klikker du bare på trykknappen (det viser også antall uforsynte forpliktelser, som du kan se i GIF ovenfor).
Konfigurere innstillinger
Åpne Git-panelet Brackets, og klikk på Innstillinger-knappen (andre fra høyre). Du er velkommen til å konfigurere Brackets Git uansett, du liker det.
For å vise fil- og engasjementshistorikk
Bare klikk på de respektive knappene for å se din filhistorikk og forlovelseshistorie vakkert oppført. Nevnte vi at du kan bytte avataren til enten en svart og hvit avatar, en farget avatar eller Gravatar?
8. Lint ALLE SAKER
Lint ALLE ting. Alt. Denne utvidelsen liner alle filene dine på en gang. Veldig nyttig når du har et stort prosjekt med mange tilkoblede filer. Alle lintfeil vises pent i en rute.
Hvordan å bruke
For å bruke Lint ALL Things, bare gå til Vis- fanen og klikk på Lint hele prosjektet .
9. Braketter Todo
Brackets Todo er en fin liten utvidelse som viser alle TODO kommentarer i et pent listformat. Som standard støtter det 5 koder - TODO, NOTE, FIXME, CHANGES og FREMTID. Du kan også merke kommentarer som Ferdig. I visningsalternativene kan du filtrere kommentarer med koder. Brackets Todo lar deg definere egendefinerte farger for koder, så vel som dine egne koder, i tilfelle du ønsker å bli kreativ med dine kommentarer.
Hvis du jobber med et stort prosjekt, og trenger å holde oversikt over kommentarer fra flere filer, kan du endre omfanget av Brackets Todos søk. Vil du ekskludere noen filer og mapper som leverandørmapper? Ingen bekymringer. Legg bare til banen i ekskluderingslisten. Du kan tilpasse innstillingene for hvert prosjekt ved å legge til en .todo-fil i roteprosjektkatalogen.
Du kan gå gjennom alle innstillingsalternativene i github-dokumentasjonen.
Hvordan å bruke
For å bruke Brackets Todo, bare legg til en kommentar til koden din med en tag inni. Merkenavnet må være i stor bokstav, etterfulgt av et kolon (:). For å se alle Todos, klikker du bare på Todo-ikonet i høyre utvidelsesrute.
konfigurering:
- For å tillate Todo's for HTML-kommentarer: Bare åpne innstillingene - Klikk på Todo-ikonet → Innstillinger (girikon) - og klikk for å åpne .todo-filen. Til denne filen legger du til denne koden:
{"regex": {"prefix": "(? :)"}}
- For å endre søkeomfanget : Legg til denne koden i .todo-filen:
{"søk": {"scope": "mitt prosjekt"}} - For å ekskludere en fil / mappe / filtillegg fra søkeområdet: Legg til denne koden i .todo-filen:
{"søk": {"scope": "mitt prosjekt","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. beautify
Beautify gjør at koden din ser bra ut. Det løser mellomrom, innrykk og linjer.
Hvordan å bruke
Det er veldig enkelt å bruke Beautify. Alt du trenger å gjøre er å velge kode> Høyreklikk > Forsmykke .
Alternativt kan du gå over til Rediger- fanen og klikke på " Forsmykke ".
