Narzędzia w procesie tworzenia stron www. Cz 1. IDE

Chyba każdy, kto pracuje dziś w świecie frontendu pamięta chwile, w których do stworzenia strony internetowej wykorzystywał wyłącznie windowsowy notatnik i przeglądarkę. Niezliczone godziny poświęcone na szukanie błędów składni. Rozjeżdzające się bloki (“kochane” tabelki). Kompletnie różnie interpretowane marginesy…

To wszystko, na szczęście, możemy wspominać z łezką w oku. Postęp technologii przyniósł nam także mnóstwo udogodnień i “przyspieszaczy” pracy, o czym we wpisie poniżej oraz w kolejnych wpisach z tego cyklu.

IDE – podstawowe narzędzie do tworzenia aplikacji

IDE czyli zintegrowane środowisko programistyczne (od ang. integrated development environment) to narzędzie (a właściwie zestaw narzędzi), którego zadaniem jest wspomaganie nas, programistów, w procesie tworzenia i utrzymania kodu. Rozbudowane funkcje podpowiadania składni (emmet <3), dostęp do terminala, zintegrowane narzędzia zewnętrzne, kontrola wersji – a to wszystko w jednym miejscu! Podstawowe narzędzie pracy, bez którego tworzenie skomplikowanych serwisów czy aplikacji e-commerce trwałoby wielokrotnie dłużej.

Poniżej zamieściłem subiektywną listę najlepszych IDE. Warto w tym miejscu wspomnieć, że każdy z edytorów ma swoje indywidualne skróty klawiaturowe i inne rozwiązania, które przyczyniają się do mniejszego/większego przywiązania do danego narzędzia.

WebStorm

WebStorm jest płatnym narzędziem. Oferuje w zamian wsparcie wielu języków programowania oraz obsługę dla popularnych frameworków JS (VueJS, Angular, React). Ciekawe funkcje to także zaawansowany moduł wykrywania błędów podczas pisania kodu, narzędzia do refactoringu. Pozwala także na łatwe testowanie aplikacji poprzez integrację z frameworkami takimi jak Karma czy Jest. Posiada zestaw predefiniowanych szablonów plików oraz motywów a każdy element edytora możemy ustawić indywidualnie.

Warto także wspomnieć o potężnych pluginach oferowanych przez WebStorma. Wspomagają one użytkownika w unikaniu klasycznych błędów (np. brak średnika itp.) i poprawianiu jakości kodu (lintery). Edytor ten to wreszcie narzędzie umożliwiające weryfikację historii zmian i umożliwiające przejście do dowolnego momentu w historii kodu. Przypadkowe usunięcie efektów kilkugodzinnej pracy nie jest więc straszne!

Visual Studio Code

Tym razem bezpłatny edytor, o możliwościach zbliżonych do wcześniej wspomnianego WebStorma. W podstawowej wersji do pobrania z oficjalnej strony jest dużo bardziej okrojony niż jego główny konkurent. Oferowane wtyczki znacznie jednak zwiększają moc tego narzędzia.

VSC także oferuje podpowiedzi składni, kontrolę wersji, terminal czy narzędzia do debugowania kodu.

Atom

Edytor napisany w oparciu o Electron, framework do pisania wieloplatformowych aplikacji. W odróżnieniu od poprzedników, jest to lekkie narzędzie, wspomagające programistę przede wszystkim w zakresie tworzenia aplikacji webowych. Oferuje oczywiście możliwość dostosowania motywów do własnych upodobań a także umożliwia rozszerzanie funkcjonalności o dodatkowe wtyczki. Dobrze radzi sobie w niewielkich projektach, ma sprytną wyszukiwarkę fragmentów kodu.

Sublime Text

Oprócz Programmers Notepad, jest to najczęściej używany przeze mnie edytor do edycji plików “w locie” na serwerze. Podobnie jak w przypadku Atoma, jest to dość prosty edytor. Podciąganie tego narzędzia do miana IDE jest moim zdaniem lekkim nadużyciem, jednak oba te narzędzia okazują się bardzo przydatne szczególnie, gdy potrzebujemy wykonać szybki prototyp czy modyfikację w istniejących plikach.

Podsumowanie

Narzędzia pracy wykorzystywane w procesie tworzenia stron internetowych to temat bardzo obszerny. IDE to zaledwie malutka jego cząstka. W kolejnych wpisach postaram się przybliżyć kolejne rozwiązania, wspomagające nas w codziennej walce z kodem 😉