10 Awesome brackets-udvidelser, som du virkelig har brug for

Brackets.io udgav for nylig version 1.2 med nogle gode nye funktioner, som du kan læse om på deres blog. Vi har udarbejdet en liste over 10 af de bedste og mest nyttige beslagsudvidelser derude (i ingen særlig rækkefølge) sammen med komplette instruktioner til hver udvidelse.

Udvidelser til beslag

1.Kode Foldning

I modsætning til mange andre IDE'er og kodeditorer har parenteser ikke en kodefoldningsmulighed tilgængelig som standard. Med kodefoldning kan du nemt kollapse store dele af din kode i en enkelt linje. Code Folding-udvidelsen er tilgængelig på Github og fra Brackets-udvidelsesadministratoren.

Sådan bruges

For at folde ethvert indlejret tag skal du bare klikke på pil ned til venstre for overordnet tag som vist ovenfor. Samme princip for Javascript eller ethvert andet format. Klik bare på pil ned til venstre for overordnet element for at folde alle de indlejrede udsagn i en linje. Klik på plustegnet for at udvide.

Linjenumrene for 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 tekstholdertekst på, men frontend-webudviklere har ofte brug for pladsholderbilleder. I stedet for at prøve at oprette et tomt pladsholderbillede, skal du bruge Lorem Pixel-udvidelsen. Det giver dig mulighed for at indsætte smukke pladsholderbilleder i den ønskede størrelse. Den seje del om Lorem Pixel er, at det giver dig mulighed for at vælge den kategori, du vil have et billede fra.

Hvis det ikke er godt nok, ændrer pladsholderbillederne sig hver gang du genindlæser siden! Billeder kan ofte forstyrre farveskemaer, så Lorem Pixel giver dig også en 'gråtoner' -mulighed til kun at anvende b / w-pladsholderbilleder. Denne udvidelse drives af lorempixel.com og er tilgængelig fra Brackets extensions manager. Brug af Lorem Pixel

Sådan bruges

Når du installerer Lorem Pixel-udvidelsen, vises Lorem Pixel-logoet - et markeret firkant - i udvidelsesruden (ruden til højre med knappen Live Preview). Klik på logoet for at få vist et indstillingsfelt. Indstil den ønskede billedstørrelse og den foretrukne billedkategori. Hvis du vil have gråtonebilleder, skal du kontrollere muligheden for gråtoner. Kopier enten linket til udklipsholderen, og brug det efter behov, eller indsæt det i den aktuelle markorposition.

3. Autoprefixer

Tilføjelse af forhandlerpræfikser til din kode er drudgery. Autoprefixer-udvidelsen kan spare dig for meget tid (og meget arbejde!), Fordi den automatisk tilføjer de krævede 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 automatisk præfiks, hvis du vil.

Sådan bruges

For at bruge Autoprefixer skal du bare starte med at skrive præfiks-fri kode. Udvidelsen tilføjer automatisk præfikseret kode, så snart du gemmer. Hvis du vil automatisk præfikse en markeret kode, skal du først vælge koden og derefter Redigere fanen ⇒ Valg af automatisk præfiks.

Autoprefixer giver dig også mulighed for at tilføje tilpassede præfikser i dens indstillinger. Sådan går du til udvidelsesindstillingerne: Redigere ⇒ Autoprefixerindstillinger.

For at have en smuk, kaskaderet, forudindstillet kode skal du aktivere Visuel kaskade i udvidelsesindstillingerne.

4. Visning af markdown

Markdown er dejligt almindeligt tekst markup sprog, der let kan konverteres til HTML. Markdown Preview viser den gengivne Markdown lige under tekstversionen. Det giver dig mulighed for at vælge mellem to forskellige stilarter, Github flavored markdown og standard markdown.

Der er tre temaer, du kan vælge i eksempelvinduet - Lys, mørk og klassisk. Markdown Preview har også en rullesynkroniseringsindstilling (aktiveret som standard). Udvidelsen kan downloades fra Github eller fra Brackets extensions manager.

Sådan bruges

Åbn a .md eller a .markdown fil. Hvis du har installeret Markdown Preview, skal M ↓  knappen skal vises til højre. Klik på det, så ser du gengivet Markdown. For at ændre temaet eller deaktivere rullesynkronisering, skal du blot klikke på tandhjulsikonet i øverste højre hjørne af afsnittet Markdown Preview.

5. parentes ikoner

Det er altid sjovt at krydre din kodeditor med filikoner. Parentesikoner tilføjer farverige ikoner, baseret på filtype, til alle filer, der er anført i sidelinjen. Det har ikoner for de fleste filtyper, og du kan sende ikonanmodninger på Github-siden.

Tip Bonus:

Parentesikoner bruger ikoner fra Ionicons-projektet. Du kan også tjekke filtypenavnet File Extensions (en gaffel til projektet Brackets Icons), der bruger ikoner fra Font Awesome-projektet. Det koges ned til personlig præference i sidste ende.

Sådan bruges

Bare installer udvidelsen og genindlæs beslag (F5).

6. Dokumentværktøjslinje

Beslag mangler faner. Almindelig og enkel kendsgerning. Udvidelsen Dokumenter Toolbar tilføjer denne funktionalitet. Alle filer, der er i det 'aktive' afsnit af sidebjælken, vises som faner i denne udvidelse. Du kan også skjule sidebjælken og kun bruge dokumentværktøjslinjen til en dejlig grænseflade.

Sådan bruges

Installer udvidelsen og genindlæs beslag (F5).

7. Beslag Git

Alt prøver at integrere sig med Git i disse dage; det er det langt mest populære versionskontrolsystem (VCS). Beslag Git er let bedst blandt lignende beslagudvidelser. Det har alle de git-funktioner, du har brug for. Du kan nemt begå ændringer inden for selve parenteserne, skubbe og trække ændringer med et enkelt klik, se filhistorik og total forpligtelseshistorik også. Hvis du har det godt med Git, finder du ikke problemer med denne udvidelse.

Bemærk: For at bruge Brackets Git skal du have Git installeret på din computer. Efter installation af udvidelsen skal du muligvis indtaste stien til din Git-eksekverbare fil (hvis den ikke er i standardstien).

Sådan bruges Begår en fil ved hjælp af Brackets Git

Brug af parenteser Git er temmelig ligetil. Lav din lokale Github-repo-mappe til projektmappen i parentes. Åbn derefter en fil, foretag nogle ændringer og gem den. Så kan du gå videre og klikke på Git-ikonet til højre, og dette åbner rammen Brackets Git i bunden. Den viser alle ændringer, du har foretaget dine filer.

Kontroller de filer, du vil bruge, og klik derefter på knappen Forpligtelse. Dette åbner en popup, der viser de foretagne ændringer. Indtast din Commit-meddelelse, og klik på Ok. Og du har med succes forpligtet en fil til Git direkte fra parenteser!

Efter at have forpligtet, skal du blot klikke på trykknappen (det viser også antallet af usynkroniserede forpligtelser, som du kan se i GIF ovenfor).

Konfigurering af indstillinger 

Åbn Brackets Git-ruden, og klik på knappen Indstillinger (andet fra højre). Du er velkommen til at konfigurere Brackets Git, uanset hvor du kan lide det.

Sådan får du vist File and Commit History

Klik bare på de respektive knapper for at se din filhistorie og forpligtelseshistorie smukt listet. Nævnte vi, at du kan ændre avataren til enten en sort / hvid avatar, en farvet avatar eller din Gravatar? Forpligtelse historie

8. FÅ ALLE ting

Lint ALLE ting. Alt. Denne udvidelse linser alle dine filer på én gang. Meget nyttigt, når du har et stort projekt med masser af tilsluttede filer. Alle fnugfejl vises pænt i en rude.

Sådan bruges

For at bruge fnug ALLE ting skal du bare gå til Udsigt  fane og klik Fuld hele projektet.

9. Beslag Todo

Parentes Todo er en pæn lille udvidelse, der viser alle TODO kommentarer i et pænt listeformat. Som standard understøtter det 5 tags - TODO, BEMÆRK, FIXME, ÆNDRINGER og FREMTID. Du kan også markere kommentarer som udført. I visningsmulighederne kan du filtrere kommentarer efter tags. Med parentes Todo kan du også definere tilpassede farver til tags samt dine egne tags, i tilfælde af at du nogensinde vil blive kreativ med dine kommentarer.

Hvis du arbejder på et stort projekt og har behov for at holde styr på kommentarer fra flere filer, kan du ændre omfanget af Brackets Todos søgning. Vil du ekskludere nogle filer og mapper som f.eks. Leverandørmapper? Ingen problemer. Bare tilføj stien i listen over ekskluderinger. Du kan tilpasse indstillingerne for hvert projekt ved at tilføje en .todo-fil i rodprojektkataloget.

Du kan gennemgå alle indstillinger i github-dokumentationen.

Sådan bruges

For at bruge parentes Todo skal du bare tilføje en kommentar til din kode med et mærke inde. Tagnavnet skal være med store bogstaver, efterfulgt af et kolon (:). Klik på Todo-ikonet i den højre udvidelsesrude for at se alle Todo's.

Konfiguration:

• Sådan tillader Todo's HTML-kommentarer: Åbn bare indstillingerne - Klik på Todo-ikonet → Indstillinger (gearikon) - og klik for at åbne .todo-filen. Tilføj denne kode til denne fil:

  "regex": "præfiks": "(? :)" 

  Hvordan Todo-indstillingsmenuen ser ud

• Sådan ændrer du søgeomfang: Føj denne kode til .todo-filen:

  "search": "scope": "myproject"

• Sådan ekskluderes enhver fil / mappe / filtypenavn fra søgeområdet: Føj denne kode til .todo-filen:

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

  “ExcludeFolders”: [“yourfolder”]

   "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"] 

10. Skønhed

Beautify får din kode til at se godt ud. Det løser mellemrum, indrykk og linjer.

Sådan bruges

Det er meget nemt at bruge Beautify. Alt hvad du skal gøre er Vælg noget kode> Højreklik > Forskøn.

Alternativt kan du gå over til Redigere fane og klik 'Forskøn'.

SE OGSÅ: 20 bedste emmetips til at hjælpe dig med at kode HTML / CSS skøre hurtigt