Share
For nesten et år siden, gjennomgikk Jeffrey Way Open Source Brackets prosjektet. I tiden siden anmeldelsen Brackets har kommet ganske langt, nylig feirer det er 33rd Sprint utgivelsen. I denne artikkelen skal jeg snakke om mange av oppdateringene, samt vise hvorfor Brackets er min favorittredaktør.
Brackets primære fokus er på webutvikling.
Bare hvis du ikke er klar, er Brackets en åpen kildekodeditor som er fokusert på webutvikling og bygget med webstandarder. Ja - en redaktør bygget med HTML, JavaScript og CSS. Den ble opprinnelig utgitt i juli 2012 på GitHub (http://github.com/adobe/brackets). Mens lanseres av Adobe, omfatter kommandørene bak Brackets folk fra mange kilder. (Som en side gjør Brackets-teamet det en prioritet å fokusere på ikke-Adobe-trekkforespørsler.)
Brackets primære fokus er på webutvikling. Du får forventet redigering og kodehenvisning for HTML, CSS og JavaScript selvfølgelig, men du får også noen kraftige funksjoner på toppen av dette. "Live Preview" -funksjonen kobler Brackets Editor til din nettleser. Når du redigerer CSS, skjer oppdateringer i sanntid, og gir øyeblikkelig tilbakemelding. Bare å velge CSS-elementer vil gi høydepunkter i nettleseren, slik at du vet nøyaktig hva du jobber med. En annen funksjon, rask redigering, la oss velge en HTML-kode og øyeblikkelig komme til CSS-koden som gjelder for den delen av DOM. Hva som ikke støttes direkte i parentes, kan oppnås via en rik utvidelses-API (igjen ved hjelp av webstandarder) for å la utviklere legge til hvilken funksjon de vil ha. Extensions er laget for CSS linting, HTML validering, GitHub integrasjon, og mer. (Jeg skriver denne artikkelen i Markdown i Brackets-editoren min ved hjelp av en Markdown-utvidelse som gir meg en oppdatering av skjermen.)
Det er her Braketter begynte. La oss nå snakke om hvor det er kommet og hva vi kan forvente i fremtiden.
Forbedringer er gjort i alle aspekter (HTML, CSS og JavaScript).
Når braketter først ble lansert, var det noe av et eksperiment. Kan du bruke webstandarder til å bygge en redaktør for webutviklere? Enda viktigere, kan du bygge noe som ville utføre? Fordi dette var noe av et eksperiment, og det var mange arkitektoniske bekymringer på lavt nivå, ble det ikke sendt noen ting som du forventer i en anstendig redaktør, for eksempel å omdøpe filer, for lenge. Braketter var ikke markedsføres som værende klar for prime time. I stedet var ideen å prøve noe nytt og se hva som fungerte.
Det er nå rimelig å si at braketter har alle de grunnleggende dekkene dekket. Ting som å lage nye filer, slette, åpne fra filsystemet, etc. blir nå bakt inn. Selv om det ikke nødvendigvis er noe å kråke om, hvis mangelen på disse grunnleggende funksjonene var det eneste som holder deg fra å bruke braketter, er det definitivt den tid til å sjekke det ut. (Og for de av dere som venter på en Linux-versjon - en er klar for deg!)
Sammen med grunnleggende filoperasjoner, har kodehinting blitt dramatisk forbedret over tid. Forbedringer er gjort i alle aspekter (HTML, CSS og JavaScript). Nylig har Brackets lagt til støtte for parsing og hinting av dine egne funksjoner. Tenk deg at du har skrevet to JavaScript-funksjoner. Når du skriver samtalene dine til disse funksjonene, prøver Brackets å forstå både argumentene og typer argumentene som kreves, og gi koden støtte når du skriver. Her er et enkelt eksempel:
/ * * @param tall x Første nummer * @param tall y Annet nummer * / funksjon ringTheBell (x, y) 'bruk streng'; var totalt = x + y; retur totalt; funksjon sayHello (navn) 'bruk strenge'; returnere "Hei," + navn;
Koden min har to funksjoner, en kalt ringTheBell og en som heter si hei. Jeg ga noen ekstra metadata for ringTheBell, men det er ikke nødvendig. Å gi det skjønt, vil gjøre koden hinting litt finere. Nå skal jeg skrive en samtale til ringTheBell:
Legg merke til hvordan det oppdaget argumentene og og skriv inn. Hvis jeg legger inn en verdi for det første argumentet, legger du merke til hvordan koden hinting drister det andre argumentet:
Selv i tilfeller der braketten ikke kan bestemme hvilken type argument som brukes i en funksjon, vil den fortsatt gi deg Navn av argumentet som kan være nyttig:
Nylig Braketter lagt til ekte Støtte for HTML Live Connect.
Live Connect er sannsynligvis en av de kulere aspektene av braketter. Som nevnt ovenfor kan du redigere CSS og se oppdateringer i sanntid. Trenger du å justere polstring eller marginer? Du kan bruke redaktøren din og se effekten umiddelbart. Nettlesere tillater vanligvis dette (Chrome Dev Tools), men gir vanligvis ikke en enkel måte å få de endringene tilbake i kilden. Chrome har gjort fremskritt i dette området nylig, men så mye som jeg elsker Chrome, vil jeg helst skrive koden min i en redaktør.
Mens det fungerte bra for CSS, støttet det ikke HTML. Braketter vil automatisk laste inn nettleseren din på nytt når du lagrer en HTML-fil, men hvis du vil forhåndsvise endringene dine uten en redning, du var ute av lykke. Nylig Braketter lagt til ekte Støtte for HTML Live Connect. Når du endrer HTML-koden, oppdateres nettleseren i sanntid. Du vil også se høydepunkter i DOM for området du endrer. Dette oversetter ikke godt til skjermbilder, men forestill deg følgende HTML.
Test Dette er en test
fooioikkkllklkkopkk
Hvis jeg klikker i h2 ovenfor, gir Chrome et høydepunkt for det aktuelle elementet:
Hvis jeg endrer tekst inne i h2, Chrome vil gjenspeile disse endringene umiddelbart.
En annen viktig oppdatering til braketter involverer forlengelsesstøtte. Bak kulissene, hva utvidelser kan gjøre og hvordan de kan gjøre det, har forbedret seg gradvis med hver sprint. Selv om det ikke nødvendigvis var så viktig for en sluttbruker, hadde forbedringene gjort det enklere å legge til nye funksjoner i Brackets for folk som skrev utvidelser. Hvis du kan bruke mindre tid på boilerplate-kode og mer tid på funksjoner, er det en all-gevinst for å utvide Brackets. Braketter utsetter også muligheten til å bruke Node.js for utvidelser. Denne funksjonen gir utvidelsene muligheten til å benytte seg av noe Node-kan - som i seg selv åpner hele verden for deg. Dette er et ganske komplekst emne, men hvis du vil lære mer, les denne veiledningen: Brackets Node Process.
Det er bak kulissene, men for sluttbrukeren har Brackets kommet langt i å gjøre det enklere å faktisk bruke utvidelser. Braketter leveres nå med en fullverdig Extension Manager. Tilgjengelig via Fil meny eller et ikon i høyre renn, klikker det vil starte lederen:
Legg merke til at for hver utvidelse har installert, kan du se detaljer om versjonen, koblinger for ytterligere informasjon, og enda bedre, en rask måte å fjerne utvidelsen hvis den forårsaker problemer. På bunnen av denne sjefen er en knapp som lar deg installere utvidelser fra en nettadresse. Det er praktisk hvis du vet hvilken utvidelse du vil ha (samt GitHub-nettadressen), men hva hvis du ikke gjør det? Bare klikk på Tilgjengelig tab:
Du kan nå bla gjennom (og til og med filter) gjennom a lang liste over tilgjengelige utvidelser. Enda bedre, installasjon er like enkelt som å klikke på en knapp. Merk at brakettens Extension Manager er jevnt nok til å gjenkjenne når en utvidelse kanskje ikke er kompatibel med din versjon av braketter:
Sannsynligvis den mest spennende oppdateringen til braketter (i hvert fall for meg) er integrasjonen av Theseus. Theseus er et åpen kildekode-prosjekt laget av folk fra både Adobe og MIT. Det er fokusert på å tilby feilsøkingsstøtte for begge Chrome og Node.js applikasjoner. Tenk deg å kunne feilsøke en Node.js-applikasjon bestående av server-side JavaScript, så vel som klient-side-kode. Theseus gir nettopp det. Whileus er fortsatt tidlig i utviklingen, er Theseus nå integrert i Brackets og kan brukes i selve redaktøren.
Theseus har nå tre hovedtrekk:
La oss se på noen få eksempler på disse. Theseus kodetilpasningsstøtte vil vise hvor ofte en funksjon kalles. Det høres enkelt, men kan være kraftig. Jeg har nylig prøvd Theseus på en enkel demo som benyttet AJAX til å ringe et server-side program. Jeg la merke til at min demo ikke fungerte, og Theseus-integrasjonen i braketter bekreftet dette. Legg merke til meldingen "0 samtaler" ved tilbakeringingen min:
Viser seg at server-side-koden ikke ble satt opp riktig og Jeg skrev ikke JavaScript-koden min for å støtte en tilbakekalling for AJAX-anropet. Dette var bokstavelig talt første gang jeg spilte med Theseus, og det hjalp umiddelbart å peke på et problem i koden min. Etter å ha endret min front-end-kode, kunne jeg se forskjellen med en gang:
For å være klar, er dette gjort i sanntid. Med braketter åpne og Chrome åpen, kan jeg klikke rundt i programmet mitt og se oppdateringene i Braketter i synkronisering med mine handlinger i nettleseren.
På toppen av bare å se ringetellingen, kan jeg også klikke på et element og se hva som ble sendt til det. Dette er den retroaktiv inspeksjonsfunksjonen jeg nevnte ovenfor. Merk at du kan klikke på komplekse egenskaper og virkelig grave inn i dataene.
Til slutt, for asynkrone samtaler som min forekommer på en ubestemt tid etter deres opprinnelige samtale, har Theseus ikke noe problemhåndtering og organiserer disse samtalene riktig under deres initiator.
En av de tidligste funksjonene i parenteser var inline redigering for CSS-elementer. Du kan sette markøren i et HTML-element, trykk CMD / CTRL + E, og braketter ville skanne prosjektet ditt for å finne relevante CSS-filer, samt den tilhørende samsvaringsregelen. Dette gjorde det utrolig enkelt å raskt oppdatere stilarkene som gjelder for innholdet ditt.
Dette fungerte bra - så lenge innholdet faktisk hadde en matchende CSS-regel. I den siste oppdateringen til Braketter, vil editoren nå gjenkjenne når et element ikke har en matchende CSS-regel.
Du kan nå legge til en ny CSS-regel direkte fra inline-editoren.
Endelig blir det lagt til et nytt "skall" -utseende til Brackets. Bare tilgjengelig for Windows (men vil snart være i OSX-bygningen), det "mørke" utseendet er fremtiden for brakettene utseende og følelse.
Din primære redaktør er en veldig personlig beslutning for en utvikler.
Din primære redaktør er en veldig personlig beslutning for en utvikler. Jeg fant meg selv å bruke Sublime Text for noen måneder siden og la merke til at noe ikke fungerte riktig. Vises, jeg prøvde å bruke en Brackets-funksjon. Den dagen jeg byttet fra Sublime som min primære redaktør til Brackets. Jeg bruker fortsatt Sublime (og for å være klar, det er en fin kjære fantastisk redaktør!) Men nå er det daglige arbeidet mitt ferdig nesten helt i braketter.
Tydeligvis ville jeg elske at du skulle gå - akkurat nå - og last ned Brackets. Men hvis du ønsker å grave litt mer før du forplikte (hei, jeg forstår, å bygge et forhold med en redaktør er et seriøst foretak), sjekk ut disse ressursene:
Accentsconagua