Ennen kuin siirryt syvälle Brackets-laajennusten ymmärtämiseen, sinun on ensin saatava selkeä kuva siitä, mitä Brackets tarkoittaa koodausarenalla.
TMS Outsourcessa koodaamme paljon .
Moderni, tehokas ja silti kevyt tekstieditori, Brackets luotiin etupään kehittäjille ja web-suunnittelijoille.
Brackets tarjoaa kohdennettuja visuaalisia työkaluja ja esiprosessoritukea, mikä helpottaa suunnittelijoiden ja kehittäjien suunnittelua selaimessa.
Brackets-tekstieditori on epäilemättä yksi suosituimmista saatavilla olevista koodieditoreista, joka tulee lukuisten Brackets-laajennusten kanssa.
Olemme käyttäneet sitä itse viime kuukausina päivittäessämme wpDataTables, #1 Tables & Charts WordPress Plugin.
Mikä on Brackets from Brackets IO?
Avoimen lähdekoodin HTML-editori, Adobe Brackets on yksi arvostetuimmista tekstieditoreista käyttöliittymäkehittäjien joukossa. Se ei ole yhtä hyvin mainostettu kuin GitHubin kehittämä uusi kevyt tekstieditori Atom, mutta se on lupaava koodi- ja tekstieditori.
HTML:lle, JavaScriptille ja CSS:lle optimoituja sulkumerkkejä voidaan käyttää Windowsissa, Mac OS:ssä ja Linuxissa. Voit ladata Bracketsin osoitteesta brackets.io, jos etsit HTML-editoria Macia, Brackets for Windowsia, Macin HTML-editoria, HTML Bracketsia tai HTML- ja CSS-editoria.
Bracketsin, kevyen HTML-CSS-editorin, tärkeimmät ominaisuudet
- Live Preview: Hakasulkeet avaa selaimessasi uuden ikkunan, jossa näkyy nykyinen sivu. Tätä ei tarvitse päivittää kirjoittaessasi tai kun muutat tiedostoa. Sellaisenaan Brackets toimii selaimesi kehittäjätyökalujen laajennuksena.
- Pikamuokkaus: Oletetaan, että olet muokkaamassa HTML-koodia. Napsauta tunnistetta, jossa on vastaava CSS-ilmoitus linkitetyssä tiedostossa. Paina Ctrl/Command+E. Sisäänrakennettu editori tulee näkyviin ja antaa sinun muokata sääntöä heti.
- JSLint: Tämä ominaisuus toimii JavaScript-koodin kanssa tallennuksen aikana. Tulokset näkyvät ensisijaisen muokkausikkunan alla paneelina.
Brackets toteuttaa koodin täydennyksen etupään kehittäjien ja web-suunnittelijoiden näkökulmasta. Useat muut ominaisuudet määrittävät Hakasulkeet, mukaan lukien pikaavaus, pikahaku, komentoriviintegrointi ja usean koodin valinta.
Bracketsin suurin etu koodi- ja tekstieditorina on saatavilla oleva suuri määrä laajennuksia, jotka lisäävät toimintoja Bracketsin sisäisiin ominaisuuksiin. Laajennusten avulla voit muuttaa Visual Studion teemaa tai jopa luoda Brackets-teemoja.
Ilmaiset Brackets Extensions
Tämä viesti esittelee monia ilmaisia Brackets-laajennuksia, jotka on linkitetty takaisin GitHubiin, jotta varmistetaan suoja virheiltä tai vioittuneilta koodeilta:
Kuten nimestä voi päätellä, Beautify on yksi parhaista Brackets-laajennuksista, jotka on suunniteltu saamaan koodit näyttämään hyvältä. Beautify tekee tiedostoista entistä luettavampia ja sen avulla voit parantaa niiden ulkonäköä myös pikanäppäimellä: CMD-Shift-L (Mac) ja Ctrl-Shift-L (Win).
Voit myös muotoilla JavaScript-koodin ja tehdä siitä luettavamman Beautifyn avulla.
Autoprefixer on suunniteltu jälkiprosessoriksi käsittelemään tehokkaasti toimittajan etuliitteitä, ja se analysoi CSS-tiedostoja ja liittää sitten toimittajan etuliitteet CSS-sääntöihin. Kun Autoprefixer on integroitu omaisuudenrakennustyökaluusi, olet valmis. Lisäksi se pyyhkii vanhentuneet etuliitteet.
Tämä on yksi Brackets-laajennuksista, joka on suunniteltu parantamaan CSS- ja HTML-työnkulkua. Sen avulla voit näppäillä CSS:n kaltaisia lausekkeita, jotka jäsennetään ja johtavat tulosteen sen mukaan, mitä kirjaimellisesti näppäilit lyhenteeseen.
Emmetin tuottamat lyhenteet näyttävät CSS-kuvioita. Ne jäsennetään kuitenkin ajon aikana ja muutetaan siten jäsennellyksi lohkoksi yhdellä näppäimen painalluksella. Kun olet valinnut lyhenteet, voit nopeuttaa CSS- ja HTML-työnkulkua.
Minifier on yksi Brackets-laajennuksista, jotka pienentävät CSS- ja JavaScript-tiedostoja pikanäppäimellä: CMD+M tai Ctrl+M. Ne tallennetaan nimellä tiedostonimi.min.ext. Se on erittäin aikaa säästävä laajennus, koska se pakkaa tiedostoja ja minimoi asiaankuuluvat JS:t työskennellessäsi.
Erittäin hyödyllinen Brackets-laajennus, ToDo on loistava ratkaisu näyttää, seurata ja merkitä valmiiksi tai lajitella tehtäviä nykyisessä projektissa tai asiakirjassa. Tämä Brackets-laajennus tukee viittä tunnistetta, mukaan lukien ToDo, Note, Changes, FixMe ja Future.
Tämän laajennuksen hieno ominaisuus on, että sen avulla voit määrittää omia tunnisteitasi sekä mukauttaa tunnisteiden värejä. Voit käyttää luovuuttasi tämän Brackets-laajennuksen avulla.
Snippets on suunniteltu käyttämään pikanäppäimiä yleisimmin käytettyjen koodien kirjoittamiseen ja luomaan koodinpätkäkirjasto, jonka avulla voit kirjoittaa CSS-, JS- tai HTML-koodia kirjoittamalla vain muutaman kirjaimen koodinpätkään. Sinun ei tarvitse kirjoittaa samaa koodia ja tunnisteita toistuvasti.
On tärkeää, että kopioit suunnitteluosaan oikean määrän sanoja, mikä voi olla suunnittelijoille erittäin aikaavievää toimintaa. Lorem Ipsum, kuten nimestä voi päätellä, hoitaa tämän tehtävän puolestasi ja täyttää suunnitteluosat määritetyllä määrällä sanoja.
Komento, kuten lorem_wrap200. ja 200 sanaa ilmestyy taianomaisesti sinne, missä tarvitaan.
Vaikka Lorem Ipsum on yksi Brackets-laajennuksista, jotka täyttävät suunnitteluosat valetekstillä, Lorem Pixel luo paikkamerkkikuvia eri suunnitteluosioihin.
Tämä laajennus on helppokäyttöinen, ja sen avulla voit mukauttaa paikkamerkkikuvasi kokoa visuaalisella editorilla. Sen avulla voit myös käyttää mukautettuja URL-osoitteita valekuvien sisällyttämiseen.
Muistatko merkintätunnisteet? Kukaan ei pidä näiden tunnisteiden kirjoittamisesta, mutta ne ovat pakollisia jokaisessa uudessa asiakirjassa, käytätpä sitten PHP:tä, HTML:ää tai JavaScriptiä. Any Template on yksi Brackets-laajennuksista, jotka on tarkoitettu valmiiksi kirjoitettujen merkintöjen sisältävien mallien luomiseen.
Tämän jälkeen voit aloittaa uuden asiakirjan saman tien ilman, että sinun tarvitsee kirjoittaa näitä pakollisia merkintätageja. Valitse HTML-malli ja oletusarvoiset HTML-tunnisteet, jos haluat luoda uuden HTML-dokumentin. Sama koskee PHP:tä tai JavaScriptiä.
Brackets Icons on laajennus, joka luotiin auttamaan kehittäjiä ja suunnittelijoita sisällyttämään tiedostokuvakkeita Bracketsin sivupalkkiin. Kuten tiedät, visuaalinen elementti, kuten kuvake, tekee tiedostojen tunnistamisesta helpompaa kuin ei minkäänlaista ilmaisinta tai tekstiilmaisinta.
Hyödyllinen Brackets-laajennus, CSSLint, on suunniteltu tunnistamaan ja paikantamaan koodin laatuun liittyvät ongelmat sekä CSS-virheet. Laajennus raportoi virheistä/ongelmista käyttämällä CSS Lint -sääntöjä.
Asenna Brackets Extensions
Ei ole rakettitiedettä asentaa mitään saatavilla olevista Brackets-laajennuksista:
- avaa Brackets-editori
- avaa laajennukset-välilehti
- Etsi laajennuksia, jotka haluat asentaa
- Napsauta Asenna ja aloita asennus
Voit asentaa teemoja samalla tavalla. Se on melko yksinkertaista!
Lopetetaan ajatukset parhaiden kannakkeiden laajennuksien löytämisestä
Etupään kehittäjille ja web-suunnittelijoille ei ole muuta koodieditoria, joka olisi monipuolisempi kuin Brackets. Se on luokkansa paras editori, ja se on täynnä uskomattomia ominaisuuksia, joita voit tehostaa laajennusten lisätoiminnoilla.
Jos pidit tämän artikkelin lukemisesta Brackets-laajennuksista, sinun tulee tarkistaa tämä artikkeli WordPress-kehittäjien palkasta.
Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten JavaScript-kirjastoista, WordPress-koulutuksesta, HTML:n muuntamisesta WordPressiksi ja parhaasta koodieditorista.