Brackets.io heeft onlangs versie 1.2 uitgebracht, met enkele geweldige nieuwe functies waarover je meer kunt lezen op hun blog. We hebben een lijst samengesteld met 10 van de beste en meest bruikbare haakjes-extensies die er zijn (in willekeurige volgorde), samen met de volledige instructies voor elke extensie.
Brackets Extensions
1. Code Vouwen
In tegenstelling tot veel andere IDE's en code-editors is Brackets standaard niet voorzien van een code-vouwoptie. Met Code Vouwen kunt u grote delen van uw code eenvoudig samenvoegen tot één regel. De Code Folding-extensie is beschikbaar op Github en de extensie-manager van Brackets.
Hoe te gebruiken
Om een geneste tag te vouwen, klikt u op de pijl-omlaag links van de bovenliggende tag, zoals hierboven weergegeven. Hetzelfde principe voor Javascript of een ander formaat. Klik op de pijl-omlaag links van het bovenliggende element om alle geneste instructies in één regel samen te vouwen. Klik om te vergroten op het plusteken.
De regelnummers van de gevouwen lijnen zijn verborgen, zodat het gemakkelijk is om gevouwen lijnen te herkennen wanneer u zich concentreert op de code.
2. Lorem Pixel
Er zijn tal van manieren om tijdelijke tekst te genereren, maar frontend-webontwikkelaars hebben vaak tijdelijke afbeeldingen nodig. Gebruik de Lorem Pixel-extensie in plaats van te proberen een lege placeholder-afbeelding te maken. Hiermee kunt u prachtige plaatshouderafbeeldingen invoegen van elke gewenste grootte. Het leuke aan Lorem Pixel is dat je de categorie kunt kiezen waaruit je een afbeelding wilt hebben.
Als dat niet goed genoeg is, blijven de plaatshouderafbeeldingen veranderen telkens wanneer u de pagina opnieuw laadt! Afbeeldingen kunnen kleurschema's vaak van streek maken, dus Lorem Pixel biedt u ook een optie 'Grijstinten' om alleen plaatsaanduidingen in zwart-wit te gebruiken. Deze extensie wordt mogelijk gemaakt door lorempixel.com en is beschikbaar via de extensie-manager van Brackets.
Hoe te gebruiken
Nadat u de Lorem Pixel-extensie hebt geïnstalleerd, wordt het Lorem Pixel-logo - een aangevinkt vierkant - weergegeven in het extensiepaneel (het deelvenster rechts met de knop Livevoorbeeld). Klik op het logo om een instellingenvak te openen. Stel uw gewenste afbeeldingsgrootte en gewenste afbeeldingscategorie in. Als u grijswaardenafbeeldingen wilt, vinkt u de optie Grijstinten aan. Kopieer de koppeling naar het klembord en gebruik deze indien nodig of plaats deze in de huidige cursorpositie.
3. Autoprefixer
Voorvoegsels van leveranciers aan uw code toevoegen is geestdodend. De Autoprefixer-extensie kan u veel tijd (en veel werk!) Besparen omdat het automatisch de vereiste leveranciersprefixen aan uw code toevoegt. Het heeft geen configuratie nodig en werkt uw voorvoegsels bij telkens wanneer u uw code opslaat. U kunt ook code selecteren en automatisch een prefix gebruiken als u dat wilt.
Hoe te gebruiken
Om Autoprefixer te gebruiken, begint u met het schrijven van prefix-vrije code. De extensie voegt automatisch een vooraf ingestelde code toe zodra u opslaat. Als u automatisch een voorgeselecteerde code wilt voorvoegen, selecteert u eerst de code en vervolgens het tabblad Bewerken ⇒ Automatische prefixselectie.
Autoprefixer laat je ook aangepaste prefixen toevoegen in zijn instellingen. Om naar de extensie-instellingen te gaan: Bewerken ⇒ Instellingen automatisch aanvullen.
Om mooie, gecascadeerde, vooraf ingestelde code te hebben, schakelt u de optie Visual cascade in de extensie-instellingen in.
4. Markdown Preview
Markdown is een mooie opmaaktaal in platte tekst die eenvoudig kan worden omgezet in HTML. Markdown Preview geeft de gerenderde Markdown direct onder de tekstversie. Je kunt kiezen uit twee verschillende stijlen, Github smaakdowndowndown en standaardmarkdown.
Er zijn drie thema's die u kunt kiezen voor het voorbeeldvenster - Licht, Donker en Klassiek. Markdown Preview heeft ook een scroll sync optie (standaard ingeschakeld). De extensie kan worden gedownload van Github of van de extensie-manager van Brackets.
Hoe te gebruiken
Open een .md of een .markdown- bestand. Als u Markdown Preview hebt geïnstalleerd, moet rechts de knop M ↓ verschijnen. Klik erop en u ziet gerenderd markdown. Als u het thema wilt wijzigen of de schuifsynchronisatie wilt uitschakelen, klikt u op het tandwielpictogram in de rechterbovenhoek van het gedeelte Voorvertoning markeren.
5. Hakenpictogrammen
Het is altijd leuk om je code-editor leuker te maken met bestandsiconen. Haakjes Pictogrammen voegt kleurrijke pictogrammen toe, gebaseerd op het bestandstype, op alle bestanden die in de zijbalk staan. Het heeft pictogrammen voor de meeste bestandstypen en u kunt pictogramverzoeken posten op de Github-pagina.
Bonustip:
Brackets Icons gebruikt pictogrammen uit het Ionicons-project. Je kunt ook de extensie File Icons (een vork van het Brackets Icons-project) bekijken met pictogrammen uit het project Font Awesome. Uiteindelijk komt het neer op persoonlijke voorkeur.
Hoe te gebruiken
Installeer gewoon de extensie en laad beugels opnieuw (F5).
6. Documenten-werkbalk
Tussen haakjes ontbreken tabbladen. Eenvoudig en duidelijk feit. De uitbreiding van de werkbalk Documenten voegt deze functionaliteit toe. Alle bestanden die zich in het gedeelte 'actief' van de zijbalk bevinden, worden weergegeven als tabbladen in deze extensie. U kunt ook de zijbalk verbergen en alleen de documenttoolbalk gebruiken voor een mooie interface.
Hoe te gebruiken
Installeer de uitbreiding en herlaad beugels (F5).
7. Haakjes Git
Alles probeert tegenwoordig met Git te integreren; het is verreweg het meest populaire versiebeheersysteem (VCS). Beugels Git is eenvoudig de beste onder vergelijkbare beugelsuitbreidingen. Het heeft alle git-functies die je nodig hebt. U kunt eenvoudig wijzigingen vastleggen tussen haakjes zelf, push- en pull-wijzigingen aanbrengen met een enkele klik, de bestandsgeschiedenis en de totale commit-geschiedenis bekijken. Als je goed met Git bent, zul je geen problemen met deze extensie vinden.
Opmerking: Om Brackets Git te gebruiken, moet Git op uw computer zijn geïnstalleerd. Nadat u de extensie hebt geïnstalleerd, moet u mogelijk het pad naar uw Git-uitvoerbare bestand invoeren (als dit zich niet in het standaardpad bevindt).
Hoe te gebruiken
Brackets gebruiken Git is redelijk rechttoe rechtaan. Maak van je lokale Github repomap de projectmap tussen haakjes. Open vervolgens een bestand, breng een paar wijzigingen aan en sla het op. Vervolgens kun je doorgaan en op het Git-pictogram aan de rechterkant klikken. Dit opent het deelvenster Brackets Git onderaan. Het zal alle wijzigingen vermelden die u in uw bestanden hebt aangebracht.
Controleer welke bestanden u wilt vastleggen en klik vervolgens op de knop Vastleggen. Dit opent een popup met de gemaakte wijzigingen. Voer je Commit-bericht in en klik op OK. En je hebt met succes een bestand rechtstreeks vanuit Brackets naar Git gecommit!
Na het plegen klik je gewoon op de drukknop (het toont ook het aantal niet gesynchroniseerde commits, zoals je hierboven kunt zien in de GIF).
Instellingen configureren
Open het deelvenster Brackets Git en klik op de knop Instellingen (tweede van rechts). U kunt Brackets Git naar eigen voorkeur configureren.
Bestands- en commitgeschiedenis bekijken
Klik gewoon op de respectievelijke knoppen om uw Bestandsgeschiedenis en Verbindingsgeschiedenis prachtig weergegeven weer te geven. Hebben we al gezegd dat je de avatar kunt veranderen in een zwart-wit avatar, een gekleurde avatar of je Gravatar?
8. Lint ALLE dingen
Lint ALLE dingen. Alles. Met deze extensie kunt u al uw bestanden in een keer legen. Zeer nuttig wanneer u een groot project hebt met veel verbonden bestanden. Alle lintfouten verschijnen mooi in een venster.
Hoe te gebruiken
Om Lint ALL Things te gebruiken, ga je naar het tabblad View en klik je op Lint whole Project .
9. Beugels Todo
Brackets Todo is een nette kleine extensie die alle TODO-opmerkingen in een nette lijstindeling toont. Standaard ondersteunt het 5 tags: TODO, NOTE, FIXME, CHANGES en FUTURE. U kunt ook opmerkingen markeren als Gereed. In de weergaveopties kunt u opmerkingen filteren op tags. Haakjes Met Todo kunt u ook aangepaste kleuren voor tags definiëren, evenals uw eigen tags, voor het geval u ooit creatief wilt worden met uw opmerkingen.
Als u aan een groot project werkt en opmerkingen van meerdere bestanden moet bijhouden, kunt u de reikwijdte van de zoekopdracht van Brackets Todo wijzigen. Wilt u sommige bestanden en mappen zoals leveranciersmappen uitsluiten? Maak je geen zorgen. Voeg gewoon het pad toe in de lijst met uitsluitingen. U kunt de instellingen voor elk project aanpassen door een .todo-bestand toe te voegen aan de hoofdmap van het project.
U kunt alle instellingsopties in de github-documentatie doorlopen.
Hoe te gebruiken
Als u Brackets Todo wilt gebruiken, voegt u gewoon een opmerking toe aan uw code met een tag erin. De naam van de tag moet in hoofdletters zijn, gevolgd door een dubbele punt (:). Als u alle Todo's wilt bekijken, klikt u op het Todo-pictogram in het rechterdeelvenster.
configureren:
- Todo's toestaan voor HTML-opmerkingen: open gewoon de instellingen - Klik op het Todo-pictogram → Instellingen (tandwielpictogram) - en klik om het .todo-bestand te openen. Voeg aan dit bestand deze code toe:
{"regex": {"prefix": "(? :)"}}
- Om zoekbereik te veranderen: voeg deze code toe aan het .todo-bestand:
{"search": {"scope": "mijn project"}} - Om bestanden / mappen / bestandsextensies uit te sluiten van het zoekbereik : voeg deze code toe aan het .todo-bestand:
{"zoeken": {"scope": "mijn project","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. Verfraaien
Beautify zorgt ervoor dat uw code er goed uitziet. Het corrigeert spaties, inspringingen en lijnen.
Hoe te gebruiken
Het is heel gemakkelijk om Beautify te gebruiken. Het enige wat u hoeft te doen is een code selecteren > Rechter klik > Verfraaien .
U kunt ook naar het tabblad Bewerken gaan en op ' Verfraaien ' klikken.
