10 Félelmetes zárójelek A valóságban szükséges bővítmények

2019

A Brackets.io nemrég kiadott egy 1.2-es verziót, néhány nagyszerű új funkcióval, amelyekről a blogjukról olvashat. Összeálltunk egy listát 10 közül a legjobb és leghasznosabb Brackets kiterjesztések közül (külön sorrendben), valamint az egyes bővítményekre vonatkozó teljes utasításokat.

Brackets Extensions

1.Kód összecsukása

A többi IDE-vel és kódszerkesztővel ellentétben a zárójelek nem rendelkeznek alapértelmezés szerint elérhető kódolási lehetőséggel. A Code Folding segítségével könnyen összecsukható a nagy részek egy sorba. A Code Folding kiterjesztés a Githubon és a Brackets kiterjesztéskezelőn érhető el.

Hogyan kell használni

A beágyazott címkék összecsukásához kattintson a lefelé mutató nyílra a szülőcímke bal oldalán, amint a fent látható. Ugyanez az elv a Javascript vagy bármely más formátum esetében. Csak kattintsunk a lefelé mutató nyílra a szülőelem bal oldalán, hogy az összes beágyazott állítást egy sorba lehessen hajtani. A bővítéshez kattintson a plusz jelre.

A hajtogatott vonalak sorszáma elrejtve van, így könnyen összecsukható vonalak láthatók, amikor a kódra koncentrál.

2. Lorem Pixel

Rengeteg módja van a helyőrző szöveg létrehozásának, de az elülső webfejlesztők gyakran helyőrző képeket igényelnek. Ahelyett, hogy üres helyőrző képet készítene, használja a Lorem Pixel kiterjesztést. Ez lehetővé teszi, hogy tetszőleges méretű tetszőleges helyőrző képeket helyezzen be. A Lorem Pixel hűvös része az, hogy lehetővé teszi, hogy kiválassza a kategóriát, amelyről képet szeretne.

Ha ez nem elég jó, a helyőrzők képei folyamatosan változnak minden alkalommal, amikor újratölti az oldalt! A képek gyakran felborítanak színsémákat, így a Lorem Pixel egy „szürkeárnyalatos” opciót is kínál, hogy csak b / w helyőrző képeket használjon. Ezt a kiterjesztést a lorempixel.com biztosítja, és a Brackets kiterjesztések kezelője.

Lorem Pixel használatával

Hogyan kell használni

Miután telepítette a Lorem Pixel kiterjesztést, a Lorem Pixel logó - egy ellenőrzött négyzet - megjelenik a bővítmény ablaktáblán (a jobb oldali ablaktábla a Live Preview gomb segítségével). Kattintson a logóra, hogy megjelenjen egy beállítási mező. Állítsa be a kívánt képméretet és a preferált képkategóriát. Ha szürkeárnyalatos képeket szeretne, ellenőrizze a szürkeárnyalatos beállítást. Vagy másolja a linket a vágólapra, és szükség szerint használja, vagy helyezze be az aktuális kurzor pozícióba.

3. Autoprefixer

A szállító előtagjainak hozzáadása a kódhoz drudgery. Az Autoprefixer kiterjesztés sok időt takarít meg (és sok munkát!), Mert automatikusan hozzáadja a szükséges szállítói előtagokat a kódjához. Nincs szükség konfigurációra, és a kód mentésekor frissíti az előtagokat. Kiválaszthatja a kódot és az automatikus előtagot is.

Hogyan kell használni

Az Autoprefixer használatához kezdje el az előtag-mentes kód írását. A kiterjesztés a mentés után automatikusan hozzáadja az előtagot. A kiválasztott kód automatikus előtagozásához először válassza ki a kódot, majd a Szerkesztés lapot ⇒ Automatikus előtag kiválasztása.

Az Autoprefixer egyéni előtagokat is hozzáadhat a beállításaihoz. A kiterjesztés beállításaihoz: Szerkesztés ⇒ Autoprefixer beállítások.

Ahhoz, hogy szép, lépcsőzetes, előtaggal rendelkező kód legyen, engedélyezze a Visual cascade opciót a kiterjesztés beállításaiban.

4. Markdown előnézet

A Markdown szép szöveges jelölőnyelv, amely könnyen átváltható HTML-re. A Markdown Preview a renderelt Markdown-ot közvetlenül a szöveges verzió alatt adja meg. Lehetővé teszi két különböző stílus közötti választást: Github Flavored Markdown és Standard Markdown.

Három témát választhat az előnézeti ablakhoz - Light, Dark és Classic. A Markdown előnézetben is van egy görgetési szinkronizálási lehetőség (alapértelmezés szerint engedélyezve). A bővítmény letölthető a Githubból vagy a Brackets kiterjesztések kezelőből.

Hogyan kell használni

Nyisson meg egy .md vagy .markdown fájlt. Ha már telepítette a Markdown előnézetet, a jobb oldalon megjelenik az M ↓ gomb. Kattintson rá, és látni fogja a renderelt Markdown-t. A téma megváltoztatásához, vagy a görgetés szinkronizálásának tiltásához kattintson a sebességváltó ikonjára a Markdown Preview rész jobb felső sarkában.

5. Brackets ikonok

Mindig szórakoztató, ha a kódszerkesztőt fájl ikonokkal fűzi. A zárójelek ikonok a fájltípus alapján színes ikonokat adnak az oldalsávban felsorolt összes fájlhoz. A legtöbb fájltípushoz tartozó ikonok jelennek meg, és ikon kéréseket küldhet a Github oldalon.

Bónusz tipp:

A zárójelek az Ionicons projekt ikonjait használják. Megtekintheti a File Icons kiterjesztést (a Brackets Icons projekt villája), amely a Font Awesome projekt ikonjait használja. A végén a személyes preferenciák állnak.

Hogyan kell használni

Csak telepítse a bővítményt és az újratöltő konzolokat (F5).

6. Dokumentumok eszköztár

A zárójelben nincsenek lapok. Egyszerű és egyszerű tény. A Dokumentumok eszköztár kiterjesztése hozzáadja ezt a funkciót. Minden olyan fájl, amely az oldalsáv „aktív” részében található, ebben a kiterjesztésben lapként jelenik meg. Elrejtheti az oldalsávot is, és csak a Dokumentumok eszköztárát használja egy szép felülethez.

Hogyan kell használni

Telepítse a bővítményt és az újratöltő konzolokat (F5).

7. Git zárójelek

Minden nap megpróbál integrálni a Githez; ez messze a legnépszerűbb verzióvezérlő rendszer (VCS). A Git zárójelek a legjobbak a hasonló konzolbővítmények között. Minden git funkcióval rendelkezik. A zárójelben lévő változások könnyen elvégezhetők, a módosításokat egyetlen kattintással, húzással húzhatja és húzhatja meg, megtekintheti a fájltörténetet és a teljes előzményeket is. Ha jó a Gittel, akkor ezzel a kiterjesztéssel nem talál problémát.

Megjegyzés: A Brackets Git használatához Git telepítése szükséges a számítógépre. A kiterjesztés telepítése után előfordulhat, hogy be kell írnia a Git futtatható fájljának elérési útját (ha nincs az alapértelmezett útvonalon).

Hogyan kell használni

Fájl elkötése a Git zárójelekkel

Brackets használata Git egyenesen előre halad. Tegye a helyi Github repo mappáját a projekt mappába zárójelben. Ezután nyisson meg egy fájlt, végezzen néhány módosítást, és mentse el. Ezután előreléphet, és a jobb oldalon lévő Git ikonra kattintva megnyílik az alsó részen a Brackets Git panel. Felsorolja a fájljaiban elvégzett módosításokat.

Ellenőrizze, hogy mely fájlokat kívánja végrehajtani, majd kattintson a Commit gombra. Ez megnyit egy felugró listát a végrehajtott módosításokról. Írja be a Commit üzenetet, és kattintson az OK gombra. És sikeresen elkötelezte magát a Git-nek közvetlenül a Brackets-ből!

Az elkötelezettség után csak kattints a nyomógombra (ez azt is mutatja, hogy hány szinkronizálatlan elkötelezettség van, amint az a GIF-ben látható).

Beállítások konfigurálása

Nyissa meg a Brackets Git panelt, és kattintson a Settings (Beállítások) gombra (jobbra a második). Nyugodtan konfigurálhatja a Git zárójeleket tetszés szerint.

Fájl- és kötelezettségelőzmények megtekintése

Csak kattintson a megfelelő gombokra, hogy megtekinthesse a fájltörténetét és az elkötelezettségét. Megemlítettük, hogy megváltoztathatja az avatarot egy fekete-fehér avatarra, egy színes avatarra vagy a Gravatarra?

Elkötelezett történelem

8. Lint ALL Things

Lint ALL mindent. Minden. Ez a kiterjesztés egyidejűleg az összes fájlt megmagyarázza. Nagyon hasznos, ha van egy nagy projekt, amely sok csatlakoztatott fájlt tartalmaz. Minden szöszhiba szépen megjelenik egy ablakban.

Hogyan kell használni

A Lint ALL Things használatához menjen a View (Nézet) fülre, majd kattintson a Lint egész projektre .

9. Todo zárójelek

A Todo zárójelek egy kicsi kiterjesztés, amely az összes TODO-megjegyzést tiszta listázási formátumban mutatja. Alapértelmezés szerint 5 címkét támogat - TODO, MEGJEGYZÉS, FIXME, CHANGES és FUTURE. A megjegyzéseket is megteheti: Kész. A nézetbeállításokban a megjegyzéseket címkékkel szűrheti. A Todo zárójel lehetővé teszi, hogy a címkékhez és a saját címkékhez egyéni színeket is definiáljon, abban az esetben, ha a megjegyzéseivel valaha is szeretne hirdetni.

Ha nagy projekten dolgozik, és több fájlból származó megjegyzéseket kell követnie, akkor megváltoztathatja a Brackets Todo keresés terjedelmét. Szeretné kizárni bizonyos fájlokat és mappákat, mint például a szállító mappákat? Semmi gond. Csak adja hozzá az útvonalat a kizárási listához. Az egyes projektek beállításait testreszabhatja .todo fájl hozzáadásával a root projektkönyvtárban.

A github dokumentációjában minden beállítási opciót átmehet.

Hogyan kell használni

A Brackets Todo használatához csak add hozzá egy megjegyzést a kódhoz egy belső címkével. A címke nagybetűs legyen, majd kettőspont (:). Az összes Todo megjelenítéséhez kattintson a Todo ikonra a jobb oldali ablaktáblán.

konfigurálása:

A Todo HTML-megjegyzésének engedélyezése: Csak nyissa meg a beállításokat - Kattintson a Todo ikonra → Beállítások (fogaskerék ikon) - és kattintson a .todo fájl megnyitásához. Ehhez a fájlhoz adja hozzá ezt a kódot:
```
 {"regex": {"előtag": "(? :)"}} 
```
Hogyan néz ki a Todo beállítások menü
A keresési hatókör megváltoztatása: Ezt a kódot hozzáadja a .todo fájlhoz:
```
 {"keresés": {"hatókör": "projektem"}} 
```
Bármely fájl / mappa / fájlkiterjesztés kizárása a keresési hatókörből: A kód hozzáadása a .todo fájlhoz:
```
 {"keresés": {"hatókör": "projektem", 
```
„Kizáró mappák”: [„mappa”)
```
 "kizáró fájlok": ["yourfile"] "kizáró fájlok": [".yourextension"]}} 
```