Share
Een code-editor is het brood en boter van de carrière van een webontwikkelaar. Het is het enige facet van de gereedschapsketen van een codeerder dat gekoesterd wordt, maar ook met uiterste passie en daadkracht gekozen wordt. Dit zal geen artikel zijn over welke code-editor het populairst is, of wat het ene beter maakt dan het andere; het doel van dit artikel is voor diegenen die Atom hebben gekozen als hun coderedacteur en laten zien hoe je het geweldig kunt maken voor alledaags werk.
Emmet LiveStyle is de eerste bi-directionele realtime bewerkingstool voor CSS-, LESS- en SCSS-bestanden.
Het Atom-pakket is hier beschikbaar en vereist geen speciale configuratie: start eenvoudigweg Atom en Google Chrome en u bent klaar voor real-time bewerking.
"LiveStyle gebruikt zijn eigen implementaties van LESS en SCSS preprocessors, geschreven in pure JavaScript. In tegenstelling tot officiële implementaties van preprocessors met sourcemaps, biedt LiveStyle de juiste bron-tot-resultaattoewijzingen, variabele en mixin-scopes, foutherstel en gedeeltelijke compilatie. "
Een favoriete functie van mij is "Remote View" en maakt een openbare URL die verwijst naar uw lokale site. Gebruik deze URL om een voorbeeld weer te geven op elk apparaat of elke browser met internetverbinding met directe realtime updates van Atom en DevTools.
Om dit pakket onder de knie te krijgen, raad ik u aan de documentatie en de handleiding om te controleren of het voldoet aan de behoeften voor uw specifieke context en dat u zich natuurlijk op uw gemak voelt voordat u het gebruikt..
Heeft u ooit een kleurenkiezer willen gebruiken terwijl u codeerde? Wees niet bang, want Color Picker heeft je rug. Color Picker leest momenteel HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 en VEC4 kleuren en is in staat om te converteren tussen de formaten.
Deze kleine duivel inspecteert ook Sass- en LESS-kleurvariabelen zoals een speurder. Open gewoon de kleurkiezer met uw cursor op de variabele van uw keuze en het zal de definitie voor u opzoeken. U kunt op de geleverde definitie klikken en direct naar de gedefinieerde definitie gaan.
Als de kleurkiezer niet jouw kopje thee is, probeer dan Pigmenten eens. Pigments is een pakket voor het weergeven van kleuren in projectbestanden. Pigments scant bronbestanden in uw projectdirectory's op zoek naar kleuren en bouwt een palet op met allemaal (redelijk glad).
Met steeds meer gevraagd in ons werk is het fijn om tools te hebben die helpen in het proces.
De bezier curve-editor is een game-wisselaar voor motion- en interactieve ontwikkelaars die op zoek zijn naar de perfecte easing-combo. Kies uit een groot aantal verspaningsopties die hun resultaat live weergeven of maak uw eigen opties door de handvatten van de easing-visualizer te slepen.
Wilt u bestanden uit uw project verbergen die niet moeten worden toegewezen aan uw repo of aan u getoond terwijl u werkt? In Atom's Pakketjes tab, zoek "boomstructuur" en schakel het vakje voor onder zijn instellingen in Verberg genegeerde namen om de globaal genegeerde bestanden uit uw boomstructuur te verwijderen of te combineren met Verberg VCS genegeerde bestanden. Deze specifieke VCS-bestanden zijn de bestanden die door uw worden beheerd .gitignore. De globaal genegeerde bestanden zijn die zoals .DS_Store, bijvoorbeeld.
Wanneer er verbeteringen aan uw visuele navigatie kunnen worden aangebracht, raad ik aan dit te doen, en dat is waarom ik van bestandspictogrammen houd.
Dit pakket geeft je bestanden een leuk klein icoontje met een beetje kleur om je weg te vinden, en over het algemeen maak je dingen er heerlijk uitzien. Het biedt u zelfs de mogelijkheid om de grootte, kleurtinten, pictogrammen en iconen aan te passen per bestandsextensie.
Vind je het niet leuk om tussen de command-line en je editor te springen om commits te maken? Dit GitHub-pakket is nu gebundeld met alle versies van Atom 1.18 en hoger.
Geniet van de mogelijkheid om GitHub vanuit Atom te vertakken, te traceren, vast te leggen, te duwen, te trekken, conflicten op te lossen en zelfs trekkingsverzoeken te bekijken. Om dit venster te openen, plaatst u uw cursor in het midden van uw editor aan de rechterkant en zoekt u naar een tabblad met een pijl. Boom!
Ik ben een grote fan van deze omdat het het bekijken van bestandsversies een fluitje van een cent maakt. Binnen Atom heb je toegang tot je geschiedenis van een bijgehouden Git-project; plus het is allemaal visueel.
Git Time Machine maakt het kijken over bestanden weer leuk en minder rommelig dan proberen te inspecteren via de opdrachtregel. Het toont een visuele plot van commits naar het huidige bestand in de loop van de tijd en u kunt op de tijdlijn klikken of met de muis over een markering bewegen en alle commits voor een specifiek tijdbereik bekijken. Je hebt de mogelijkheid om complete bestanden of cherrypicking regel voor regel terug te zetten. Het is een echt fantastisch pakket om op te nemen in je Atom-workflow.
Zoeken naar ondersteuning voor browsers was nog nooit zo eenvoudig en alles vanuit Atom gedaan, dankzij het Can I Use-pakket.
Typ "kan ik gebruiken" in uw opdrachtenpalet (Cmd + Shift + P) En begin met het typen van de eigenschap of zoekterm die u nodig heeft voor ondersteuning in uw project. Een zeer efficiënte manier om deze service te gebruiken versus de webbrowser.
Pakketten zijn niet de enige opties die je hebt om Atom meer magisch te maken dan de standaardinstallatie. Er zijn veel meer opties die direct vanuit de kerninstellingen kunnen worden gevonden om van schrijven een prettige ervaring te maken.
Onder Atom's instellingen weergave kunt u uw wrappingvoorkeuren opgeven.
De Zachte omslag optie omloopt lijnen die te lang zijn om in uw huidige venster te passen. Als deze optie is uitgeschakeld, zullen de lijnen aan de zijkant van uw scherm uitvloeien, zodat u het venster horizontaal moet schuiven om de rest van uw inhoud te bekijken.
De "Find and Replace" -optie bestaat voor altijd en voor altijd in code-editors. Om te zoeken in uw huidige bestand, kunt u op drukken cmd + f, typ vervolgens uw zoekreeks en druk op invoeren (of cmd + g of de Vind Volgende knop) meerdere keren doorlopen om alle wedstrijden in dat bestand te doorlopen.
De Zoek en vervang paneel bevat ook knoppen voor het wisselen van hoofdlettergevoeligheid, het uitvoeren van reguliere expressiematching en het doorzoeken van selecties. Je kunt het hele project ook vinden en vervangen als je het paneel aanroept cmd + chift + f.
Atom heeft het bevel atoom - verplaatsbaar die een opdrachtregelparameter biedt voor het instellen van de draagbare modus. Ik heb persoonlijk ontzettend veel geluk gehad met deze optie en eerlijk gezegd hebben de documenten over dit onderwerp nog steeds een herschrijving nodig.
"Draagbare modus is het handigst om Atom bij u te nemen, met al uw persoonlijke instellingen en pakketten, van machine tot machine. Dit kan de vorm aannemen van het houden van Atom op een USB-schijf of een cloudopslagplatform dat mappen synchroniseert naar verschillende machines, zoals Dropbox. "
Mijn suggestie is om je te symboliseren ~ / .Atom map naar Dropbox (of een andere dienst, locatie enz.) en noem het een dag. Dit is de map waarin al uw instellingen, pakketten, configuraties en dergelijke zijn opgeslagen die Atom voor u persoonlijk maken. Je kunt Atom nog steeds vanaf elke computer installeren zoals je normaal zou doen, behalve als je het gebruikt .atoom als een symlink naar een andere locatie van uw keuze.
Als de draagbare modus of het gebruik van de symlink-truc niet aanlokkelijk is, zou je kunnen overwegen om sync-instellingen te geven. Dit Atom-pakket synchroniseert instellingen, keymaps, gebruikersstijlen, init-scripts, fragmenten en geïnstalleerde pakketten binnen Atom-instanties.
Als u een aangepaste stijlverandering wilt toepassen zonder een volledig thema te maken, kunt u uw aangepaste stijlen toevoegen aan de styles.less bestand in uw ~ / .Atom directory.
Om dit bestand in de Atom-editor te openen, selecteert u Atoom> stylesheet. De eenvoudigste manier om te zien welke klassen beschikbaar zijn voor stijl, is door de DOM handmatig te inspecteren met de Developer Tools via opdracht + optie + i op dezelfde manier als voor Chrome.
Ik heb alleen oppervlakkig over pakketten, plug-ins en dergelijke geschraapt, maar als je verdere suggesties, opmerkingen of gedachten hebt, moedig ik je aan om hieronder een opmerking achter te laten en alle relevante links die relevant zijn voor deze discussie. Als je groot bent op lijsten, kun je deze repository op GitHub, genaamd Awesome Atom, zeker uitchecken; Een samengestelde lijst met prachtige Atom-pakketten en -bronnen. Als voormalige Sublime-gebruiker ben ik volledig tevreden met mijn keuze om naar Atom te verhuizen en het zal voor de nabije toekomst mijn voorkeursredacteur blijven. Happy codering!
Accentsconagua