Share
Când lucrați pe un site static, viața dvs. poate fi mult mai ușoară dacă aveți o modalitate simplă de a activa o previzualizare locală a designului dvs..
Ce este chiar mai bine dacă această previzualizare locală are o funcție de reîncărcare live, astfel încât să vedeți în mod automat modificările dvs. să devină efective pe măsură ce lucrați. Și chiar mai bine, dacă vă permite să vizualizați site-ul dvs. printr-o http: // protocol, dat fiind faptul că uneori lucrurile nu funcționează exact așa cum era de așteptat atunci când au fost văzute pe a fişier:// protocol.
Există mai multe moduri de a configura previzualizările locale, dar una dintre cele mai ușoare căi este de a opera direct prin editorul de cod Atom, profitând de ecosistemul său excelent de pachete de extensie. Tot ce trebuie să faceți este să instalați pachetul preferat, să-l activați și sunteți gata să plecați.
În acest sfat rapid vă voi arăta trei dintre cele mai bune pachete Atom pentru configurarea rapidă și ușoară a reîncărcării în timp real a imaginilor locale. Sa incepem!
Notă: Dacă nu aveți încă Atom, îl puteți apuca de la https://atom.io/
atom-live-server pachetul este personala mea "du-te la" atunci când am nevoie de o modalitate rapidă și ușoară de a previzualiza unele cod static. Se întoarce o previzualizare locală cu un http: // protocol și se actualizează automat când sunt salvate modificările aduse fișierelor utilizate în proiect.
Pentru ao instala, mergi la Pachete> Vizualizare setări> Instalare pachete / Teme. Apoi cautati "atom-live-server" si apasati Instalare pachet buton când o găsiți.
Pentru a utiliza pachetul, trebuie să aveți un director de proiect adăugat la Proiect bara laterală. De aici du-te la Pachete> atom-live-server> Start Server și o previzualizare a site-ului dvs. se va deschide în browserul dvs. implicit. Dacă trebuie să opriți din nou serverul, mergeți la Pachete> atom-live-server> Stop Server.
Dacă aveți mai multe proiecte deschise în bara laterală, oricare dintre ele se află în partea de sus, va fi previzualizat unul. Dacă trebuie să treceți de la previzualizarea unui proiect la altul, mai întâi opriți serverul, apoi glisați și fixați proiectul pe care doriți să îl previzualizați în partea superioară a barei laterale și reporniți serverul.
În loc să deschideți o previzualizare în browserul dvs. implicit, atom-html-preview pachetul vă oferă o previzualizare inline a oricărei pagini HTML din editorul Atom. Pentru a instala acest pachet urmați aceleași instrucțiuni ca și în cazul pachetului de mai sus, dar căutați în loc de "atom-html-preview".
Odată instalat, deschideți fișierul HTML pe care doriți să îl previzualizați, apoi mergeți la Pachete> Previzualizare HTML> Activare previzualizare. Veți vedea apoi spațiul dvs. de lucru împărțit, cu codul dvs. afișat în panoul din stânga și previzualizare vii în panoul din dreapta.
Atunci când se utilizează atom-html-preview, fișierele nu trebuie să fie salvate pentru ca previzualizarea să fie actualizată. Mai degrabă, pe măsură ce tastați, previzualizarea dvs. va fi actualizată în mod continuu.
atom-browser pachetul vă permite să previzualizați cu ușurință codul HTML într-o fereastră de browser încorporată în interiorul Atom, similar cu atom-html-preview. Din păcate, previzualizările se fac prin intermediul unui fişier:// protocol, dar nu include reîncărcare live.
Experiența reală a acestui pachet, totuși, este că puteți utiliza fereastra inline de previzualizare ca un browser obișnuit. Acest lucru face foarte convenabil să căutați documentația pe măsură ce lucrați sau să urmați, de exemplu, un tutorial de codare.
Instalați pachetul urmând pașii descriși mai sus și căutând atom-browser.
După instalare, deschideți browserul pentru navigarea obișnuită, mergând la Pachete> Atom Browser> Toggle.
Pentru a previzualiza un document HTML faceți clic dreapta pe el în Proiect bara laterală și alegeți Atom Preview. Pentru a activa reîncărcarea live în timp ce faceți codul, faceți clic pe pictograma mică de lumină de lângă câmpul URL al browserului.
Aceasta acoperă trei pachete de previzualizare live super-atractive pentru Atom. Cu acestea, în kit-ul dvs. de instrumente de păstrarea filelor pe desenele dvs. ca te duci ar trebui să fie mult mai neted și mai ușor!
Aveți alte sugestii cu privire la modalități rapide și ușoare de a gestiona previzualizările locale? Dacă da, vă rugăm să continuați și să le împărtășiți cu alți cititori Tuts + în comentariile de mai jos.
Accentsconagua