Edytor Brackets już sam w sobie posiada wiele ciekawych funkcji, którymi odróżnia się od innych edytorów kodu. Szybka edycja (Ctrl + E) czy wbudowany tryb podglądu na żywo potrafią uprościć i przyspieszyć pracę, ale często to za mało.

Dzięki dodatkowym wtyczkom możesz sprawić, że praca będzie jeszcze szybsza i bardziej wygodna. Oto lista tych, które warto mieć w swoim Bracketsie (dokładnie takich nazw szukaj w menedżerze rozszerzeń wewnątrz programu):

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

1. Beautify

Beautify - automatyczne porządkowanie kodu

Dodatek, który formatuje kod HTML, CSS i JavaScript według określonych reguł. Całość jest konfigurowalna, więc bez problemów możesz określić jaki ma być styl kodu Twoich plików. Beautify może być bardzo przydatny, gdy musisz pracować na cudzym kodzie i chcesz szybko doprowadzić go do porządku wg swoich reguł.

2. Emmet

Emmet - obowiązkowy dodatek dla web developerów

Obowiązkowa wtyczka dla każdego, kto tworzy strony www. Emmet potrafi bardzo uprościć tworzenie kodu, umożliwiając generowanie tekstu Lorem Ipsum, szybkie rozwijanie znaczników (naciskając tab) czy generowanie całych bloków kodu łącznie z numeracją (znak $).

Zobacz więcej na oficjalnej stronie.

3. Autoprefixer

Wtyczka, która wykorzystuje narzędzie Autoprefixer i uzupełnia prefixy dla przeglądarek w naszym kodzie CSS. Całość bazuje na danych ze strony Can I Use, więc masz pewność, że Twój kod będzie działał w dużej ilości przeglądarek, a Ty nie musisz martwić się o ręczne dopisywanie i sprawdzanie prefixów.

4. Response for Brackets

Brackets tryb responsywny

Dodatek, który podesłał mi czytelnik bloga (dzięki!). Automatycznie tworzy plik z media queries i umożliwia proste budowanie breakpointów dla tworzonej strony.

Dodatkowo po kliknięciu na dany element – jest on podświetlany – oraz jesteśmy automatycznie przenoszeni do odpowiedniego miejsca w kodzie. Świetnie łączy się z trybem Szybkiej Edycji (Ctrl + E) w Bracketsie i jest to zdecydowanie jedna z tych wtyczek, które warto sprawdzić.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

5. Brackets Todo

Brackets - lista zadań todo

Nietypowe podejście do tworzenia listy todo. Wtyczka ta skanuje kod, który piszesz, i na podstawie specjalnych komentarzy buduje listę zadań todo używając takich tagów, jak TODO, NOTE, FIXME, CHANGES i FUTURE.

6. Brackets Git

Dodatek, który umożliwia integrację z popularnym systemem kontroli wersji Git. Dzięki niemu nie musisz przełączać się między konsolą i edytorem, bo wszystkie operacje Gita – commity, historia plików i inne – masz dostępne bezpośrednio w Bracketsie.

7. Brackets Icons

Ikony przy nazwach plików

Bardzo prosta, ale też bardzo użyteczna wtyczka, która wyświetla kolorowe ikonki obok każdego pliku w drzewie Bracketsa. Dzięki temu całość staje się nieco bardziej przejrzysta i można szybko znaleźć plik konkretnego typu.

8. Extension Rating

Wtyczka, która wyświetla dane na temat innych wtyczek. Dzięki niej dowiesz się ile razy jakiś dodatek został pobrany, kiedy ostatnio został uaktualniony czy ile dostał gwiazdek na GitHubie.

9. Minimap

Brackets minimapa

Mapa kodu, która jest znana głównie z Sublime Text. Bardzo przydatny dodatek, który pozwala płynnie poruszać się po kodzie.

Co prawda mapka nie jest super wyraźna i nie da się odczytać z niej kodu, ale dzięki kolorowaniu składni i strukturze, łatwo można odnaleźć szukany fragment.

10. CSSLint

CSSLint - sprawdź swój kod CSS

Narzędzie, które sprawdza poprawność kodu CSS. Nie chodzi tutaj tylko o poprawne nazwy właściwości i wartości, ale też kwestie organizacyjne. Dostaniesz np. podpowiedź w rodzaju “nagłówki powinny zostać zdefiniowane tylko raz, nagłówek h2 został już zdefiniowany”.

Może być tak, że domyślnie nie pokażą się żadne błędy, ale jeśli w prawym dolnym rogu Bracketsa pojawiła się żółta ikonka ostrzegawcza – Twój kod może mieć problemy.

11. JS CSS Minifier

Ciekawy dodatek, który pozwala zminimalizować wybrane pliki, czyli usunąć wszystkie niepotrzebne spacje itp., a dzięki temu plik wynikowy będzie mniejszy. Czasami różnice w rozmiarze przed i po sięgają nawet kilkudziesięciu procent – warto więc zadbać o minimalizację plików, które wylądują na serwerze.

Pliki są domyślnie zapisywane w formacie {nazwapliku}.min.{rozszerzenie}.

12. Paste and Indent

Proste rozszerzenie, które pomaga ułożyć wklejony kod. Domyślnie Brackets nie posiada nad tym żadnej kontroli i w momencie, gdy wklejasz skopiowany kod, często jest on ułożony kompletnie chaotycznie.

To rozszerzenie bierze pod uwagę aktualne położenie w kodzie i automatycznie dopasowuje odstępy. Krótko mówiąc – wklejasz kod, a on od razu wygląda dobrze.

13. eqFTP

Tto prawdopodobnie najlepszy (jak twierdzi autor) klient FTP, który będzie działał bezpośrednio w Bracketsie. Pozwala intuicyjnie pracować z zewnętrznymi serwerami.

 

Znasz jeszcze jakieś wtyczki do Bracketsa godne polecenia? Jeśli tak, podziel się nimi w komentarzu.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • Witam, a podpowiesz jakie wtyczki doinstalować do Brackets aby mieć konsole wykonywanych skryptów Node i JavaScript jak w WebStorm. Aby przyciskiem Run sprawdzać skrypt JS w IDE? WebStorm ma nawet opcje wykonywania ich w przeglądarce, a w Bracket mogę tylko wykonywać same pliki html.

  • może głupie pytanie ale nie mogę zainstalować palety kolorów. Osobiście nie mam pamięci który kolor jaki ma odpowiednik hex czy rbga, więc potrzebuje palety kolorów. Paradoksalnie jedyna działająca paleta kolorów generuje mi kod za każdym razem gdy chce zmienić barwę przez co robi mi się w 10s jakieś 100 różnych kodów.
    Znacie jakąś dobrą wtyczkę z paletą kolorów?

    • Głupie byłoby instalowanie palety kolorów w Bracketsie, bo on już ma wbudowaną, nawet lepszą niż w innych edytorach (chyba, że potrzebujesz konkretnej, innej) :)

      Wejdź sobie do stylów CSS, napisz jakikolwiek kolor, np. #fff, potem zaznacz ten kolor i naciśnij Ctrl + E. Podobnie możesz edytować sobie przejścia (transitions) i animacje w Bracketsie.

  • Wiem że, brackets potrafi podpowiadać w css klasy i identyfikatory użyte w htmlu, czyli np po wstawieniu kropki pojawia się okienko z nazwą klasy. No właśnie :-) tylko jaka wtyczka to obsługuje?

  • Czy jest możliwość wgrania szablonu do bracketsa? Jestem laikiem i ściągnąłem szablon pod html5, tylko nie wiem czy mogę go jakoś “wkleić” do programu.

  • Dzien dobry,
    te wszystkie wtyczki sa oczywiscie genialne; bez nich Brackets nie bylby tym czym jest; ale troche przedobrzylem i nie moge sie pozbyc minimap.
    Co zrobic aby ta wtyczke od instalowac
    pzd
    Jurek

  • Hallo i dziekuje, nie niema zadnego komunikatu o bledzie -po prostu zaczal mnie denerwowac ten minimap – ktory ma zastosowanie pewnie do “olbrzymich” projektow a w moim przypadku zawadzal nie dajac zadnych korzysci.
    Po prostu odinstalowalem Brakets’a i jeszcze raz zainstalowalem wszystkie ww. wtyczki juz bez minimap.

    • Nie tylko do olbrzymich. Po prostu łatwiej nawiguje się w kodzie – oczy “zapamiętują” kolory składni, długość linii itd., więc można szybciej odnaleźć dany fragment :)

  • Cześć, Czy jest jakaś wtyczka, dzięki której będę mógł widzieć zawartość kilku folderów w bocznym menu? Kiedy chcę otworzyć plik z innego folderu automatycznie zamyka mi się widok aktualnego folderu

  • Mam bracketsa na ubuntu. Nie mogę użyć w edytorze czcionek jak arial czy times new roman. Okazało się, że nie mam ich na ubuntu, więc je zainstalowałem i są dostępne. Mimo wszystko dalej nie mogę użyć ich w bracketsie. Co z tym zrobić?

  • >