10 fantastiske brakettutvidelser du virkelig trenger

Brackets.io ga ut versjon 1.2 nylig, med noen gode 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 spesiell rekkefølge), sammen med komplette instruksjoner for hver utvidelse.

Brackets Extensions

1.Kode Sammenleggbar

I motsetning til mange andre IDE-er og kodeditorer, har Brackets ikke et alternativ som kan klappes sammen som standard. Med kodefalsing kan du enkelt slå sammen store deler av koden i en enkelt linje. Code Folding-utvidelsen er tilgjengelig på Github og fra Brackets-utvidelsessjefen.

Hvordan å bruke

Hvis du vil brette en hvilken som helst nestet kode, klikker du bare på pil ned til venstre for overordnet kode som vist over. Samme prinsipp for Javascript eller andre formater. Bare klikk på pil ned til venstre for overordnet element for å brette alle nestede utsagn i en linje. For å utvide, klikker du bare på pluss-tegnet.

Linjenumrene til de brettede linjene er skjult, så det er lett å få øye på brettede linjer når du konsentrerer deg om koden.

2. Lorem Pixel

Det er mange måter å generere plasseringstekst på, men frontend-webutviklere trenger ofte plassholderbilder. I stedet for å prøve å lage et tomt plassholderbilde, bruk Lorem Pixel-utvidelsen. Den lar deg sette inn nydelige plassholderbilder i alle størrelser du ønsker. 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, vil plassholderbildene stadig endre seg hver gang du legger inn siden på nytt! Bilder kan ofte forstyrre fargevalg, så Lorem Pixel gir deg også et 'gråtoner' -alternativ for å kun bruke svart / hvitt plassholderbilder. Denne utvidelsen drives av lorempixel.com og er tilgjengelig fra Brackets extensions manager. Bruker Lorem Pixel

Hvordan å bruke

Når du har installert Lorem Pixel-utvidelsen, vises Lorem Pixel-logoen - et merket firkant - i forlengelsesruten (ruten til høyre med Live Preview-knappen). Klikk på logoen for å få opp en innstillingsboks. Angi ønsket bildestørrelse og ønsket bildekategori. Hvis du vil ha bilder i gråtoner, sjekk alternativet for gråtoner. Enten kopier du lenken til utklippstavlen og bruk den etter behov, eller sett den inn i gjeldende markørposisjon.

3. Autoprefixer

Å legge leverandørprefikser til koden din er drudgery. Autoprefixer-utvidelsen kan spare deg for mye tid (og mye arbeid!) Fordi den automatisk legger de nødvendige leverandørprefikser til koden. Den trenger ikke noen konfigurasjon, og oppdaterer prefiksene dine hver gang du lagrer koden. Du kan også velge kode og automatisk prefiks hvis du vil.

Hvordan å bruke

Hvis du vil bruke Autoprefixer, er det bare å begynne å skrive prefiks-kode. Utvidelsen vil automatisk legge til prefiks kode så snart du lagrer. Hvis du vil automatisk prefiksere noen valgt kode, velger du først koden og deretter Redigere tab Selection Valg av automatisk prefiks.

Autoprefixer lar deg også legge til tilpassede prefikser i innstillingene. Slik går du til utvidelsesinnstillingene: Redigere ⇒ Innstillinger for autoprefixer.

Hvis du vil ha vakker, kaskadet, forhåndsinnstilt kode, aktiverer du Visuell kaskade alternativet i utvidelsesinnstillingene.

4. Forhåndsvisning av markdown

Markdown er nydelig markeringsspråk for ren tekst som lett kan konverteres til HTML. Markdown Preview gir den gjengitte Markdown rett under tekstversjonen. Den lar deg velge mellom to forskjellige stiler, Github Flavored Markdown og Standard Markdown.

Det er tre temaer du kan velge for forhåndsvisningsvinduet - Lys, mørk og klassisk. Forhåndsvisning av markering har også et rullesynkroniseringsalternativ (aktivert som standard). Utvidelsen kan lastes ned fra Github eller fra Brackets extensions manager.

Hvordan å bruke

Åpne a .md eller .Markdown fil. Hvis du har installert Markdown Preview, vil M ↓  knappen skal vises til høyre. Klikk på den, så ser du gjengitt Markdown. For å endre temaet eller deaktivere rullesynkronisering, klikker du bare på tannhjulikonet øverst til høyre i Markdown Preview-delen..

5. Brakets ikoner

Det er alltid morsomt å krydre kodeditoren din med filikoner. Brackets Icons legger til fargerike ikoner, basert på filtype, til alle filene som er oppført i sidefeltet. Den har ikoner for de fleste filtyper, og du kan legge ut ikonforespørsler på Github-siden.

Bonus Tips:

Brackets Icons bruker ikoner fra Ionicons-prosjektet. Du kan også sjekke utvidelsen File Icons (en gaffel fra 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 inn brakettene (F5).

6. Dokumenter verktøylinje

Braketter mangler faner. Vanlig og enkelt faktum. Documents Toolbar-utvidelsen legger til denne funksjonaliteten. Alle filer som er i den "aktive" delen av sidefeltet vises som faner i denne utvidelsen. Du kan skjule sidefeltet også, og bare bruke Documents Toolbar for et fint grensesnitt.

Hvordan å bruke

Installer utvidelsen og legg inn brakettene (F5).

7. Braketter Git

Alt prøver å integrere seg med Git i disse dager; det er det desidert mest populære versjonskontrollsystemet (VCS). Brackets Git er lett best blant lignende Brackets Extensions. Den har alle git-funksjonene du trenger. Du kan enkelt begå endringer innen parentes, skyve og trekke endringer med et enkelt klikk, se filhistorikk og total forpliktelseshistorikk også. Hvis du har det bra med Git, vil du ikke finne noen problemer med denne utvidelsen.

Merk: For å bruke Brackets Git må du ha Git installert på datamaskinen din. Etter å ha installert utvidelsen, kan det hende du må angi banen til den Git-kjørbare filen (hvis den ikke er i standardstien).

Hvordan å bruke Begår en fil ved hjelp av Brackets Git

Å bruke Brackets Git er ganske rett frem. Lag din lokale Github-repo-mappe til prosjektmappen i parentes. Åpne deretter en fil, gjør noen endringer og lagre den. Så kan du gå videre og klikke på Git-ikonet til høyre, og dette vil åpne opp Brackets Git-ruten nederst. Den viser alle endringer du har gjort i filene dine.

Sjekk hvilke filer du vil bruke, og klikk deretter på Forplikt-knappen. Dette vil åpne en popup som viser endringene som er gjort. Skriv inn Commit-meldingen og klikk på Ok. Og du har gitt en fil til Git direkte fra Brackets!

Etter å ha begått, klikker du bare på trykknappen (den viser også antall usynkroniserte forpliktelser, som du kan se i GIF ovenfor).

Konfigurere innstillinger 

Åpne Brackets Git-ruten, og klikk på Innstillinger-knappen (andre fra høyre). Konfigurer gjerne Brackets Git uansett hvor du vil.

For å se fil- og engasjementshistorikk

Bare klikk på de respektive knappene for å se filhistorikken og forpliktelseshistorien vakkert oppført. Nevnte vi at du kan endre avataren til enten en svart og hvit avatar, en farget avatar eller din Gravatar? Forplikt historien

8. FLE ALLE ting

Lint ALLE tingene. Alt. Denne utvidelsen lenser alle filene dine på en gang. Veldig nyttig når du har et stort prosjekt med mange tilkoblede filer. Alle lofri vises fint i en rute.

Hvordan å bruke

For å bruke Lint ALL Things, bare gå til Utsikt  fane og klikk Løve hele prosjektet.

9. Braketter Todo

Brackets Todo er en fin liten utvidelse som viser alle TODO-kommentarer i et pent listeformat. Som standard støtter den 5 koder - TODO, MERK, FIXME, ENDRE og FREMTID. Du kan også merke kommentarer som ferdig. I visningsalternativene kan du filtrere kommentarer etter tagger. Brackets Todo lar deg definere tilpassede farger for tagger så vel som dine egne koder også, i tilfelle du noen gang vil bli kreativ med kommentarene dine.

Hvis du jobber med et stort prosjekt, og trenger å følge med på 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. Bare legg til banen i ekskluderingslisten. Du kan tilpasse innstillinger for hvert prosjekt ved å legge til en .todofil i rotprosjektkatalogen.

Du kan gå gjennom alle innstillingsalternativer i github-dokumentasjonen.

Hvordan å bruke

For å bruke Brackets Todo, bare legg til en kommentar til koden din med en kode inne. Etikettnavnet må være med store bokstaver, etterfulgt av et kolon (:). For å se alle Todoene, klikker du bare på Todo-ikonet i høyre forlengelsesrute.

konfigurering:

• Slik tillater Todo's HTML-kommentarer: Bare åpne opp innstillingene - Klikk på Todo-ikonet → Innstillinger (girikon) - og klikk for å åpne .todo-filen. Legg til denne koden til denne filen:

  "regex": "prefix": "(? :)" 

  Hvordan Todo-innstillingsmenyen ser ut

• Slik endrer du søkeomfang: Legg denne koden til .todo-filen:

  "search": "scope": "myproject"

• Slik ekskluderer du fil / mappe / filendelser fra søkeomfanget: Legg denne koden til .todo-filen:

  "search": "scope": "myproject",

  “EkskluderFolder”: [“din mappe”]

   "excludeFiles": ["yourfile"] "excludeFiles": [".yeextension"] 

10. Forskjønn

Beautify gjør at koden din ser bra ut. Den fikser mellomrom, innrykk og linjer.

Hvordan å bruke

Det er veldig enkelt å bruke Beautify. Alt du trenger å gjøre er å gjøre det å velge noe kode> Høyreklikk > Beautify.

Alternativt kan du ta turen til Redigere fane og klikk 'Beautify'.

SE OGSÅ: 20 beste emmetips for å hjelpe deg med å kode HTML / CSS Crazy Fast