Narzędzia

Ostatnia aktualizacja: 28 listopada 2020

Poniżej kilka narzędzi, które przydadzą nam się w czasie zabaw z Javascript.

Edytor tekstu / IDE

edytory

Jeżeli chodzi o edytor tekstu, to Windowsowy Notatnik zostawmy sobie w spokoju. Nas interesują edytory z kolorowaniem kodu, zwijaniem fragmentów kodu i ewentualnymi podpowiedziami. Warto przetestować kilka takich programów, by wybrać swój ulubiony.
W chwili pisania tego tekstu najpopularniejszymi są:

Który wybrać?
Webstorm jest jednym z najlepszych narzędzi w swojej branży. To taki Photoshop dla programistów. Niestety jego subskrypcja kosztuje.
Jeżeli interesuje nas coś darmowego, Visual Studio Code mocno ostatnio zyskał na popularności. Ja używam właśnie tych dwóch.

Poza nimi Atom, Bracket czy Sublime Text też są dobrym wyborem.

Tak naprawdę wszystkie te narzędzia mają swoje plusy i minusy. Wybierz po prostu to, które będzie Tobie odpowiadało.

Jeżeli chodzi o ustawienia takich edytorów, polecam w Internecie poszukać frazy "nazwa-mojego-super-edytora best plugins", "mój-wypasiony-edytor best shortcuts" lub "najlepszy-na-swiecie tips tricks". Artykułów o tej tematyce są miliony.

Przydatne strony

Z narzędzi internetowych czasami pewnie będziemy chcieli używać https://jsbin.com/?html,js,output, który pozwala pisać kod JavaScript i w razie czego go udostępniać innym. Podobną funkcjonalność ma kilka innych stron - w tym bardzo popularny https://codepen.io.

Na stronie http://jsben.ch/index będziemy mogli przetestować szybkość różnych wersji naszych skryptów.

Język JavaScript, podobnie jak CSS charakteryzują się tym, że jest różnie wspierany na różnych przeglądarkach.
Aby sprawdzić jak dana funkcjonalność jest wspierana na danej przeglądarce, możemy posłużyć się stronami http://caniuse.com, http://kangax.github.io/compat-table/es2016plus/, lub dokumentacją MDN która częstokroć na końcu tematów pokazuje wsparcie danej funkcjonalności.

Jako, że frontend nie kończy się na Javascripcie, warto też regularnie przeglądać niektóre z poniższych stron:

Poza tym polecam też dodać sobie do przeglądarki 2 dodatki: muzli2 i daily.dev. Oba służą do serwowania nowości gdy otwierasz nową kartę w przeglądarce. Dość ważna rzecz, gdy chcesz być na bieżąco z frontendem.

Poza powyższymi warto też przejrzeć sobie zestawienia narzędzi na stronach https://www.bookmarks.design/, https://undesign.learn.uno/, http://frontendtools.com/ czy https://toolsdb.dev/. Szczególnie tą pierwszą polecam przejrzeć.

Linter

W czasie pisania kodu przydało by się by ktoś lub coś go analizowało i wskazywało nam potencjalne pomyłki lub rzeczy możliwe do poprawy (np. formatowanie, czy w danym miejscu potrzebny jest średnik, że użyliśmy tu i tu innych cudzysłowów itp.). Można zaopatrzyć się w kota, można też w specjalne do tego celu narzędzia.

Edytory, które wymieniłem powyżej całkiem dobrze wskazują potencjalne pomyłki (przy czym gdyby je porównywać, to Webstorm robi to zdecydowanie najlepiej), ale jeżeli zależy nam na jeszcze większej jakości kodu, możemy zaopatrzyć się w dodatkowe "podpowiadacze", czyli tak zwane lintery. Na chwilę obecną najpopularniejszymi linterami są JSLint, JSHint oraz ESLint.

Znajdziemy je na stronach http://jslint.com/, https://jshint.com/ oraz https://eslint.org/demo.

Narzędzia te możemy też włączyć bezpośrednio w naszych edytorach. W takim Webstorm wystarczy wejść w Settings (Preferences na macOS) i wyszukać w lewym górnym rogu okna nazwę "JSLint" (lub ESLint), po czym ją aktywować. Dla Visual Studio Code i podobnych trzeba zainstalować dodatkowy plugin.

Niektórzy też używają tych narzędzi poza edytorem, odpalając je za pomocą Node (1, 2). Zrobimy to w tym rozdziale.

Wszelkie prawa zastrzeżone. Jeżeli chcesz używać jakiejś części tego kursu, skontaktuj się z autorem. Aha - i ta strona korzysta z ciasteczek.

Menu