Share
Bijna een jaar geleden evalueerde Jeffrey Way het open source Brackets-project. In de tijd sinds die recensie is Brackets vrij ver gekomen, onlangs met het vieren van de 33e Sprint-release. In dit artikel zal ik het hebben over veel van de updates en laten zien waarom Brackets mijn favoriete editor is.
Haakjes primaire focus ligt op webontwikkeling.
Voor het geval je het niet weet, Brackets is een opensourcecode-editor gericht op webontwikkeling en gebouwd met webstandaarden. Ja - een editor gebouwd met HTML, JavaScript en CSS. Het werd oorspronkelijk in juli 2012 uitgebracht op GitHub (http://github.com/adobe/brackets). Hoewel ze door Adobe zijn uitgebracht, bevatten de deelnemers achter Brackets mensen uit verschillende bronnen. (Terzijde, het Brackets-team maakt er een prioriteit van om op te focussen niet-Adobe pull-aanvragen.)
Haakjes primaire focus ligt op webontwikkeling. Je krijgt natuurlijk de verwachte bewerking en codehints voor HTML, CSS en JavaScript, maar je krijgt ook een paar krachtige functies. De "Live Preview" -functie verbindt uw Brackets-editor met uw browser. Terwijl u CSS bewerkt, gebeuren er updates in realtime en krijgt u direct feedback. Als u gewoon CSS-items selecteert, krijgt u hoogtepunten in de browser zodat u precies weet waarmee u werkt. Nog een functie, snel bewerken, laat ons een HTML-tag selecteren en direct naar de CSS-code gaan die van toepassing is op dat deel van de DOM. Wat niet direct in Brackets wordt ondersteund, kan worden bereikt via een uitgebreide extensie-API (opnieuw met behulp van webstandaarden) om ontwikkelaars toe te voegen welke functie zij ook willen. Er zijn uitbreidingen gemaakt voor CSS-linting, HTML-validatie, GitHub-integratie en meer. (Ik schrijf dit artikel in Markdown in mijn Brackets-editor met een Markdown-extensie die me een live update van het display geeft.)
Dat is waar Brackets begon. Laten we het nu eens hebben over waar het is gekomen en wat we in de toekomst kunnen verwachten.
Verbeteringen zijn aangebracht in alle aspecten (HTML, CSS en JavaScript).
Toen Brackets voor het eerst werd gelanceerd, was het iets van een experiment. Zou u webstandaarden kunnen gebruiken om een editor voor webontwikkelaars te bouwen? Wat nog belangrijker is, kun je iets bouwen dat zou presteren? Omdat dit een experiment was en er veel architectuurproblemen op laag niveau waren, zijn sommige dingen die je zou verwachten in elke fatsoenlijke editor, zoals het hernoemen van bestanden, niet lang verzonden. Brackets was niet op de markt gebracht als klaar voor prime time. In plaats daarvan was het idee om iets nieuws te proberen en te kijken wat werkte.
Het is nu eerlijk om te zeggen dat Brackets alle basics omvat. Dingen zoals het maken van nieuwe bestanden, verwijderen, openen vanuit het bestandssysteem, enz. Worden nu ingebakken. Hoewel het niet per se iets is om over te kraaien, als het ontbreken van deze basisfuncties het enige was dat je ervan weerhield om Brackets te gebruiken, is het nu zeker de tijd om het te bekijken. (En voor degenen onder u die wachten op een Linux-versie - een is voor u klaar!)
Naast elementaire bestandsbewerkingen is codehints aanzienlijk verbeterd in de loop van de tijd. Verbeteringen zijn aangebracht in alle aspecten (HTML, CSS en JavaScript). Onlangs heeft Brackets ondersteuning toegevoegd voor het ontleden en hint van uw eigen functies. Stel je voor dat je twee JavaScript-functies hebt geschreven. Terwijl u uw aanroepen typt voor deze functies, probeert Brackets zowel de argumenten als de typen argumenten te begrijpen die nodig zijn en biedt codeondersteuning terwijl u typt. Hier is een eenvoudig voorbeeld:
/ * * @param nummer x Eerste nummer * @param nummer y Tweede nummer * / functie ringTheBell (x, y) 'gebruik strict'; var total = x + y; totaal terugbrengen; functie sayHello (naam) 'gebruik strict'; return "Hallo", + naam;
Mijn code heeft twee functies, één genaamd aanbellen en één geroepen zeg hallo. Ik heb wat aanvullende metadata voorzien aanbellen, maar dat is niet verplicht. Als je dit echter opgeeft, wordt code een beetje vriendelijker. Nu ga ik een oproep typen aanbellen:
Merk op hoe het de argumenten ontdekte en en typ. Als ik een waarde voor het eerste argument invoeg, kijk dan hoe de code het tweede argument vet maakt:
Zelfs in gevallen waarin Bracket's het type argument dat in een functie wordt gebruikt niet kan bepalen, zal het u nog steeds de naam van het argument dat nuttig kan zijn:
Onlangs toegevoegd Brackets echt ondersteuning voor HTML live connect.
Live Connect is waarschijnlijk een van de coolere aspecten van Brackets. Zoals ik hierboven al zei, kun je CSS bewerken en updates in realtime bekijken. Moet u opvulling of marges aanpassen? U kunt uw editor gebruiken en de impact onmiddellijk zien. Browsers laten dit meestal toe (Chrome Dev Tools), maar bieden normaal gesproken geen gemakkelijke manier om die wijzigingen terug in de bron te krijgen. Chrome heeft onlangs op dit gebied vooruitgang geboekt, maar hoe graag ik ook van Chrome houd, ik schrijf mijn code liever in een editor.
Hoewel dat prima werkte voor CSS, bood het geen ondersteuning voor HTML. Haakjes laadt automatisch je browser opnieuw bij het opslaan van een HTML-bestand, maar als je een voorbeeld van je wijzigingen wilt zien zonder een redding, je had geen geluk. Onlangs toegevoegd Brackets echt ondersteuning voor HTML live connect. Terwijl u uw HTML-code aanpast, wordt de browser in realtime bijgewerkt. U ziet ook hoogtepunten in de DOM voor het gebied dat u aan het wijzigen bent. Dit vertaalt zich niet echt naar screenshots, maar beeld je de volgende HTML in.
Test Dit is een test
fooioikkkllklkkopkk
Als ik klik in de h2 hierboven geeft Chrome een hoogtepunt van dat item weer:
Als ik tekst in de h2, Chrome zal deze wijzigingen onmiddellijk weergeven.
Een andere belangrijke update van Brackets betreft uitbreidingsondersteuning. Achter de schermen, wat uitbreidingen kunnen doen en hoe ze het kunnen doen, is met elke sprint progressief verbeterd. Hoewel niet noodzakelijk zo belangrijk voor een eindgebruiker, voor mensen die extensies schrijven, maakten de verbeteringen het veel gemakkelijker om nieuwe functies toe te voegen aan haakjes. Als u minder tijd kunt besteden aan boilerplate-code en meer tijd aan functies, is dat een algemene overwinning voor het verlengen van haakjes. Haakjes legt ook de mogelijkheid bloot om Node.js zelf te gebruiken voor uitbreidingen. Deze functie geeft je extensies de mogelijkheid om gebruik te maken van alles wat Node kan - wat op zichzelf vrijwel de hele wereld voor jou opent. Dit is een vrij complex onderwerp, maar als je meer wilt weten, lees dan deze handleiding: Brackets Node Process.
Dat is achter de schermen, maar voor de eindgebruiker heeft Brackets een lange weg afgelegd om het gemakkelijker te maken om extensies daadwerkelijk te gebruiken. Brackets worden nu geleverd met een volwaardige Extension Manager. Beschikbaar via de het dossier menu of een pictogram in de rechtergoot, als u erop klikt, wordt de manager gestart:
Merk op dat voor elke extensie die is geïnstalleerd, je details over de versie kunt zien, links voor aanvullende informatie, en nog beter, een snelle manier om de extensie te verwijderen als deze problemen veroorzaakt. Onderaan deze manager bevindt zich een knop waarmee u extensies kunt installeren vanuit een URL. Dat is handig als u weten welke extensie u wilt (evenals de GitHub-URL), maar wat als u dat niet doet? Klik gewoon op de Beschikbaar tab:
U kunt nu bladeren door (en zelfs filteren) via a lang lijst met beschikbare extensies. Nog beter, de installatie is zo eenvoudig als klikken op een knop. Let op de Extension Manager van de Bracket is zelfs slim genoeg om te herkennen wanneer een extensie mogelijk niet compatibel is met uw versie van Brackets:
Waarschijnlijk de meest opwindende update voor Brackets (in ieder geval voor mij) is de integratie van Theseus. Theseus is een open source project gemaakt door mensen van zowel Adobe als MIT. Het is gericht op het bieden van foutopsporingsondersteuning voor zowel Chrome en Node.js-toepassingen. Stel je voor dat je een Node.js-applicatie kunt debuggen die bestaat uit JavaScript aan de serverzijde en client-side code. Theseus biedt precies dat. Hoewel Theseus nog in de kinderschoenen staat, is het nu in Brackets geïntegreerd en kan het binnen de editor zelf worden gebruikt.
Theseus biedt momenteel drie belangrijke functies:
Laten we een paar voorbeelden hiervan bekijken. De ondersteuning voor de codedekking van Theseus laat zien hoe vaak een functie wordt aangeroepen. Het klinkt eenvoudig, maar kan krachtig zijn. Ik heb onlangs Theseus geprobeerd op een eenvoudige demo die gebruik maakte van AJAX om een server-side programma te bellen. Ik merkte dat mijn demo niet werkte en de Theseus-integratie tussen haakjes bevestigde dit. Let op het "0 calls" -rapport door mijn terugroep:
Blijkt dat mijn server-side code niet goed was ingesteld en Ik heb mijn JavaScript-code niet geschreven om een fout-callback voor de AJAX-aanroep te ondersteunen. Dit was letterlijk de eerste keer dat ik met Theseus speelde en het hielp meteen een probleem in mijn code aan te wijzen. Nadat ik mijn front-endcode had gewijzigd, kon ik meteen het verschil zien:
Voor de duidelijkheid, dit gebeurt allemaal in realtime. Met haakjes geopend en Chrome geopend, kan ik rondklikken in mijn applicatie en zie ik de updates in haakjes synchroon met mijn acties in de browser.
Bovenop alleen het aantal oproepen zien, kan ik ook op een item klikken en zien wat er aan is doorgegeven. Dit is de functie met terugwerkende kracht die ik hierboven heb genoemd. Merk op dat je kunt klikken op complexe eigenschappen en echt in de gegevens kunt graven.
Ten slotte, voor asynchrone oproepen die mijn optreden op een onbepaalde tijd na hun initiële oproep, heeft Theseus geen probleem met het afhandelen en correct organiseren van deze oproepen onder hun initiatiefnemer.
Een van de vroegste functies in Brackets was inline bewerken voor CSS-items. U kunt uw cursor in een HTML-element plaatsen, druk op CMD / CTRL + E, en haakjes zouden uw project scannen om relevante CSS-bestanden te vinden, evenals de juiste matchingsregel. Dit maakte het ongelooflijk gemakkelijk om de stylesheets die van toepassing zijn op uw inhoud snel bij te werken.
Dit werkte goed - zolang je inhoud maar goed was had een bijpassende CSS-regel. In de laatste update voor haakjes zal de editor nu herkennen wanneer een element geen overeenkomende CSS-regel heeft.
U kunt nu rechtstreeks een nieuwe CSS-regel toevoegen vanuit de inline editor.
Ten slotte wordt er een nieuwe 'shell'-look toegevoegd aan Brackets. Momenteel alleen beschikbaar voor Windows (maar binnenkort in de OSX-build), de "Dark" -look is de toekomst van de look en feel van Brackets.
Je primaire editor is een heel persoonlijke beslissing voor een ontwikkelaar.
Je primaire editor is een heel persoonlijke beslissing voor een ontwikkelaar. Ik merkte dat ik een paar maanden geleden Sublime Text gebruikte en merkte dat iets niet goed werkte. Blijkbaar probeerde ik een haakjes-functie te gebruiken. Die dag schakelde ik over van Sublime als mijn hoofdredacteur naar Brackets. Ik gebruik nog steeds Sublime (en voor de duidelijkheid, het is een behoorlijk geweldige editor!) Maar nu is mijn dagelijkse werk bijna volledig in Brackets gedaan.
Het is duidelijk dat ik graag zou willen dat je nu gaat - en Brackets download. Maar als je een beetje meer wilt graven voordat je je commit (hey, ik begrijp het, het opbouwen van een relatie met een editor is een serieuze onderneming), bekijk dan deze bronnen:
Accentsconagua