Brackets.io wydało niedawno wersję 1.2 z kilkoma nowymi funkcjami, o których można przeczytać na swoim blogu. Zebraliśmy listę 10 najlepszych i najbardziej przydatnych rozszerzeń Wsporników (w dowolnej kolejności) wraz z kompletnymi instrukcjami dla każdego rozszerzenia.
Rozszerzenia nawiasów
1. Składanie kodu
W przeciwieństwie do wielu innych IDE i edytorów kodu, Brackets nie ma domyślnie opcji składania kodu. Dzięki Code Folding możesz z łatwością zwinąć duże fragmenty kodu w jedną linię. Rozszerzenie składania kodu jest dostępne w Github i od menedżera rozszerzeń nawiasów.
Jak używać
Aby złożyć zagnieżdżony znacznik, kliknij strzałkę w dół po lewej stronie znacznika nadrzędnego, jak pokazano powyżej. Ta sama zasada dla JavaScript lub jakiegokolwiek innego formatu. Kliknij strzałkę w dół po lewej stronie elementu nadrzędnego, aby zagnieździć wszystkie instrukcje zagnieżdżone w jednym wierszu. Aby rozwinąć, kliknij znak plus.
Numery linii złożonych linii są ukryte, więc łatwo jest zauważyć zwinięte linie, gdy koncentrujesz się na kodzie.
2. Lorem Pixel
Istnieje wiele sposobów generowania tekstu zastępczego, ale twórcy stron WWW często potrzebują obrazów zastępczych. Zamiast próbować utworzyć pusty obraz zastępczy, użyj rozszerzenia Lorem Pixel. Pozwala wstawiać wspaniałe obrazy zastępcze o dowolnym rozmiarze. Fajna część o Lorem Pixel polega na tym, że pozwala wybrać kategorię, z której chcesz obraz.
Jeśli to nie wystarczy, obrazy zastępcze zmieniają się przy każdym przeładowaniu strony! Obrazy często mogą zdenerwować schematy kolorów, więc Lorem Pixel daje również opcję "skali szarości", aby używać tylko czarno-białych obrazów zastępczych. To rozszerzenie jest obsługiwane przez lorempixel.com i jest dostępne z poziomu menedżera rozszerzeń nawiasów.
Jak używać
Po zainstalowaniu rozszerzenia Lorem Pixel logo Lorem Pixel - zaznaczony kwadrat - pojawi się w okienku rozszerzeń (okienko po prawej stronie z przyciskiem podglądu na żywo). Kliknij logo, aby wyświetlić okno ustawień. Ustaw wymagany rozmiar obrazu i preferowaną kategorię obrazu. Jeśli chcesz uzyskać obrazy w skali szarości, zaznacz opcję skali szarości. Skopiuj link do schowka i użyj go zgodnie z wymaganiami lub wstaw do aktualnej pozycji kursora.
3. Automatyczny reset
Dodanie przedrostków dostawcy do kodu jest harówka. Rozszerzenie Autoprefixer może zaoszczędzić sporo czasu (i dużo pracy!), Ponieważ automatycznie dodaje do kodu wymagane prefiksy dostawcy. Nie wymaga żadnej konfiguracji i aktualizuje prefiksy przy każdym zapisywaniu kodu. Możesz również wybrać kod i automatycznie go poprzedzić, jeśli chcesz.
Jak używać
Aby skorzystać z programu Autoprefixer, po prostu zacznij pisać kod bez prefiksów. Rozszerzenie automatycznie doda prefiksowany kod zaraz po zapisaniu. Aby automatycznie prefiksować wybrany kod, najpierw wybierz kod, a następnie kartę Edycja ⇒ Automatyczny wybór prefiksu.
Autoprefixer pozwala także dodawać niestandardowe prefiksy w swoich ustawieniach. Aby przejść do ustawień rozszerzeń: Edytuj ⇒ Ustawienia autokoreratora.
Aby mieć piękny, kaskadowy, prefiksowany kod, włącz opcję kaskady wizualnej w ustawieniach rozszerzenia.
4. Podgląd Markdown
Markdown jest ślicznym prostym językiem znaczników, który łatwo można przekształcić w HTML. Markdown Preview daje renderowany Markdown tuż pod wersją tekstową. Umożliwia wybór między dwoma różnymi stylami: Github Flavored Markdown i Standard Markdown.
Istnieją trzy tematy, które możesz wybrać w oknie podglądu - Jasny, Ciemny i Klasyczny. Funkcja Markdown Preview posiada również opcję synchronizacji przewijania (domyślnie włączona). Rozszerzenie można pobrać z Github lub z menedżera rozszerzeń nawiasów.
Jak używać
Otwórz plik .md lub .markdown . Jeśli zainstalowałeś Podgląd Markdown, przycisk M ↓ powinien pojawić się po prawej stronie. Kliknij go, a zobaczysz renderowanie Markdown. Aby zmienić motyw lub wyłączyć synchronizację przewijania, po prostu kliknij ikonę koła zębatego w prawym górnym rogu sekcji Przegląd spadku.
5. Ikony nawiasów
Zawsze fajnie jest urozmaicić edytor kodu ikonami plików. Ikony nawiasów dodają kolorowe ikony, w zależności od typu pliku, do wszystkich plików wymienionych na pasku bocznym. Ma ikony dla większości typów plików i możesz publikować żądania ikon na stronie Github.
Wskazówka bonusowa:
Ikony nawiasów używają ikon z projektu Ionicons. Możesz także sprawdzić rozszerzenie ikon plików (widelec projektu nawiasów), które używa ikon z projektu Font Awesome. W końcu sprowadza się to do osobistych preferencji.
Jak używać
Wystarczy zainstalować rozszerzenie i ponownie załadować wsporniki (F5).
6. Pasek narzędzi Dokumentów
W nawiasach brakuje zakładek. Prosty i prosty fakt. Rozszerzenie paska narzędzi Dokumenty dodaje tę funkcję. Wszystkie pliki znajdujące się w "aktywnej" sekcji paska bocznego są wyświetlane jako karty w tym rozszerzeniu. Możesz również ukryć pasek boczny i używać tylko paska narzędzi Dokumenty, aby uzyskać przyjemny interfejs.
Jak używać
Zainstaluj rozszerzenie i ponownie załaduj wsporniki (F5).
7. Wsporniki Git
W dzisiejszych czasach wszystko próbuje zintegrować się z Git; jest to zdecydowanie najbardziej popularny system kontroli wersji (VCS). Wsporniki Git jest z łatwością najlepszy wśród podobnych rozszerzeń nawiasów. Ma wszystkie funkcje git, których będziesz potrzebować. Możesz łatwo zatwierdzać zmiany z poziomu samych nawiasów, przesuwać i przeciągać zmiany za pomocą jednego kliknięcia, przeglądać historię plików i całkowitą historię zatwierdzania. Jeśli jesteś dobry w Git, nie znajdziesz żadnych problemów z tym rozszerzeniem.
Uwaga: Aby użyć Gacków klamrowych, musisz zainstalować Git na swoim komputerze. Po zainstalowaniu rozszerzenia może być konieczne wprowadzenie ścieżki do pliku wykonywalnego Git (jeśli nie znajduje się on w domyślnej ścieżce).
Jak używać
Korzystanie z nawiasów Git jest całkiem proste. Ustaw swój lokalny folder repo Githuba w folderze projektu w nawiasach. Następnie otwórz plik, wprowadź zmiany i zapisz go. Następnie możesz kliknąć ikonę Git po prawej stronie, a otworzy się okienko Gack na dole. Zostanie wyświetlona lista modyfikacji dokonanych w plikach.
Sprawdź, które pliki chcesz zatwierdzić, a następnie kliknij przycisk Zatwierdź. Otworzy się okno z listą wprowadzonych zmian. Wprowadź wiadomość Commit i kliknij OK. I pomyślnie przekazałeś plik do Git bezpośrednio z nawiasów!
Po zatwierdzeniu wystarczy kliknąć przycisk (pokazuje również liczbę niezsynchronizowanych zatwierdzeń, jak widać w powyższym GIF).
Konfigurowanie ustawień
Otwórz okienko Git Brackets i kliknij przycisk Ustawienia (drugi od prawej). Możesz dowolnie konfigurować nawiasy klamrowe Git.
Aby wyświetlić historię plików i transakcji
Wystarczy kliknąć odpowiednie przyciski, aby przejrzeć historię plików i historię transakcji. Czy wspomnieliśmy, że możesz zmienić awatar na czarno-biały awatar, kolorowy awatar lub na Gravatara?
8. Lint WSZYSTKIE rzeczy
Lint WSZYSTKIE rzeczy. Wszystko. To rozszerzenie lints wszystkie pliki za jednym razem. Bardzo pomocne, gdy masz duży projekt z dużą ilością podłączonych plików. Wszystkie błędy kłaczków ładnie pokazują się w okienku.
Jak używać
Aby użyć Lint ALL Things, po prostu przejdź do zakładki Widok i kliknij Lint cały projekt .
9. Uchwyty Todo
Nawiasy Todo to niewielkie rozszerzenie, które pokazuje wszystkie komentarze TODO w zgrabnym formacie listy. Domyślnie obsługuje 5 tagów - TODO, NOTE, FIXME, CHANGES i FUTURE. Możesz także oznaczać komentarze jako gotowe. W opcjach widoku możesz filtrować komentarze według znaczników. Nawiasy Todo pozwala ci definiować własne kolory tagów, a także własne tagi, na wypadek gdybyś był bardziej kreatywny dzięki swoim komentarzom.
Jeśli pracujesz nad dużym projektem i chcesz śledzić komentarze z wielu plików, możesz zmienić zakres wyszukiwania Brackets Todo. Chcesz wykluczyć niektóre pliki i foldery, takie jak foldery dostawców? Bez obaw. Po prostu dodaj ścieżkę na liście wykluczeń. Możesz dostosować ustawienia dla każdego projektu, dodając plik .todo w głównym katalogu projektu.
Możesz przejść przez wszystkie opcje ustawień w dokumentacji Github.
Jak używać
Aby użyć Brackets Todo, po prostu dodaj komentarz do swojego kodu z tagiem w środku. Nazwa tagu musi składać się z wielkich liter, a następnie dwukropka (:). Aby wyświetlić wszystkie Todo, po prostu kliknij ikonę Todo w prawym panelu rozszerzenia.
Konfigurowanie:
- Aby zezwolić Todo na komentarze HTML: Po prostu otwórz ustawienia - Kliknij ikonę Todo → Ustawienia (ikona koła zębatego) - i kliknij, aby otworzyć plik .todo. Do tego pliku dodaj ten kod:
{"regex": {"prefix": "(? :)"}}
- Aby zmienić zasięg wyszukiwania: Dodaj ten kod do pliku .todo:
{"szukaj": {"zakres": "mój projekt"}} - Aby wykluczyć dowolny plik / folder / rozszerzenie pliku z zakresu wyszukiwania: Dodaj ten kod do pliku .todo:
{"szukaj": {"zakres": "mój projekt","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".yrereension"]}}
10. Upiększyć
Beautify sprawia, że Twój kod wygląda dobrze. Naprawia spacje, wcięcia i linie.
Jak używać
Jest bardzo łatwy w użyciu Beautify. Wszystko, co musisz zrobić, to wybrać kod> Prawy klik > Upiększyć .
Możesz też przejść do zakładki Edycja i kliknąć " Upiększyć ".
