Jeśli jesteś programistą i działasz w dziedzinie tworzenia stron internetowych jednocześnie kodując w Notatniku… To wiedz, że coś jest nie tak!

W tym artykule poznasz edytor HTML, PHP, JavaScript i wielu innych języków o nazwie Brackets, ale jest też spora lista innych edytorów dla programistów, które z pewnością sprawią, że Twoja praca stanie się przyjemnością.

Wejdź na oficjalną stronę i pobierz Brackets.

Dzisiaj każdy liczący się edytor kodu posiada możliwość wgrywania motywów graficznych, wtyczek i inne, wbudowane funkcje, które są w stanie realnie przyspieszyć naszą pracę minimum kilkukrotnie.

Jednym z nich jest Brackets, który oprócz tego, że jest bezpłatny, jest prostym do opanowania narzędziem wykorzystywanym przez tysiące osób na świecie.

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

Brackets jako edytor HTML

Krótko mówiąc: sprawdza się świetnie. Jest dostępny na wiele systemów operacyjnych: na Windowsa, Linuxa czy nawet Maca. Co ciekawe został stworzony przez ludzi z Adobe, znanej firmy produkującej takie wielkie aplikacje, jak Photoshop czy Premiere Pro.

Funkcjonalność Bracketsa

Brackets pozwala Ci na edycję kodu CSS danego elementu, prosto z kodu HTML – więc nie musisz przełączać się między dokumentami. Służy do tego skrót CTRL + E.

Dodatkowo, jeżeli użyjesz go prosto w stylach CSS, otworzysz specjalny przybornik do wybrania koloru (np. w formacie HEX lub RGBA) czy nawet “zaprojektowania” Twojej własnej animacji danego elementu (przejścia i animacje w CSS3).

Możesz podzielić swoje okno na 2 części – dwie poziome lub pionowe i w każdej z nich uruchomić zupełnie inny plik. Możesz dowolnie ustalać szerokość tych okienek tak, aby dobrze Ci się na nich pracowało.

W sidebarze po lewej stronie oprócz podglądu plików typu HTML, CSS, PHP, mamy też możliwość podglądu obrazków razem z ich wymiarami czy zajmowaną powierzchnią.

Aby szybko zacząć pracę na Twoim własnym folderze, z gotowym już kodem, po prostu przeciągnij go do Bracketsa. Jeżeli są tam pliki z rozpoznawanymi przez program rozszerzeniami, edytor po prostu je wyświetli.

To nie koniec, pliki na których aktualnie pracujesz wyświetlają się pod zakładką Working files, którą również można sortować według nazwy czy typu pliku.

 

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

 

Panel opcji edytora

Możesz tutaj wykorzystać podstawowe funkcje, takie jak wklejanie, kopiowanie, wycinanie tekstu, zawijanie wierszy, szukanie w plikach (i zastępowanie innym ciągiem znaków), chowanie paska bocznego (sidebar), zwiększanie i zmniejszanie czcionki, zmiana jej kroju czy zmiana motywu graficznego na totalnie inny.

Możesz szybko przeskoczyć do danej linii (CTRL + G), szybko otworzyć plik z Twojego projektu (CTRL + Shift + O) czy nawet zmienić język na polski lub uruchomić program bez żadnych rozszerzeń.

Tryb Live Preview pozwoli Ci tworzyć stronę dosłownie na żywo. To, co robisz w Bracketsie, natychmiastowo pojawia się w przeglądarce z uruchomionym trybem Live Preview.

Świetna opcja gdy chcesz ręcznie ostylować sobie dany element, np. przycisk, a nie chce Ci się non stop zapisywać w oknie edytora, a potem znowu przeskakiwać do okienka przeglądarki. Na dłuższą metę tryb Live Preview sprawia, że oszczędzasz ogromne ilości czasu.

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,
    przed chwilą zainstalowałem Bracketsa 10. Ale mam biały ekran i nie wiem jak zmienić na czarny?

    Nie znalazłem takiej mozliwości. Proszę o podpowiedź.

    • Chodzi o górne menu: View -> Themes. Tam znajdziesz zainstalowane motywy, a kolejne możesz doinstalować sobie klikając na ikonkę klocka – domyślnie w prawym górnym rogu.

  • >