Enne Bracketsi laienduste mõistmise protsessi sügavamale asumist peate esmalt saama selge pildi sellest, mida Brackets kodeerimisareenil tähistab.
TMS Outsource’is kodeerime palju.
Moodne, võimas ja samas kerge tekstiredaktor Brackets loodi esiotsa arendajatele ja veebidisaineritele.
Brackets pakub keskendunud visuaalseid tööriistu ja eelprotsessori tuge, mis muudab disainerite ja arendajate jaoks brauseris kujundamise lihtsaks.
Bracketsi tekstiredaktor on kahtlemata üks populaarsemaid saadaolevaid koodiredaktoreid, mis on varustatud arvukate Bracketsi laiendustega.
Oleme seda viimastel kuudel ise kasutanud, töötades WordPressi pistikprogrammi nr 1 tabelite ja diagrammide värskendamisel wpDataTables .
Mis on Brackets alates Brackets IO?
Avatud lähtekoodiga HTML-i redigeerija Adobe Brackets on kasutajaliidese arendajate seas üks hinnatumaid tekstiredaktoreid. Seda ei reklaamita nii hästi kui GitHubi välja töötatud uut kerget tekstiredaktorit Atom, kuid see on paljutõotav koodi- ja tekstiredaktor.
HTML-i, JavaScripti ja CSS-i jaoks optimeeritud sulgusid saab kasutada Windowsis, Mac OS-is ja Linuxis. Bracketsi saate alla laadida saidilt brackets.io, kui otsite HTML-redaktorit Macile, Bracketsi Windowsile, Maci HTML-redaktorile, HTML Bracketsile või HTML-i ja CSS-i redaktorile.
Kerge HTML-i CSS-i redaktori Bracketsi põhifunktsioonid
- Reaalajas eelvaade: sulud avab teie brauseris uue akna, mis näitab praegust lehte. See ei vaja tippimisel ega faili muutmisel värskendamist. Sellisena käitub Brackets teie brauseri arendajatööriistade laiendusena.
- Kiirredigeerimine: oletame, et redigeerite HTML-koodi. Klõpsake lingitud failis vastava CSS-deklaratsiooniga märgendit. Vajutage Ctrl/Command+E. Ilmub tekstisisene redaktor ja saate seda reeglit kohe muuta.
- JSLint: see funktsioon töötab salvestamisel JavaScripti koodiga. Tulemused kuvatakse peamise redigeerimisakna all paneelina.
Brackets rakendab koodi lõpetamist esiotsa arendajate ja veebidisainerite vaatenurgast. Mitmed muud funktsioonid määravad sulud, sealhulgas kiiravamine, kiirotsing, käsurea integreerimine ja mitme koodi valik.
Bracketsi kui koodi- ja tekstiredaktoriga kaasnevaks suurimaks eeliseks on saadaolevate laienduste suur hulk, mis lisavad Bracketsi sisseehitatud funktsioonidele funktsionaalsust. Laiendused võimaldavad teil muuta visuaalstuudio teemat või isegi luua Bracketsi teemasid.
Tasuta sulgude laiendused
See postitus tutvustab paljusid tasuta Bracketsi laiendusi, mis on tagasi lingitud GitHubiga, et tagada kaitse vigade või rikutud koodide eest:
Nagu nimigi ütleb, on Beautify üks parimaid Bracketsi laiendusi, mis on loodud koodide hea väljanägemise tagamiseks. Beautify muudab failid eriti loetavaks ja võimaldab teil nende välimust täiustada ka kiirklahviga: CMD-Shift-L (Mac) ja Ctrl-Shift-L (Win).
Samuti saate Beautify abil vormindada JavaScripti koodi ja muuta selle loetavamaks.
Autoprefixer, mis on loodud postprotsessorina, et hallata tõhusalt hankija eesliiteid, analüüsib CSS-faile ja lisab seejärel CSS-i reeglitele hankija eesliited. Kui Autoprefixer on teie varade kogumistööriista integreeritud, on kõik valmis. Lisaks pühib see vananenud eesliited.
See on üks Bracketsi laiendustest, mis on loodud CSS-i ja HTML-i töövoo täiustamiseks. See võimaldab teil sisestada CSS-i sarnaseid väljendeid, mis seejärel sõelutakse ja mille tulemuseks on väljund vastavalt sellele, mida te sõna otseses mõttes lühendite sisestasite.
Emmeti loodud lühendid kuvatakse CSS-i mustritena. Neid sõelutakse aga käitusajal ja muudetakse ühe klahvivajutusega struktureeritud plokiks. Kui olete lühendid üles võtnud, saate CSS-i ja HTML-i töövoogu kiirendada.
Minifier on üks bracketsi laiendustest, mis minimeerib CSS- ja JavaScript-faile kiirklahvi abil: CMD+M või Ctrl+M. Need salvestatakse failinimi.min.ext. See on väga ajasäästlik laiendus, kuna see tihendab faile ja minimeerib teie töö ajal asjakohaseid JS-i.
Väga kasulik bracketsi laiendus, ToDo on suurepärane lahendus praeguses projektis või dokumendis kuvamiseks, jälgimiseks ja lõpetatuks märkimiseks või ülesannete sortimiseks. See Bracketsi laiendus toetab viit silti, sealhulgas ToDo, Note, Changes, FixMe ja Future.
Selle laienduse suurepärane omadus on see, et see võimaldab teil määrata oma sildid ja kohandada siltide värve. Selle Bracketsi laiendiga saate oma loovust kasutada.
Snippets loodi selleks, et kasutada otseteid kõige sagedamini kasutatavate koodide kirjutamiseks ja luua koodilõikude teegi, mis võimaldab teil kirjutada CSS-, JS- või HTML-koodi, sisestades koodilõigusse vaid mõne tähe. Te ei pea sama koodi ja silte korduvalt kirjutama.
Oluline on, et kopeeriksite kujunduse sektsiooni õige arvu sõnu, mis võib olla disainerite jaoks väga aeganõudev tegevus. Lorem Ipsum, nagu nimigi adekvaatselt viitab, tegeleb selle ülesandega teie eest ja täidab kujunduse jaotised määratud arvu sõnadega.
Käsk, näiteks lorem_wrap200. ja 200 sõna ilmub võluväel sinna, kus vaja.
Kui Lorem Ipsum on üks bracketsi laiendustest, mis täidab kujunduse jaotised näiva tekstiga, siis Lorem Pixel genereerib erinevate kujundussektsioonide jaoks kohatäitepilte.
Seda laiendust on lihtne kasutada ja see võimaldab kohandada visuaalse redaktoriga kohatäite kujutise suurust. Samuti võimaldab see kasutada kohandatud URL-e, et lisada näivaid pilte.
Kas mäletate märgistussilte? Kellelegi ei meeldi nende siltide tippimine, kuid need on kohustuslikud iga uue dokumendi puhul, olenemata sellest, kas kasutate PHP-d, HTML-i või JavaScripti. Iga mall on üks bracketsi laiendustest, mis on mõeldud eelnevalt kirjutatud märgistusega mallide loomiseks.
Seejärel saate kohe alustada uue dokumendiga, ilma et peaksite neid kohustuslikke märgistussilte sisestama. Kui soovite luua uue HTML-dokumendi, valige HTML-mall koos vaike-HTML-märgenditega. Sama kehtib PHP või JavaScripti kohta.
Brackets Icons on laiendus, mis loodi selleks, et aidata arendajatel ja disaineritel lisada failiikoone bracketsi külgribale. Nagu teate, muudab visuaalne element, näiteks ikoon, failide tuvastamise lihtsamaks kui indikaatori puudumine või tekstiindikaator.
Kasulik bracketsi laiendus CSSLint oli loodud koodikvaliteediga seotud probleemide ja CSS-i vigade tuvastamiseks ja täpseks tuvastamiseks. Laiendus teatab vigadest/probleemidest, kasutades CSS Lint reegleid.
Brackets Extensions paigaldamine
Saadaolevate Bracketsi laienduste installimine pole raketiteadus:
- avage sulgude redaktor
- avage laienduste vahekaart
- Otsige laiendusi, mida soovite installida
- Klõpsake nuppu Installi ja alustage installimist
Samamoodi saate installida teemasid. See on üsna lihtne!
Lõpetades mõtted parimate sulgude laienduste leidmiseks
Esiotsa arendajatele ja veebidisaineritele pole ühtegi teist koodiredaktorit, mis oleks mitmekülgsem kui Brackets. See on oma kategooria parim redaktor ja see on varustatud uskumatute funktsioonide komplektiga, mida saate laienduste lisafunktsioonidega täiustada.
Kui teile meeldis seda artiklit Bracketsi laienduste kohta lugeda, peaksite seda WordPressi arendaja palga kohta lugema .
Kirjutasime ka mõnest seotud teemast, nagu JavaScripti teegid, WordPressi koolitus, HTML-i teisendamine WordPressiks ja parim koodiredaktor.