Zagrade - prečaci, dodaci i postavke. zagrade. Potrebni dodaci Datoteka postavki zagrada
Webmasteri i programeri često koriste uređivače teksta za izradu web stranica. Ali funkcionalnost uobičajenih programa ove skupine, na primjer, Notepad, preuska je za ljude koji rade u tom smjeru. Za njih su stvorene posebne aplikacije dizajnirane za rad s označnim jezicima. Jedan od njih je besplatni uređivač teksta Brackets tvrtke Adobe.
Glavna značajka zbog koje su Brackets popularni među dizajnerima izgleda je podrška za veliki broj jezika za označavanje i web programiranje, naime: HTML, Java, JavaScript, CSS, C ++, C, C #, JSON, Perl, SQL, PHP, Python i još mnogo toga, ostalo (ukupno 43 predmeta).
U prozoru uređivača programskog koda, strukturni elementi gore navedenih jezika istaknuti su zasebnom bojom, što pomaže dizajneru izgleda da brzo krene kodom, kao i da lako pronađe početak i kraj izraza. Numeriranje redaka, mogućnost sažimanja blokova i automatsko strukturiranje markupa također služe kao dodatni čimbenici za pogodnost korisnika pri radu sa zagradama.
Rad s tekstom
U isto vrijeme, da biste koristili Brackets, nije potrebno biti programer ili dizajner web stranica, budući da program podržava i jednostavnu obradu teksta, poput običnog uređivača teksta.
Zagrade mogu raditi s vrlo velikim popisom kodiranja teksta: UTF-8 (zadano), Windows 1250 - 1258, KOI8-R, KOI8-Ru i drugi (ukupno 43).
Pregledajte promjene u pregledniku
Značajka podrške zagradama "Pregled uživo", koji leži u činjenici da se sve promjene napravljene u uređivaču teksta mogu odmah vidjeti u pregledniku Google Chrome. Stoga, da biste mogli koristiti ovu funkciju, potrebna je prisutnost ovog web preglednika na računalu. Dizajner izgleda može odmah vidjeti kako njegove radnje utječu na sučelje web stranice vidljivo korisniku, budući da se sve promjene prikazuju u Google Chromeu sinkrono kada se datoteka spremi.
Upravljanje datotekama
U uređivaču zagrada možete raditi s nekoliko datoteka u isto vrijeme, prebacujući se između njih pomoću izbornika. Osim toga, omogućeno je sortiranje otvorenih dokumenata po nazivu, datumu dodavanja i vrsti, kao i automatsko sortiranje.
Integracija kontekstnog izbornika
Zahvaljujući integraciji u kontekstni izbornik "Windows Explorer", možete otvoriti bilo koju datoteku pomoću zagrada bez prethodnog pokretanja samog programa.
Način otklanjanja pogrešaka
Pomoću zagrada možete pregledavati i uređivati web-stranice u načinu otklanjanja pogrešaka.
Traži i zamijeni
Program nudi praktičnu funkciju pretraživanja i zamjene tekstom ili kodom za označavanje.
Rad s ekstenzijama
Moguće je povećati funkcionalnost zagrada instaliranjem plug-in proširenja. Njima možete upravljati posebnim "Upravitelj proširenja" u zasebnom prozoru. Pomoću ovih elemenata možete dodati podršku za nove jezike za označavanje i programiranje u program, promijeniti teme sučelja, raditi s udaljenim FTP poslužiteljem, upravljati verzijama aplikacija, a također ugraditi druge funkcije koje nisu dostupne u izvornoj verziji uređivača teksta .
Prednosti
- Više platforma;
- Višejezičnost (31 jezik, uključujući ruski);
- Veliki broj podržanih programskih jezika i kodiranja teksta;
- Mogućnost dodavanja novih funkcija pomoću proširenja.
Mane
- funkcija " pregled uživo» dostupno samo putem preglednika Google Chrome;
- Neki dijelovi programa nisu rusificirani.
Brackets je moćan uređivač teksta za rad s kodom i jezicima za označavanje, koji ima vrlo široku funkcionalnost. Ali čak i tako širokom rasponu značajki programa, možete dodati nove pomoću proširenja dodataka.
Zagrade je projekt koji je razvio Adobe. U početku zamišljen kao uređivač koda za pojednostavljeno stvaranje web aplikacija. Tijekom prošle godine objavljeno je nekoliko ažuriranja koja ne samo da su poboljšala izvedbu uređivača, već su dodala i nekoliko značajki koje će biti korisne programerima.
Trenutna verzija je Zagrade 1.2.
Počnimo sa sučeljem programa:
Sučelje
Sučelje programa sastoji se od:
- Izbornik - datoteka, uređivanje, pretraživanje itd.
- Područje za odabir projektnih datoteka za uređivanje
- Područje koda
Također možete odabrati gumb za uključivanje načina rada. pregled uživo, ali o tome kasnije.
U početku, bez dodataka i tema, sučelje programa je prilično jednostavno i standardno. Ništa suvišno za programera početnika: isticanje sintakse koda u području za uređivanje, direktorij projektnih direktorija.
Pomoću kombinacije CTRL++ / CTRL+- možete povećati / smanjiti veličinu fonta.
Uz oslobađanje verzija 0.42 postojala je podrška za mijenjanje i instaliranje tema. Standard je bio samo svjetlo i tamno. Moram priznati da mi je tamna tema vizualno ugodnija.
Mijenjanje tema vrši se u kartici Pogled – Teme. U istoj kartici možete promijeniti font i njegov veličina.
Teme u zagradama
podijeljeni pogled
Verzija 0.44 popravljen veliki broj grešaka, poboljšana izvedba, a također je dodana funkcija kao što je podijeljeni pogled. Ova značajka će omogućiti podijeliti prostor za uređivanje na dva dijela i rad s dvije datoteke u isto vrijeme. Doduše, to je uvelike pojednostavilo razvoj.
Odvajanje je moguće vodoravno.
Horizontalna podjela područja za uređivanje zagrada
Također se može podijeliti okomito.
Okomita podjela područja za uređivanje zagrada
Paleta boja
Također u zagradama postoji korisna funkcija poput pozivanja palete boja pomoću kombinacije CTRL + E. Djeluje ovako:
Stavite tečajeve u kod boje i pritisnite kombinaciju CTRL+E. Otvorit će se paleta boja u kojoj možete odrediti koju boju i s kojom prozirnošću želite.
Paleta boja zagrada
Izvadak za zagrade (pregled)
Tri godine nakon što je objavljena prva verzija Bracketsa verzija 1.0. Osim poboljšanja performansi, dodatak kao što je Izvadak za zagrade (pregled).
Omogućuje vam otvaranje predložaka u formatu PSD izravno u zagradama i pregledajte ih kao u photoshop po slojevima. Pomoću njega možete vidjeti veličinu elementa stranice, poput blokova, u pikselima ili postocima, kao i njegovu lokaciju, a zatim odmah unijeti te vrijednosti u uređivač.
Izvadak za zagrade (Pregled)
U početku je ideja sjajna i vrlo korisna. Ali problem je bio u tome verzija 1.0 dodatak nije radio ispravno, usporavao je i opterećivao sustav.
Drugi nedostatak je potreba za posjedovanjem računa u "oblaku" Adobe Creative Cloud, jer PSD predlošci se tamo učitavaju.
Da budem iskren, čak i nakon izdavanja novih verzija, ne koristim ovu funkciju zbog "buggyja".
Upravitelj proširenja
Dodaci su instalirani u prozoru upravitelj proširenja, također možete instalirati teme dizajna.
Dodaci u zagradama omogućuju proširenje standardne funkcionalnosti i olakšavaju razvoj projekata. Jedan od ovih dodataka, dobro poznat Mrav.
Mrav- dodatak koji vam omogućuje pisanje velikog koda pomoću kratica, čime se štedi vrijeme.
Na primjer:
Upisivanjem sljedećeg koda u html dokument:
XHTML
ul>li*4>a
ul> li* 4> a[ href= # ] |
Nakon pritiska tipki prečaca (zadano postavljeno na tipku TAB) napisani kod će se "razmotati" u
XHTML
pregled uživo I na kraju, reći ću vam o tako divnoj funkciji kao što je pregled uživo. S ovom funkcijom možete vidjeti rezultat u stvarnom vremenu. Princip je jednostavan: birajte html dokument, uključiti pregled uživo. Otvorit će se prozor preglednika koji prikazuje vaš projekt u trenutnom pravopisu. Vrijedno je dodati da ova funkcija radi samo s preglednikom Krom . Čini se da se govori o podršci za druge preglednike, ali samo u budućim verzijama programa. Ali ova je funkcija, po mom mišljenju, ključna. Posebno za programere koji rade s dva zaslona. ZaključakOvdje želim završiti ovu recenziju. Mogu i to dodati Zagrade savršen početnici web programeri. Kao dizajneru web stranica početniku, preporučujem da ga koristite. Ovaj uređivač nije zahtjevan za resurse, jednostavan u sučelju, a uz pomoć prečaca i dodataka omogućuje vam da ubrzate i pojednostavite pisanje koda. Službena stranica urednika Zagrade. |
Uređivač teksta Brackets 1.6 - odličan za izgled web stranice. Ovo je izvrstan alat programera tvrtke Adobe. Uz značajku kodiranja uživo, nećete morati ponovno učitavati stranicu tijekom izgleda.
Opis uređivača zagrada
Općenito, izgled uređivača možete prilagoditi svojim željama. Ima skup standardnih tema. Svaka tema mijenja izgled prozora za uređivanje koda. Ovo mijenja i pozadinu i isticanje sintakse. Postoje i tamne i svijetle teme. Prema zadanim postavkama, sve otvorene datoteke i mape grupirane su na lijevoj ploči, ali se također mogu postaviti kao kartice iznad otvorene datoteke koja se može uređivati. Odnosno, u zagradama je sve učinjeno na takav način da možete sve učiniti najprikladnijim za sebe.
Značajke zagrada
Ovaj uređivač teksta razvijen je pomoću web tehnologija i ima sve njihove prednosti. Na primjer, više je platforma. Odnosno, možete pokrenuti Brackets na bilo kojoj platformi, bilo da je to Windows, Linux ili Mac.
Brackets ima ugrađeni birač boja za određivanje boje tijekom izgleda. Dovršavanje koda radi lijepo i brzo, a tu je i sustav za automatsko dovršavanje staza do datoteka i slika. To će vam uštedjeti puno vremena i spasiti vas od traženja potrebnih datoteka u mapama. Osim toga, postoji isječak za umetanje teksta ribe (lorem ipsum).
Također, uz ugrađene funkcije Bracketsa, možete proširiti njegovu funkcionalnost pomoću dodataka. Postoji ikona u malom okomitom stupcu s desne strane koja izgleda kao lego element. Klikom na njega otvorit će se modalni prozor s popisom svih dostupnih dodataka. Njihova instalacija traje samo nekoliko sekundi i vrši se pritiskom na jednu tipku.
Vjerojatno najvažnija i najistaknutija značajka Brackets je livecoding značajka, koja prikazuje sve promjene u kodu odmah na web stranici. Ova je značajka ovdje dobro implementirana. Ovo nije banalno ponovno pokretanje nakon unošenja promjena, ovo je kodiranje uživo. Da biste ga pokrenuli, morate kliknuti ikonu munje na desnoj ploči uređivača. Ova će radnja otvoriti datoteku u pregledniku za gledanje uživo. Također, ovdje možete omogućiti isticanje funkcije na stranici mjesta na kojem se nalazite u kodu. Vrlo je praktičan i štedi vam puno dragocjenog vremena ako ga često koristite.
Unatoč tako bogatoj funkcionalnosti, Brackets se može besplatno preuzeti. Izvrstan je za svakodnevni rad i bit će dobra zamjena za vašeg trenutnog urednika.
Tehnički podaci:
Verzija: Zagrade 1.6
Status: Slobodan
ruski jezik
Autor: Adobe
Sustav: Windows
Veličina: 36.7Mb
Uvod
Ne tako davno, na Habréu je objavljeno mnogo članaka koji su se na ovaj ili onaj način odnosili na Brackets editor. Mnogi ljudi su odmah imali prilično poštena pitanja:- Po čemu je bolji od %EDITOR_NAME% koji koristim?
- Postoji li mnogo dodataka za to?
- Isplati li se petljati ili je bolje koristiti neki poznati IDE ili uređivač teksta?
Funkcionalnost izvan okvira
Iako je Brackets pozicioniran kao uređivač teksta, zapravo je sve više poput punopravnog IDE-a. Ipak, treba reći što dobivamo osnovnom instalacijom ovog editora:- dodatak za Live Preview - radi samo s Google Chromeom. Sve izmjene koda vršimo u editoru - promjene se automatski prikazuju u prozoru preglednika
- isticanje sintakse
- savjete za uređivanje CSS, JS i HTML datoteka
- nespretan prikaz ćiriličnog teksta. Obećavaju da će to popraviti u jednom od sljedećih izdanja. Sada postoji nekoliko rješenja, više o tome u nastavku.
Nosači iz kutije
Opća namjena
Ocjena ekstenzija
Za početnike savjetujem da ovaj dodatak stavite na prvo mjesto. Omogućuje vam razvrstavanje ostalih proširenja u katalogu prema različitim kriterijima, a također prikazuje razne dodatne informacije: broj preuzimanja, zvjezdica i račvanja na GitHubu, što vam omogućuje da barem grubo procijenite korisnost ovog proširenja.Prije i poslije
Zagrade Git
Iz naslova je sve vrlo jasno. Vrlo korisno proširenje za rad s poznatim sustavom kontrole verzija.Git u zagradama
preklapanje koda
Bez ovog dodatka Brackets nema tako potrebnu funkciju kao što je savijanje koda. Nakon instalacije, trokuti će se pojaviti s lijeve strane, pored brojeva redaka, koji vam omogućuju da sažmete one fragmente koji sada nisu potrebni.Preklapanje koda
Mrav
Ne treba ga predstavljati, ali za početnike će biti zanimljivo učiti o njemu. Ovaj vam dodatak omogućuje značajno ubrzanje unosa teksta prilikom uređivanja LESS, CSS i HTML.Na primjer, unosimo sljedeću strukturu:
button.btn.btn-primary(gumb)
Nakon pritiska na tipku Tab, proširit će se na ovo:
Krenuti dalje:
div.btn-toolbar>(button.btn.btn-default(Button))*3
proširuje se na
Neću dalje praviti spojlere, bolje je pročitati recenzije koje su već dostupne na Habréu:
Također preporučam službene upute (na engleskom).
pregled koda
Omogućuje malu ploču na desnoj strani prozora uređivača koja prikazuje sav kod iz ptičje perspektive. Možete brzo skočiti do bilo koje točke interesa.Osim dodatka CodeOverview, tu je i BluePrint u Beta verziji. Što je bolje - odlučite sami.
Pregled koda
Alatna traka dokumenata
Za one koji su navikli na sučelje s karticama i ne žele se odviknuti od njega (u zamjenu Brackets nudi popis otvorenih datoteka iznad stabla).Zagrade Fontovi
Omogućuje vam da s popisa odaberete font koji će se koristiti za prikaz teksta u uređivaču. Obratite pozornost na to kako su se počeli prikazivati ćirilični znakovi. Osim toga, postoji nekoliko drugih dodataka s istom funkcionalnošću. U izborniku je moguće otvoriti stavku Pogled / Teme, gdje možete ručno odrediti koji će se fontovi koristiti.Fontovi
Http poslužitelj za zagrade
Pokreće lokalni HTTP poslužitelj za otklanjanje pogrešaka u vašem projektu. Koja je razlika od ugrađenog Live Preview-a?- Ovo nije LivePreview, tj. Stranica se mora ažurirati ručno.
- Ovom poslužitelju možete pristupiti iz bilo kojeg preglednika instaliranog u sustavu. Programeri IE i Firefoxa raduju se.
Grunt za zagrade
Brackets može ponuditi dodatak za Grunt "a. Njegova konfiguracija je zasebna tema, neki su čak napisali cijele knjige o tome. Od sebe ću samo napomenuti da je sada, 2014. godine, ne koristiti Grunt ili Gulp znak lošeg ukusa i neozbiljnost programera.Uljepšaj, uljepšaj
Jednostavnim pritiskom na kombinaciju tipki Ctrl+L ili Ctrl+B, loše stilizirani JS ili HTML kod pretvara se u dobro stiliziran kod. Na slikama Habrovog global_main.js prije i nakon primjene ovog dodatka. Nemojte koristiti ove dodatke za MANJE! Oni umeću razmake nakon dvotočaka, što LESS datoteku čini nemoguće kompajlirati.Pomoćnice, sve je u stroju za mljevenje mesa!
Brza pretraga
Dvostruki klik na izraz ističe sva njegova pojavljivanja u dokumentu. Autor ekstenzije inspiriran je Notepadom ++, što ne skriva.bilježnica++? Ne.
SFtpUpload, FTP-Sync
Omogućuje učitavanje projektnih datoteka na poslužitelj putem (S)FTP-a. Mogu se autorizirati ključem.FTP sinkronizacija, SFtpUpload
dizajner prijeloma
MANJE Automatsko prevođenje
Za one koji ne žele glavobolju uređivanja CSS-a, LESS postoji već dugo vremena. Ovaj vam dodatak omogućuje automatsko kompajliranje vaših .less datoteka prilikom spremanja. U trenutnom stanju zahtijeva malo dotjerivanja.- U zaglavlju .less datoteke trebate napisati nešto poput:
//out: ../css/login.css
ako treba nadjačati izlazni direktorij.css. U suprotnom će se .css datoteka kreirati na istom mjestu kao i .less datoteka, što nije baš dobro. Ovdje su zapisane sve ostale LESS postavke za datoteku. - U postavkama projekta morate eksplicitno odrediti koje datoteke LESS treba obrađivati. Da biste to učinili, dodajte u .zagrade.json ili prevesti.json(oba su u korijenskom direktoriju projekta, prvi je automatski kreiran pomoću zagrada) sljedeće:
( "less": [ "static/login/less/login.less", "static/desktop/less/index.less" //I sve druge LESS datoteke ] )
Automatski prefiks zagrada
Mislim da ovaj dodatak ne treba predstavljati. Umeće potrebne dodatke u postojeću CSS datoteku za podršku prefiksa dobavljača i starijih preglednika. Ovisno o postavkama, možete dobiti različite rezultate. Ima prilično jednostavan prozor opcija. Potpuni popis može se vidjeti na GitHub stranici projekta.Minimalizam postavki Autoperefixera
CSSLint, LESSLint, LESS StyleSheets Formatter
Tri dodatka za poboljšanje vašeg LESS i CSS koda. Ukazat će na tipične i ne tako česte pogreške. Primjer na slici.Greške u CSS-u
HTMLHint, više savjeta za CSS kod, više savjeta za HTML5 kod
Dodaci samo daju dodatne savjete prilikom uređivanja HTML-a i CSS-a. S obzirom na brzinu kojom se dodaju različita poboljšanja i dodaci osnovnoj isporuci Bracketsa, treba pričekati integraciju funkcionalnosti ovih dodataka u jezgru.ColorHints, izbor boja u zagradama
Prvi prikazuje opis alata kada lebdite iznad koda ili naziva boje u uređivaču, a također može prikazati i gradijente. Drugi prikazuje prozor s paletom za odabir željene boje. Kada uređujete LESS datoteke, prozor za odabir boje treba pozvati Ctrl+Alt+K ako se ne pojavi automatski nakon unosa riječi boja.Savjeti za unos gradijenata i boja
JavaScript programer
JSHint, JSLint, JSHint konfigurator, JSLint konfigurator
Izuzetno korisni dodaci za programere koji ne samo da kucaju, već i pišu kod u JavaScriptu. Možete birati između JSHint i JSLint, iako možete koristiti oba (drugi će biti mnogo pristraniji prema vašem kodu). Konfiguratori, kao što naziv implicira, omogućuju konfiguriranje različitih opcija provjere koda, na primjer, ignoriranje upotrebe requirejs funkcije prije nego što se deklarira.Svi već znaju čemu služi svaki od parametara.
FuncDocr
Dodatak vam omogućuje brzo dokumentiranje JS funkcija.Na primjer, postoji sljedeći kod:
Desktop.prototype.addResizeHandler = function(handler) ( if ($.isFunction(handler)) ( this.resizeActions.push(handler); ) );
Stavite ispred deklaracije funkcije i upišite /**. Nakon pritiska tipke Enter, FuncDocr će proširiti ovaj komentar, zamjenjujući praznine, gdje samo trebate unijeti potrebno:
/** * [] * @param ([]) rukovatelj [] */ Desktop.prototype.addResizeHandler = function(handler) ( if ($.isFunction(handler)) ( this.resizeActions.push(handler); ) ) ;
Savjeti za AngularJS kod, AngularJS za zagrade
Dodajte savjete prilikom unosa Angular direktiva. Nisam upoznat s ovim okvirom, ali nadam se da će ova dva dodatka ispuniti očekivanja stručnjaka.Preimenuj JavaScript identifikator
Postajemo identifikator, pritisnite Ctrl + R, unesite novo ime - sva pojavljivanja varijable u skripti automatski se preimenuju.Žlica katrana
Uz svu raznolikost postavki i parametara, postoje neke pritužbe na zagrade. Prva i najvažnija je brzina. S velikim brojem dodataka i puno CSS-a povezanih s dokumentom, počinje primjetno usporavati pojavu tooltipsa prilikom uređivanja dokumenata. Ponekad morate dosta dugo čekati na reakciju urednika kada uređujete JS skripte. Drugo je prilično nezgodno navigacijsko stablo. Treće, neki dodaci mogu "objesiti" uređivač, sprječavajući ga da se normalno zatvori i spremi postavke.Danas ćemo razmotriti jedan od programa koji ćemo koristiti za rad s izgledom stranice - ovo su zagrade. Program možete preuzeti i instalirati sa službene web stranice na zagrade.io. U samoj instalaciji nema ništa komplicirano, ali postavljanje za prikladan rad oduzet će vam 5 minuta.
Instalirajte dodatke u zagradama
Instaliranje dodataka jednostavno je kao dva i dva. Pokrećemo Brackets, tražimo ploču s lijeve strane i odabiremo gumb "Extension Manager".
Prilikom prvog pokretanja, program inicijalizira proširenja, ažurirajući njihovu bazu podataka. Upravitelj proširenja Brackets ima tri kartice: Dostupno, Teme, Instalirano. Sukladno tome, zanima nas tab Dostupno.
U polje za pretraživanje unesite naziv dodatka, odaberite dodatak i kliknite "Instaliraj". Nakon instaliranja svih dodataka, preporučljivo je ponovno pokrenuti program.
Evo popisa dodataka koji će nam trebati:
- Mrav- dodatak koji vam omogućuje značajno ubrzanje pisanja html i css koda pomoću kratica i kratica. Dakle, ako želite da se uskličnik (!) pretvori u punu html stranicu nakon pritiska tipke tab, onda vam je potreban ovaj dodatak. Također vam omogućuje prelamanje teksta s HTML oznakama.
- Kartice - Custom Working je dodatak koji dodaje prekrasne kartice u zagrade. Označava nespremljene datoteke zelenim krugovima. Glavna svrha dodatka je učiniti rad vizualnijim.
- Prekoračenje- dodatak koji vam omogućuje pomicanje koda do kraja stranice, pa čak i pomicanje praznog područja.
- Font koda- u modernim verzijama zagrada omogućuje promjenu fonta koda. U starijim verzijama jednostavno je potrebno, jer je program ruski font prikazao vrlo ružno.
- Zagrade Dodatni izbornik desnom tipkom miša- dodaje mnogo zgodnih "dobrina" u kontekstni izbornik - na primjer, stavke "Kopiraj" i "Zalijepi".
- Automatsko spremanje datoteka na zamagljivanje prozora- dodatak za automatsko spremanje otvorenih datoteka u trenutku kada prozor programa izgubi fokus (na primjer, ako se prebacite na preglednik).
Podsjećam vas da nakon instaliranja dodataka ponovno učitajte zagrade.
Također pogledajte naš video o instaliranju dodataka u Brackets.