Share
En kode redaktør er brød og smør av noen webutvikler karriere. Det er den ene fasetten til en koderens verktøykjede som er verdsatt, men også valgt med ekstrem lidenskap og besluttsomhet. Dette vil ikke være en artikkel om hvilken kodeditor som er den mest populære, eller hva som gjør en bedre enn den neste; Formålet med denne artikkelen vil være for de som har valgt Atom som deres kodeditor og viser hvordan de gjør det fantastisk for hverdagsarbeid.
Emmet LiveStyle er det første bi-riktige sanntidsredigeringsverktøyet for CSS, LESS og SCSS-filer.
Atom-pakken er tilgjengelig her og krever ingen spesielle oppsett: Bare start Atom og Google Chrome, og du er klar for redigering i sanntid..
"LiveStyle bruker sine egne implementeringer av LESS og SCSS preprocessorer, skrevet i ren JavaScript. I motsetning til offisielle preprosessors implementeringer med sourcemaps, gir LiveStyle riktig kilde-til-resultat mappings, variable og mixin rekkevidde, feilgjenoppretting og delvis kompilering. "
En favorittfunksjon av meg er "Remote View" og lager en offentlig tilgjengelig nettadresse som peker til ditt lokale nettsted. Bruk denne nettadressen til å forhåndsvise på en hvilken som helst Internett-tilkoblet enhet eller nettleser med øyeblikkelig oppdatering i sanntid fra Atom og DevTools.
For å mestre denne pakken foreslår jeg sterkt å se gjennom dokumentasjonen og veiledningen for å sikre at den møter behovene for din spesifikke kontekst og, selvfølgelig, at du føler deg komfortabel før du bruker den.
Har du noen gang ønsket å bruke en fargeplukker mens du var koding? Ikke vær redd fordi Color Picker har ryggen din. Color Picker leser for øyeblikket HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 og VEC4 farger og kan konvertere mellom formatene.
Denne lille djevelen inspiserer også Sass og LESS fargevariabler som en super sleuth. Bare åpne fargeplukkeren med markøren på variabelen du velger, og det vil se opp definisjonen for deg. Du kan klikke på den angitte definisjonen og gå direkte til hvor den er definert.
Hvis fargeplukkeren ikke er din kopp te, kan du kanskje gi pigmenter en prøve. Pigmenter er en pakke for å vise farger i prosjektfiler. Pigmenter vil skanne kildefiler i prosjektkatalogen din og se etter farger og vil bygge en palett med dem alle (ganske glatt).
Med bevegelse etterspurt i vårt arbeid er det hyggelig å ha verktøy som hjelper i prosessen.
The Beer Curve Editor er en spilleskifter for bevegelse og interaktive utviklere på jakt etter den perfekte enklere kombinasjonsboksen. Velg mellom en rekke enkle alternativer som viser resultatene deres live eller lag din egen ved å dra håndtakene til det lettende visualiseringsverktøyet.
Vil du gjemme filer fra prosjektet ditt som ikke trenger å være forpliktet til repo eller vises til deg mens du jobber? I Atom er pakker fanen, søk "tree-view" og under innstillingene, merk av i boksen for Skjul ignorerte navn for å fjerne de globalt ignorerte filene fra trevisningen din, eller kombinere med Skjul VCS-ignorerte filer. Disse bestemte VCS-filene er de som kontrolleres av din .gitignore. Globalt ignorerte filer er slike som .DS_Store, for eksempel.
Når forbedringer av den visuelle navigasjonen din kan gjøres, foreslår jeg det, og det er derfor jeg elsker filikoner.
Denne pakken gir filene dine et fint lite ikon med litt farge for å hjelpe med å finne, og generelt få ting til å bli deilig. Den gir deg også muligheten til å tilpasse størrelse, farge nyanser, bytte ikoner og tilordne ikoner ved filutvidelse.
Liker du ikke å hoppe mellom kommandolinjen og redaktøren din for å gjøre forpliktelser? Denne GitHub pakken er nå buntet med alle versjoner av Atom 1.18 og senere.
Nyt evnen til å forgrene, scenere, forplikte, presse, trekke, løse konflikter og til og med se trekkforespørsler for GitHub rett fra innsiden Atom. For å åpne dette vinduet legger du markørens dødsenter for redaktøren din på høyre side og ser etter en fane med en pil. boom!
Jeg er en stor fan av denne, fordi det ser på fil som er en bris. Innen Atom har du tilgang til din historie om et sporet Git-prosjekt; pluss det er alt visuelt.
Git Time Machine gjør at du ser over filen diffs gøy igjen og mindre rotete enn å prøve å inspisere via kommandolinjen. Den viser en visuell plot av forpliktelser til den nåværende filen over tid, og du kan klikke på tidslinjen eller sveve over et merke og se alle forpliktelsene for et bestemt tidsrom. Du har muligheten til å tilbakestille komplette filer eller kirsebærvalgslinje etter linje. Det er en virkelig fantastisk pakke som skal inkluderes i Atom-arbeidsflyten din.
Søker etter nettleserstøtte har aldri vært enklere og alt gjort rett fra Atom takket være Kan jeg bruke pakken.
Skriv "kan jeg bruke" fra kommandopaletten din (Cmd + shift + P) Og begynn å skrive inn eiendommen eller søkeordet du trenger for støtte i prosjektet ditt. En svært effektiv måte å bruke denne tjenesten mot ved hjelp av nettleseren.
Pakker er ikke det eneste alternativet du må gjøre Atom mer magisk enn standardinstallasjonen. Det er mange flere alternativer som kan finnes rett fra kjerneinnstillingene for å gjøre skrivekode en behagelig opplevelse.
Under Atom er innstillinger se at du kan angi innpakningsinnstillinger.
De Myk innpakning alternativet vil vikle linjer som er for lange til å passe inn i ditt nåværende vindu. Hvis dette alternativet er deaktivert, vil linjene blø av side av skjermen, slik at du må rulle vinduet horisontalt for å se resten av innholdet.
Alternativet "Finn og erstatt" har eksistert i kode redaktører for alltid og med god grunn. For å søke i din nåværende fil kan du trykke cmd + f, skriv deretter søkestrengen din og trykk Tast inn (eller cmd + g eller Finn neste knappen) flere ganger for å bla gjennom alle kampene i den filen.
De Finn og erstatt panelet inneholder også knapper for å veksle mellom følsomhet, utføre regelmessig uttrykksmatching og scoping søk til valg. Du kan også finne og erstatte gjennom hele prosjektet ditt hvis du påbereder panelet med cmd + chift + f.
Atom har kommandoen atom - bærbart som gir et kommandolinjeparameteralternativ for innstilling av bærbar modus. Jeg har personlig hatt forferdelig hell med dette alternativet og ærligvis er docs på dette emnet fortsatt veldig mye behov for en omskrivning.
"Bærbar modus er mest nyttig for å ta Atom med deg, med all din tilpassede innstilling og pakker, fra maskin til maskin. Dette kan ta form av å holde Atom på en USB-stasjon eller en skyplattform som synkroniserer mapper til forskjellige maskiner, som Dropbox. "
Mitt forslag er å symbolisere din ~ / .Atom katalog til Dropbox (eller annen tjeneste, plassering etc.) og ring det en dag. Dette er katalogen som lagrer alle dine innstillinger, pakker, konfigurasjoner og slik at Atom er tilpasset for din bruk. Du kan fortsatt installere Atom fra hvilken som helst maskin, akkurat som du normalt ville, bortsett fra at du bruker .atom som en symlink referert til et annet sted du velger.
Hvis bærbar modus eller bruk av symlink-trick ikke er fristende, kan du vurdere å gi synkroniseringsinnstillinger en tur. Denne Atom-pakken synkroniserer innstillinger, keymaps, brukerstiler, init-skript, utdrag og installerte pakker på tvers av Atom-forekomster.
Hvis du vil bruke en tilpasset styling endring uten å lage et helt tema, kan du legge til dine tilpassede stiler til styles.less filen i din ~ / .Atom katalog.
For å åpne denne filen i Atom-editor velger du Atom> Stylesheet. Den enkleste måten å se hvilke klasser som er tilgjengelige for stil er å inspisere DOM manuelt med Utviklerverktøy via kommando + alternativ + i på samme måte som du gjør for Chrome.
Jeg har bare skrapt overflaten med pakker, plugins og så videre, men hvis du har ytterligere forslag, kommentarer eller tanker, oppfordrer jeg deg til å legge igjen en kommentar nedenfor og eventuelle relevante lenker som er relevante for denne diskusjonen. Hvis du er stor på lister enn absolutt kassen, kalles denne repoen på GitHub Awesome Atom; En kurert liste over herlige Atom-pakker og ressurser. Som en tidligere Sublim bruker har jeg vært helt fornøyd med mitt valg å flytte til Atom, og det vil fortsette å være min redaktør av valg i overskuelig fremtid. Glad koding!
Accentsconagua