Fästens förlängningar att använda vid kodning
Innan du går djupt in i processen att förstå Brackets-tillägg måste du först få en tydlig bild av vad Brackets står för inom kodningsarenan.
På TMS Outsource kodar vi mycket.
En modern, kraftfull och ändå lätt textredigerare, Brackets skapades för frontend-utvecklare och webbdesigners.
Brackets erbjuder fokuserade visuella verktyg och förprocessorstöd som gör det enkelt för designers och utvecklare att designa i webbläsaren.
Brackets textredigerare är utan tvekan en av de mest populära kodredigerarna som finns tillgängliga som kommer med många Brackets-tillägg.
Vi har använt det själva under de senaste månaderna medan vi arbetat med att uppdatera wpDataTables, WordPress-plugin #1 för tabeller och diagram.
Vad är Brackets från Brackets IO?
Adobe Brackets är en HTML-redigerare med öppen källkod och är en av de mest uppskattade textredigerarna bland frontend-utvecklare. Det är inte lika bra marknadsfört som Atom, den nya lätta textredigeraren utvecklad av GitHub, men det är en lovande kod- och textredigerare.
Optimerad för HTML, JavaScript och CSS, Brackets kan användas på Windows, Mac OS och Linux. Du kan ladda ner Brackets på brackets.io om du letar efter en HTML-redigerare Mac, Brackets för Windows, Mac HTML-redigerare, HTML Brackets eller HTML- och CSS-redigerare.
Nyckelfunktioner i Brackets, en lätt HTML CSS Editor
- Live-förhandsgranskning: Hakparenteser öppnar ett nytt fönster i din webbläsare som visar den aktuella sidan. Detta behöver inte uppdateras när du skriver eller när du ändrar en fil. Som sådan fungerar Brackets som en förlängning av utvecklarverktygen i din webbläsare.
- Snabbredigering: Låt oss säga att du håller på att redigera HTML-kod. Klicka på en tagg med en matchande CSS-deklaration i en länkad fil. Tryck på Ctrl/Command+E. En inline-redigerare kommer upp och låter dig redigera den regeln direkt.
- JSLint: Den här funktionen fungerar med JavaScript-koden när du sparar. Resultaten visas under det primära redigeringsfönstret som en panel.
Brackets sätter i kraft kodkomplettering ur front-end-utvecklares och webbdesigners perspektiv. Flera andra funktioner definierar parenteser, inklusive snabböppning, snabbsökning, kommandoradsintegration och val av flera koder.
Den största fördelen med Brackets som kod- och textredigerare är ett stort antal tillgängliga tillägg som lägger till funktionalitet till Brackets inbyggda funktioner. Tillägg låter dig ändra det visuella studiotemat eller till och med skapa dina Brackets-teman.
Gratis Brackets Extensions
Det här inlägget introducerar många gratis Brackets-tillägg länkade tillbaka till GitHub för att säkerställa skydd mot buggar eller korrupta koder:
Som namnet antyder är Beautify en av de bästa Brackets-tilläggen designade för att få koder att se bra ut. Beautify gör filer extra läsbara och det låter dig förbättra deras utseende också med en genvägstangent: CMD-Shift-L (Mac) och Ctrl-Shift-L (Win).
Du kan också formatera JavaScript-kod och göra den mer läsbar med Beautify.
Utformad som en postprocessor för att effektivt hantera leverantörsprefix, analyserar Autoprefixer CSS-filer och bifogar sedan leverantörsprefix till CSS-regler. När Autoprefixer har integrerats i ditt verktyg för att bygga tillgångar är du redo. Dessutom raderar den prefix som är inaktuella.
Detta är en av Brackets-tilläggen som utformades för att förbättra CSS- och HTML-arbetsflödet. Det låter dig knappa in CSS-liknande uttryck som sedan kommer att analyseras och kommer att resultera i utdata i enlighet med vad du bokstavligen knappade in förkortningen.
Förkortningarna som produceras av Emmet kommer att se ut som CSS-mönster. Men de analyseras under körning och ändras följaktligen till ett strukturerat block med en knapptryckning. När du har plockat upp förkortningarna kan du påskynda CSS- och HTML-arbetsflödet.
Minifier är en av Brackets-tilläggen som förminskar CSS- och JavaScript-filer med en kortkommando: CMD+M eller Ctrl+M. De sparas som filnamn.min.ext. Det är ett mycket tidseffektivt tillägg eftersom det komprimerar filer och minimerar relevant JS medan du arbetar.
En mycket användbar Brackets-tillägg, ToDo är en utmärkt lösning för att visa, spåra och markera som färdiga, eller sortera att göra-uppgifter i det aktuella projektet eller dokumentet. Fem taggar, inklusive ToDo, Note, Changes, FixMe och Future stöds av denna Brackets-tillägg.
En bra funktion med detta tillägg är att det låter dig definiera dina egna taggar samt anpassa färger för taggar. Du kan använda din kreativitet med denna Brackets-tillägg.
Snippets designades för att använda genvägar för att skriva de vanligaste koderna och skapa ett bibliotek med kodsnuttar som låter dig skriva CSS, JS, HTML-kod genom att knappa in bara några bokstäver i ett kodavsnitt. Du behöver inte skriva samma kod och taggar upprepade gånger.
Det är viktigt att du kopierar rätt antal ord i en designsektion, vilket kan vara en mycket tidsödande aktivitet för designers. Lorem Ipsum, som namnet antyder, kommer att hantera denna uppgift åt dig och fylla i designsektioner med det angivna antalet ord.
Ett kommando som lorem_wrap200. och 200 ord kommer magiskt att dyka upp där det behövs.
Medan Lorem Ipsum är en av Brackets-tilläggen som fyller ut designsektioner med dummytext, genererar Lorem Pixel platshållarbilder för olika designsektioner.
Det här tillägget är enkelt att använda och låter dig anpassa storleken på din platshållarbild med en visuell redigerare. Det låter dig också använda anpassade webbadresser för att inkludera dummy-bilder.
Kommer du ihåg uppmärkningstaggar? Ingen gillar att skriva dessa taggar, men de är obligatoriska för varje nytt dokument, oavsett om du använder PHP, HTML eller JavaScript. Alla mallar är en av parentes-tilläggen som är dedikerade till att skapa mallar med förskriven uppmärkning.
Därefter kan du börja på ett nytt dokument direkt utan att behöva skriva in de obligatoriska märkningstaggarna. Välj en HTML-mall tillsammans med standard-HTML-taggar om du vill skapa ett nytt HTML-dokument. Detsamma gäller PHP eller JavaScript.
Brackets Icons är ett tillägg som skapades för att hjälpa utvecklare och designers att införliva filikoner i sidofältet i Brackets. Som du vet gör ett visuellt element, till exempel en ikon, att identifiera filer enklare än ingen som helst indikator eller en textindikator.
CSSLint är ett användbart Brackets-tillägg, designat för att identifiera och lokalisera problem relaterade till kodkvalitet såväl som CSS-fel. Tillägget rapporterar fel/problem med CSS Lint-regler.
Installera konsolförlängningar
Det är ingen raketvetenskap att installera någon av de tillgängliga Brackets-tilläggen:
- öppna parentesredigeraren
- öppna tilläggsfliken
- Sök efter tillägg som du vill installera
- Klicka på Installera och starta installationen
Du kan installera teman på samma sätt. Det är ganska enkelt!
Avslutande tankar om att hitta de bästa parentesförlängningarna
Det finns ingen annan kodredigerare för frontend-utvecklare och webbdesigners som är mer mångsidig än Brackets. Det är den bästa redigeraren i sin kategori och kommer packad med en uppsättning otroliga funktioner som du kan förbättra med tilläggsfunktionaliteten.
Om du gillade att läsa den här artikeln om Brackets-tillägg, bör du kolla in den här om WordPress-utvecklarlön.
Vi skrev också om några relaterade ämnen som JavaScript-bibliotek, WordPress-utbildning, konvertera HTML till WordPress och bästa kodredigerare.