Brackets.io vydala verzi 1.2 nedávno, s některými skvělými novými funkcemi, které si můžete přečíst na svém blogu. Sestavili jsme seznam 10 nejlepších a nejužitečnějších rozšíření Bracket tam (v žádném konkrétním pořadí) spolu s úplnými pokyny pro každé rozšíření.
Prodloužení závorek
1.Kód skládání
Na rozdíl od mnoha jiných IDE a editorů kódu Brackets nemá ve výchozím nastavení možnost skládání kódu. S skládáním kódu můžete snadno sbalit velké části kódu do jednoho řádku. Rozšíření kódu je k dispozici na Github a ve Správci rozšíření konzol.
Jak používat
Chcete-li složit libovolnou vnořenou značku, klikněte na šipku dolů vlevo od nadřazené značky, jak je uvedeno výše. Stejný princip pro Javascript nebo jakýkoliv jiný formát. Stačí kliknout na šipku dolů nalevo od nadřazeného elementu a složit všechny vnořené příkazy do jednoho řádku. Pro rozbalení stačí kliknout na znaménko plus.
Čísla řádků složených čar jsou skrytá, takže je snadné rozpoznat složené čáry, když se soustředíte na kód.
2. Lorem Pixel
Existuje mnoho způsobů, jak generovat zástupný text, weboví vývojáři však často potřebují zástupné obrázky. Namísto pokusu o vytvoření prázdného zástupného obrázku použijte rozšíření Lorem Pixel. To vám umožní vložit nádherné zástupné obrazy libovolné velikosti, kterou chcete. Cool část o Lorem Pixel je, že vám umožní vybrat kategorii, ze které chcete obrázek.
Pokud to není dost dobré, zástupné obrázky se mění při každém opětovném načtení stránky! Obrazy mohou často narušovat barevná schémata, takže Lorem Pixel také nabízí možnost „šedotónového“ použití pouze b / w obrazů zástupných symbolů. Toto rozšíření je podporováno společností lorempixel.com a je k dispozici ve Správci rozšíření konzol.
Jak používat
Po instalaci rozšíření Lorem Pixel se na podokně rozšíření zobrazí logo Lorem Pixel - zaškrtnuté čtvereček (podokno vpravo s tlačítkem Live Preview). Kliknutím na logo vyvoláte okno nastavení. Nastavte požadovanou velikost obrázku a preferovanou kategorii obrázku. Chcete-li zobrazit obrázky ve stupních šedi, zaškrtněte volbu ve stupních šedi. Zkopírujte odkaz do schránky a použijte jej podle potřeby nebo vložte do aktuální pozice kurzoru.
3. Autoprefix
Přidání prefixů dodavatele do kódu je podvádění. Rozšíření Autoprefixeru vám může ušetřit spoustu času (a spoustu práce!), Protože automaticky přidá požadované předpony dodavatele k vašemu kódu. Nepotřebuje žádnou konfiguraci a aktualizuje předpony při každém uložení kódu. Můžete také vybrat kód a automatické předpony, pokud chcete.
Jak používat
Chcete-li použít funkci Autoprefixer, začněte psát kód bez prefixu. Rozšíření automaticky přidá přednastavený kód, jakmile jej uložíte. Chcete-li automaticky předvolit vybraný kód, nejprve vyberte kód a poté kartu Upravit tab Výběr předpony.
Funkce Autoprefixer také umožňuje přidat vlastní předpony do nastavení. Chcete-li přejít na nastavení rozšíření: Upravit Settings Nastavení automatické opravy.
Chcete-li mít krásný, kaskádový, prefixovaný kód, povolte v nastavení rozšíření možnost Vizuální kaskáda .
4. Markdown Preview
Markdown je krásný značkovací jazyk, který lze snadno převést na HTML. Markdown Preview poskytuje renderovaný Markdown přímo pod textovou verzí. To vám umožní vybrat si ze dvou různých stylů, Github Flavored Markdown a Standard Markdown.
Pro náhledové okno můžete zvolit tři témata - Světlo, Tmavý a Klasický. Markdown Preview má také volbu scroll sync (standardně zapnutá). Rozšíření lze stáhnout z Github nebo ze Správce rozšíření konzol.
Jak používat
Otevřete soubor .md nebo .markdown . Pokud jste nainstalovali Markdown Preview, mělo by se vpravo zobrazit tlačítko M ↓ . Klikněte na něj a uvidíte vykreslený Markdown. Chcete-li změnit motiv nebo zakázat synchronizaci rolování, stačí kliknout na ikonu ozubeného kola v pravém horním rohu sekce Náhled.
5. Ikony závorek
Je to vždycky zábavné okořenit editor kódu ikonami souborů. Konzoly Ikony přidávají barevné ikony, založené na typu souboru, na všechny soubory uvedené v bočním panelu. Má ikony pro většinu typů souborů a můžete odesílat požadavky na ikonu na stránce Github.
Tip bonusu:
Konzoly Ikony používají ikony z projektu Ionicons. Můžete se také podívat na rozšíření File Icons (vidlice projektu Brackets Icons), které používá ikony z projektu Font Awesome. Nakonec se sníží na osobní preference.
Jak používat
Stačí nainstalovat rozšíření a znovu načíst závorky (F5).
6. Panel nástrojů Dokumenty
Konzoly postrádají jazýčky. Prostý a prostý fakt. Rozšíření panelu nástrojů Dokumenty tuto funkci přidá. Všechny soubory, které jsou v "aktivní" části postranního panelu, se zobrazí jako karty v tomto rozšíření. Můžete také skrýt postranní panel a pro příjemné rozhraní použít pouze panel nástrojů Dokumenty.
Jak používat
Nainstalujte rozšíření a znovu načtěte konzoly (F5).
7. Konzoly Git
Všechno se v těchto dnech snaží integrovat s Gitem; je to zdaleka nejoblíbenější systém řízení verzí (VCS). Konzoly Git jsou snadno dostupné mezi obdobnými prodlouženími držáků. Má všechny funkce git, které budete potřebovat. Změny můžete snadno provádět v rámci hranatých závorek, měnit a stahovat změny jediným klepnutím, zobrazit historii souborů a také celkovou historii potvrzení. Pokud jste s Gitem dobří, nenajdete žádné problémy s tímto rozšířením.
Poznámka: Abyste mohli používat Brackets Git, musíte mít v počítači nainstalován Git. Po instalaci rozšíření budete možná muset zadat cestu ke spustitelnému souboru Git (pokud není ve výchozí cestě).
Jak používat
Použití Brackets Git je docela rovně vpřed. Vytvořte si místní složku Github repo složku projektu v hranatých závorkách. Poté otevřete soubor, proveďte nějaké změny a uložte jej. Pak můžete pokračovat a kliknout na ikonu Git na pravé straně, čímž se otevře podokno podokna Brackets Git. Zobrazí seznam úprav, které jste provedli ve svých souborech.
Zkontrolujte, které soubory chcete potvrdit, a klepněte na tlačítko Potvrdit. Otevře se vyskakovací okno se seznamem provedených změn. Zadejte zprávu Commit a klikněte na tlačítko Ok. A vy jste úspěšně zavázali soubor Git přímo z hranatých závorek!
Po potvrzení stačí kliknout na tlačítko (také ukazuje počet nesynchronizovaných provizí, jak vidíte v GIF výše).
Konfigurace nastavení
Otevřete podokno Konzoly Git a klepněte na tlačítko Nastavení (druhé zprava). Nakonfigurujte Brackets Git tak, jak se vám líbí.
Pro zobrazení historie souborů a potvrzení
Stačí kliknout na příslušná tlačítka pro zobrazení historie souborů a historie potvrzení. Zmínili jsme se, že můžete změnit avatara na černobílého avatara, barevného avatara nebo vašeho Gravatara?
8. Lint ALL Věci
Lint Všechny věci. Všechno. Toto rozšíření najednou provede všechny vaše soubory. Velmi užitečné, když máte velký projekt se spoustou připojených souborů. Všechny chyby chlupů se zobrazují pěkně v podokně.
Jak používat
Chcete-li použít funkci Lint ALL Things (Vše), přejděte na kartu View (Zobrazit) a klikněte na položku Lint celý projekt .
9. Konzoly Todo
Závorky Todo je elegantní malé rozšíření, které zobrazuje všechny komentáře TODO v přehledném formátu seznamu. Standardně podporuje 5 tagů - TODO, POZNÁMKA, FIXME, ZMĚNY A BUDOUCNOST. Můžete také označit komentáře jako Hotovo. V možnostech zobrazení můžete filtrovat komentáře podle značek. Konzoly Todo vám umožní definovat vlastní barvy pro tagy, stejně jako vaše vlastní tagy také v případě, že byste chtěli být kreativní s vašimi komentáři.
Pokud pracujete na velkém projektu a potřebujete sledovat komentáře z více souborů, můžete změnit rozsah vyhledávání Brackets Todo. Chcete vyloučit některé soubory a složky, jako jsou složky dodavatelů? Bez obav. Stačí přidat cestu do seznamu vyloučení. Nastavení každého projektu můžete přizpůsobit přidáním souboru .todo do kořenového adresáře projektu.
Můžete si projít všechny možnosti nastavení v dokumentaci github.
Jak používat
Chcete-li použít Bracket Todo, přidejte do svého kódu komentář se značkou uvnitř. Jméno značky musí být velké, následované dvojtečkou (:). Chcete-li zobrazit všechny Todo's, stačí kliknout na ikonu Todo v pravém panelu rozšíření.
Konfigurace:
- Povolení Todo pro HTML komentáře: Stačí otevřít nastavení - Klikněte na ikonu Todo → Nastavení (ikona ozubeného kola) - a kliknutím otevřete soubor .todo. K tomuto souboru přidejte tento kód:
{"regex": {"prefix": "(? :)"}}
- Změna rozsahu hledání: Přidejte tento kód do souboru .todo:
{"search": {"scope": "můj projekt"}} - Chcete-li vyloučit příponu souboru / složky / souboru z rozsahu hledání: Přidejte tento kód do souboru .todo:
{"search": {"scope": "můj projekt",“ExcludeFolders”: [“yourfolder”]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. Zkrášlení
Zkrášlit dělá váš kód vypadat dobře. Opravuje mezery, odsazení a čáry.
Jak používat
Je velmi snadné použít Beautify. Jediné, co musíte udělat, je vybrat nějaký kód> Klikněte pravým tlačítkem myši > Zkratit .
Případně můžete přejít na kartu Upravit a kliknout na položku Zkratit .
