Share
Un editor de cod este pâinea și untul din cariera oricărui dezvoltator web. Este singura fațetă a lanțului de scule al unui coder care este prețuit, dar ales și cu pasiune și hotărâre extremă. Acest lucru nu va fi un articol despre editorul de coduri care este cel mai popular sau care îl face pe cel mai bun decât cel care urmează; scopul acestui articol va fi pentru cei care au ales Atom ca editor de cod si arata cum sa faca minunat pentru munca de zi cu zi.
Emmet LiveStyle este primul instrument de editare bidirecțional în timp real pentru fișierele CSS, LESS și SCSS.
Pachetul Atom este disponibil aici și nu necesită o setare specială: pur și simplu porniți Atom și Google Chrome și sunteți pregătit pentru editarea în timp real.
"LiveStyle utilizează propriile implementări ale preprocesoarelor LESS și SCSS, scrise în JavaScript pur. Spre deosebire de implementările preprocesoarelor oficiale cu surse de date, LiveStyle furnizează corecții corecte pentru surse, variabile și mixe, recuperarea erorilor și compilarea parțială. "
O caracteristică preferată a mea este "Vizualizare la distanță" și creează o adresă URL disponibilă publicului îndreptată spre site-ul dvs. local. Utilizați această adresă URL pentru a previzualiza pe orice dispozitiv sau browser conectat la internet, cu actualizări instantanee în timp real de la Atom și DevTools.
Pentru a stăpâni acest pachet, vă recomand să consultați documentația și ghidul de inițiere pentru a vă asigura că îndeplinește nevoile pentru contextul dvs. specific și, bineînțeles, că vă simțiți confortabil înainte de al utiliza.
Ați vrut vreodată să utilizați un picker de culoare în timp ce codificați? Nu vă temeți, deoarece Color Picker are spatele. Color Picker citește în prezent culorile HEX, HEXa, RGB, HSL, HSLa, HSV, HSVa, VEC3 și VEC4 și poate converti între formate.
Acest mic diavol, de asemenea, inspectează Sass și variabilele de culoare mai slabe ca un super detectiv. Doar deschideți selectorul de culori cu cursorul dvs. pe variabila aleasă de dvs. și va căuta definiția pentru dvs. Puteți face clic pe definiția furnizată și puteți merge direct la locul unde este definită.
Dacă selectorul de culori nu este ceașcă de ceai, atunci poate să încercați Pigmenții. Pigments este un pachet pentru afișarea culorilor în fișierele de proiect. Pigmenții vor scana fișierele sursă din directoarele de proiect care caută culori și vor construi o paletă cu toate acestea (destul de slick).
Cu mișcarea din ce în ce mai solicitată în munca noastră, este frumos să ai instrumente care să ajute în acest proces.
Editorul curbei Bezier este un schimbător de jocuri pentru dezvoltatorii de mișcare și interactiv care caută combinația perfectă de relaxare. Alegeți între o multitudine de opțiuni de relaxare care afișează rezultatul în direct sau creați-vă propria prin tragerea mânerelor vizualizatorului de relaxare.
Doriți să ascundeți fișierele din proiectul dvs. care nu trebuie să fie angajate în repo sau afișate în timp ce lucrați? În Atom's pachete fila, căutați "afișarea în arbore" și sub setările sale, bifați caseta pentru Ascundeți numele ignorate pentru a elimina fișierele ignorate global din vizualizarea arborescentă sau pentru a le combina Ascundeți fișierele ignorate VCS. Aceste fișiere VCS speciale sunt cele controlate de dvs. .gitignore. Fișierele ignorate la nivel global sunt cele cum ar fi .DS_Store, de exemplu.
Când pot fi făcute îmbunătățiri pentru navigația dvs. vizuală, vă sugerăm să faceți acest lucru și de aceea îmi place pictogramele de fișiere.
Acest pachet oferă fișierelor dvs. o mică pictogramă mică, cu o anumită culoare, pentru a vă ajuta să găsiți și, în general, pentru a face lucrurile să arate delicioase. Vă oferă chiar posibilitatea de a personaliza dimensiunea, nuanțele de culoare, pictogramele de swap și de a atribui icoanele prin extensia fișierului.
Nu vă place să săriți între linia de comandă și editorul dvs. pentru a face comitete? Acest pachet GitHub este acum asociat cu toate versiunile Atom 1.18 și mai târziu.
Bucurați-vă de capacitatea de a ramifica, de a scena, de a comite, de a împinge, de a trage, de a rezolva conflictele și chiar de a vizualiza cererile de tragere pentru GitHub chiar din interiorul Atom. Pentru a deschide această fereastră, puneți cursorul în centrul editorului dvs. din partea dreaptă și căutați o filă cu o săgeată. bum!
Sunt un mare fan al acestui lucru, deoarece face ca privirea la fișiere să difere într-o briză. În cadrul Atom aveți acces la istoricul unui proiect Git urmărit; plus toate sunt vizuale.
Git Time Machine face din nou distracția fișierelor și este mai puțin dezordonată decât încercarea de a inspecta prin linia de comandă. Acesta arată o diagramă vizuală de comitere a fișierului curent în timp și puteți să faceți clic pe cronologie sau să treceți deasupra unui marcaj și să vedeți toate comitetele pentru un anumit interval de timp. Aveți opțiunea de a reveni la linia completă a fișierelor sau a cireșelor. Este un pachet cu adevărat fantastic pentru a include în fluxul de lucru Atom.
Căutarea asistenței browser-ului nu a fost niciodată mai ușoară și totul a fost realizat chiar din interiorul Atom datorită pachetului Pot I May Use.
Introduceți "pot să folosesc" din paleta de comandă (Cmd + Shift + P) Și începeți să tastați proprietatea sau termenul de căutare de care aveți nevoie pentru a vă ajuta în proiectul dvs. O modalitate foarte eficientă de a utiliza acest serviciu în comparație cu utilizarea browserului web.
Pachetele nu sunt singura opțiune pe care trebuie să o faceți Atom mai magic decât instalarea implicită. Există mai multe opțiuni care pot fi găsite chiar de la setările de bază pentru a face scrierea codului o experiență plăcută.
Sub Atom's Setări vizualizați puteți specifica preferințele de împachetare.
Soft Wrap opțiunea va înfășura linii care sunt prea lungi pentru a se încadra în fereastra curentă. Dacă această opțiune este dezactivată, liniile vor sângera în afara ecranului, astfel încât va trebui să derulați fereastra orizontal pentru a vedea restul conținutului.
Opțiunea "Găsește și înlocui" a fost în jurul valorii de editorii de cod pentru totdeauna și pentru un motiv bun. Pentru a căuta în fișierul curent, puteți apăsa cmd + f, apoi introduceți șirul de căutare și apăsați introduce (sau cmd + g sau Găsește următorul ) de mai multe ori pentru a trece prin toate potrivirile din acel fișier.
Găsiți și înlocuiți panoul conține, de asemenea, butoane pentru comutarea sensibilității cazurilor, efectuarea potrivirii expresiilor regulate și stabilirea domeniului de căutare în funcție de selecție. De asemenea, puteți găsi și înlocui în întregul proiect, dacă invoca panoul cmd + chift + f.
Atom are comanda atom - portabil care oferă o opțiune de parametru de linie de comandă pentru setarea modului portabil. Am avut personal noroc cu această opțiune și sincer docs pe acest subiect sunt încă foarte mult în nevoie de o rescriere.
"Modul portabil este cel mai util pentru a lua Atom cu tine, cu setările și pachetele personalizate, de la mașină la mașină. Acest lucru poate lua forma menținerii Atom pe o unitate USB sau o platformă de stocare în cloud, care sincronizează foldere către diferite mașini, cum ar fi Dropbox. "
Sugestia mea este sa te sincronizezi ~ / .Atom la Dropbox (sau un alt serviciu, locație etc.) și o numiți o zi. Acesta este directorul care stochează toate setările, pachetele, configurațiile și altele care fac Atom personalizat pentru utilizarea dvs. Puteți instala în continuare Atom de la orice mașină, la fel ca în mod normal, cu excepția cazului în care utilizați .atom ca un symlink referit la o altă locație aleasă de dumneavoastră.
În cazul în care modul portabil sau folosind trucul symlink nu este incomod, atunci vă recomandăm să dați setările pentru sincronizare. Acest pachet Atom va sincroniza setările, fișierele cheie, stilurile utilizatorilor, scriptul init, fragmentele și pachetele instalate din toate instanțele Atom.
Dacă doriți să aplicați o modificare personalizată a stilului fără a crea o temă întreagă, puteți să adăugați stilurile personalizate la styles.less fișier în dvs. ~ / .Atom director.
Pentru a deschide acest fișier în editorul Atom, selectați Atom> Foaie de stil. Cea mai ușoară modalitate de a vedea ce clase sunt disponibile pentru stil este de a inspecta DOM manual cu Instrumentele de dezvoltare prin intermediul comanda + opțiune + i în același mod pe care îl faci și pentru Chrome.
Am scraturat doar suprafața cu privire la pachete, plugin-uri și altele asemenea, dar dacă aveți alte sugestii, comentarii sau gânduri vă încurajez să lăsați un comentariu de mai jos și orice link-uri pertinente relevante pentru această discuție. Dacă ești mare pe liste decât să plătești cu siguranță acest repo pe GitHub numit Awesome Atom; O listă curate de pachete și resurse Atom încântătoare. Ca fost utilizator Sublim, am fost complet mulțumit de alegerea mea de a mă muta la Atom și va continua să fie editorul meu de alegere pentru viitorul previzibil. Codificare fericită!
Accentsconagua