Jacob Sobota logo
EN
Edytory htmlNapisane przez Jacob Sobota w dniu

Edytory html


Ważny wybór

Czy wybór edytora do tworzenia kodu html jest ważny? Odpowiedź jest oczywista – TAK! Osobiście wielokrotnie zmieniałem edytor, w którym pracowałem i uważam, że warto na samym początku spróbować różnych narzędzi tego typu. Dzięki temu odpowiednio możemy określić swoje potrzeby i kierować się nimi.

Do czego będzie służył?

Jak już wcześniej wspomniałem zacznijmy od zastanowienia się nad tym, do czego edytor będzie potrzebny. Jeżeli będzie to czysty kod HTML/CSS/JS nie musimy mieć potężnego IDE. Jeżeli jednak jeśli mamy zamiar bardzo dużo przesiadywać w PHP, warto się nad nim zastanowić, gdyż posiada ogromną ilość preinstalowanych elementów pomocnicznych. Oczywiście nikt nikomu nie broni zacząć przygody z kodowaniem stron od IDE – dzięki temu z biegiem czasu będziecie mogli uniknąć zmiany środkowiska na którym pracujecie.

Lista edytorów html

Poniżej przedstawiam swoje top 3 edytory, w których pracowałem (w tym 1, w którym nadal pracuję). Edytory te zapewnią Wam pomoc zarówno na początku, jak i w późniejszym etapie tworzenia stron www.

  • SublimeText 2 / 3
  • Brackets
  • Atom

Na początku pragnę Was uspokoić – nieważne na jakim systemie pracujecie. Wszystkie te edytory mają swoje wersje na MAC’a, Windows’a oraz Linux’a.

Opis zaprezentowanych edytorów html

SublimeText

SublimeText jak podaje producent jest „wyrafinowanym edytorem kodu, znaczników i prozy”. Jest on najstarszym z edytorów podanych powyżej i posiada największą ilość użytkowników, którzy tworzą setki dodatków wspomagających codzienną pracę z kodem. Swego czasu był bardzo innowacyjnym produktem, który posiadał takie smaczki jak:

  • Minimapa, pokazująca pomniejszony obraz edytora. Jest to bardzo przyjemny dodatek, który w przypadku wielolinijkowego kodu znacznie skraca potrzebę scrollowania myszką ekranu monitora.
  • Podział okna na karty, dzięki któremu będziemy mogli bez potrzeby włączania drugiego okna umieścić dwa pliki na jednym ekranie. Jest to bardzo przydatna funkcja, gdy nie pamiętamy wszystkich nazw klas elementów HTML oraz gdy pracujemy z czyimś kodem.
  • Autozapis – niby tak niewiele, a jednak cieszy brak potrzeby naciskania CTRL+S . Dzięki tej funkcji możemy po prostu przełączać się między ekranem przeglądarki, a edytora wiedząc, że zmiany i tak zostaną zapisane.
  • Podświetlanie składni – funkcja z serii MUST-HAVE bez której kodowanie stron byłoby katorgą.
  • Parowanie nawiasów, czyli inaczej zamykanie nawiasów przy tworzeniu tagów HTML.
  • Wtyczki, ogromna ilość dodatków, stworzonych przez użytkowników dla użytkowników. Dzięki którym możemy w prosty sposób wzbogacić funkcjonalność edytora.

edytory html - sublimetext

Moim zdaniem SublimeText jest świetnym edytorem, z ogromną bazą użytkowników. Jest ciągle wspierany i bardzo dobrze prezentuje się na tle swoich konkurentów. Wcześniej w nazwie wpisałem „2/3” jest to spowodowane tym, że wersja 3 jest betą (już od kilku ładnych lat). Osobiście użytkowałem go kilka dni – nie podoba mi się jednak jego GUI, co jest dla mnie bardzo ważnym aspektem.### Brackets

Brackets to dziecko Adobe – został stworzony by jak najszybciej pobrać info z plików PSD, a następnie umieścić je w kodzie. Zawiera w sobie bardzo potężne narzędzie o nazwie „Extractor”, które pozwala na połączenie edytora z kontem Adobe, wrzucenie plików PSD, a następnie zaznaczanie elementów graficznych i wyłuskanie gotowego kodu CSS. Ktoś bardziej doświadczony, może się teraz oburzyć, że na pewno kod ten nie jest optymalny. Jednakże, muszę przyznać, że extractor działa bardzo sprawnie i o ile nie zakodujemy dzięki niemu całej strony, to możemy znacznie skrócić sobie czas kodowania czasochłonnych elementów, takich jak buttony, czcionki, itp. Edytor brackets posiada podobnie jak SublimeText ogromną ilość dodatków i motywów, dzięki którym sprawimy, że nasz edytor będzie odpowiadał naszym wymaganiom. Bardzo ciekawym elementem, wbudowanym w edytor jest możliwość automatycznego tworzenia snippetów do kodu CSS. Wygląda to mniej więcej tak, że pisząc szkielet HTML mamy możliwość naciśnięcia kombinacji klawiszy CTRL+E, a następnie zostanie stworzony odpowiedni węzeł w pliku CSS z elementem, który edytowaliśmy w HTML. Dzięki temu szybko i bez przełączania plików możemy pisać kod CSS.

edytory html - brackets

Edytor brackets jest bardzo dobrym wyborem dla koderów HTML. Używałem go dobrych kilka miesięcy i nie mam do niego większych zastrzeżeń. Niemniej jednak pamiętam, że po pewnym czasie i przy większej ilości zainstalowanych dodatków lubił się wieszać i wyłączać. Sądzę, że ten problem został już naprawiony, więc mogę go spokojnie polecić.

Atom

Atom jest edytorem stworzonym przez popularny obecnie GitHub. Zważywszy na to, że GitHub jest świetnym narzędziem możnaby wnioskować, że i edytor taki będzie. A jak jest naprawdę? Edytor rzeczywiście jest świetny – używam go już prawie 2 lata. Ma potężne zaplecze ludzi, którzy go wspierają przeróżnymi dodatkami. Na początku jest trochę wolniejszy od swoich poprzedników, których wymieniłem, jednak po pewnym czasie, jego „performance” nie spada. Jego twórcy zadbali o to, by można było w nim modyfikować praktycznie każdy detal. Możemy w prosty sposób za pomocą kodu CSS zmieniać wygląd jego poszczególnych elementów, instalować dodatki oraz cieszyć się lekkim i przyjemnym GUI. Niestety nawet on nie jest perfekcyjny. Moim zdaniem jest niewygodny w pisaniu kodu PHP – dodatki takie jak „beautify” mające za zadanie czyszczenie kodu PHP z niewiadomych przyczyn przestają działać lub nie działają w ogóle. Nie jestem pewien czy to wina edytora, czy też samego dodatku, jednak uważam, że twórcy powinni sami proponować tego typu rozwiązania w podstawowym pakiecie. Interfejs jest bardzo wygodny – istnieje również ogromna ilość ustawień, które możemy zmieniać na zasadzie checkbox’a. Dodatkowo mamy w podstawce zainstalowany dodatek do GitHub’a, dzięki czemu nie musimy bawić się z terminalem, gdyż większość na co dzień używanych opcji jest dostępna w GUI edytora.

edytory html - atom

Obecnie używam edytora o nazwie Atom – miałem od niego chwilę przerwy na rzecz PHPStorma, gdzie tworzyłem nową templatkę do WP. Przyznaję, że praca na nim w kodzie PHP była dużo bardziej przyjemnia w porównaniu z Atomem oraz wieloma innymi edytorami. Polecam ten edytor i zapewniam, że im dłużej będziecie na nim pracować, tym szybciej zauważycie, jakim jest potężnym narzędziem.

Na tym kończę wpis odnośnie edytorów do tworzenia kodu HTML. W krótkim czasie postaram się jeszcze stworzyć podobny artykuł, w którym zawrę informację o IDE dla web developerów.


Powrót do listy artykułów