Narzędzia, bez których nie wyobrażam sobie kodowania

wakeupandcode.pl 4 lat temu

Przed Wami narzędzia do pracy z kodem. Czy są one niezbędne do kodowania? Nie. Jednak kodowanie dzięki nim staje się wygodniejsze i przyjemniejsze. To jest moja subiektywna lista – zachęcam do sprawdzenia narzędzi, które podaję, ale również do szukania takich, które to dla Was będą idealne.

Wpis jest uzupełnieniem maila z serii “Czy tylko ja tak mam?”, którego dostają osoby zapisane na mój newsletter. W tym mailu dzielę się moimi sposobami na przytłoczenie ilością nowych narzędzi, gdy zaczynamy uczyć się kodowania albo wchodzimy do nowego środowiska pracy. Jak jeszcze nie ma Was na liście, koniecznie zapiszcie się tutaj (archiwalne maile z serii można pobrać po potwierdzeniu swojego adresu mailowego).

Pamiętajcie też, iż to nie jest tak, iż musicie korzystać z poniższych narzędzi. Jeśli jesteście na początku swojej drogi z kodem, nie zarzucajcie się kolejnymi rzeczami do opanowania. To wszystko przyjdzie z czasem

Dajcie mi znać w komentarzu albo mailem, jakie są Wasze ulubione narzędzia do pracy z kodem.

Po kliknięciu w nazwę zostaniecie przeniesieni na oficjalną stronę danego narzędzia, gdzie można poczytać o nim więcej.

Moje ulubione narzędzia do pracy z kodem

Narzędzia związane z Visual Studio Code

Do pisania kodu używam Visual Studio Code, jest to darmowe IDE, które oferuje wiele rozszerzeń ułatwiających pracę z kodem. Poniżej moje top 3 rozszerzenia do VS Code, z których korzystam adekwatnie codziennie.

Bracket Pair Colorizer
Mój absolutny hit, czyli rozszerzenia, które z boku kodu pokazuje, jaki zasięg mają dane nawiasy. Nie trzeba klikać i sprawdzać, gdzie kończy się dany blok kodu, wszystko widać od razu. Dzięki temu od razu widzę, iż np. dana metoda jest zdecydowanie za długa albo wiem, jakich zmiennych mogę użyć. A jak macie ochotę więcej poczytać o zmiennych, zapraszam do tego wpisu o zmiennych w ES6.

Auto Rename Tag
Zdarzyło Wam się zmienić koncepcję i nazwę tagu w HTMLu? Albo nazwę całego kompotentu w React i przez to musicie poprawiać tagi w kodzie? To rozszerzenie automatycznie zmienia nazwę tagu zamykającego, gdy zmieniacie tag otwierający. Dla mnie super wygodna sprawa.

Multiple selections
To nie rozszerzenia, ale opcja bezpośrednio z VS Code. Mowa o możliwości zaznaczania i edycji kilku linijek jednocześnie. Przejrzyjcie całą sekcję, którą linkuję, bo można tam znaleźć naprawdę świetne skróty. Chyba moim ulubionym jest Command + D, który pozwala edytować tę samą nazwę w kilku miejscach jednocześnie. Super się sprawdza, jak zmieniacie np. nazwę zmiennej, a użyliście jej już w wielu miejscach.

Rozszerzenia do przeglądarki Chrome

Front-end to wieczne sprawdzanie, jak coś wygląda i działa w przeglądarce. Istnieje ogrom wtyczek, dzięki którym możecie lepiej działać w przeglądarce. Poniżej kilka, które sprawdzają się u mnie.

Gridman
Używacie grida w CSS do planowania rozkładu elementów na Waszej stronie? Dzięki tej wtyczce możecie zobaczyć, jak wygląda aktualna siatka na Waszej stronie. Bardzo przydatne narzędzie przy planowaniu i układaniu elementów.

Colorzilla
Gdy chcecie pobrać kolor ze strony, zobaczyć jej paletę kolorów czy wygenerować gradient – Colorzilla przychodzi z pomocą. Ja najczęściej korzystam z opcji “color picker”, która pozwala pobrać kolor wybranego elementu na stronie. Dzięki temu nie musze szukać, jaki dokładnie kod miał kolor, którego chcę użyć. A do tego macie dostępną listę pobieranych wcześniej kolorów.

Redux Dev Tools
Coś dla osób, które używają w projekcie Reduxa, czyli dedykowane dev toolsy. Jestem dosłownie zakochana w grafach, które pokazuje ta wtyczka – można prześledzić drogę danych w Waszej aplikacji, podejrzeć, gdzie i jak są przekazywane dane informacje. Jest też opcja odpalania konkretnych akcji bezpośrednio w panelu wtyczki w przeglądarce i sprawdzania, jakie mają działanie na aplikację.

JSON Formatter
Chcieliście kiedyś podejrzeć JSONa, który przychodzi z bazy albo sprawdzić dany endpoint wklejając adres w przeglądarkę? Przeraziła Was ściana tekstu pliku JSON? To rozszerzenie formatuje pliki JSON tak, by wyglądały dobrze i były czytelne w karcie przeglądarki.

Komendy Gita

Git, czyli system kontroli wersji jest niezbędny do wydajnej pracy z kodem. Mocno zachęcam zacząć zaznajamiać się z nim jak najwcześniej (nawet jak tylko Wy pracujecie nad danym kodem). Jak chcecie dowiedzieć się, co to w ogóle jest Git, zapraszam do darmowej lekcji z mojego kursu online (w sekcji “Co musi umieć front-end developer na start” znajdziecie odblokowaną lekcję “Git i Github”, naciśnijcie opcję “Podgląd”, aby ją obejrzeć). Poniżej moje top komendy, których używam chyba za każdym razem, gdy pracuję z kodem.

git reset – -soft
Co robi ta komenda? Usuwa commity, które zrobiliśmy, natomiast zachowuje zmiany w kodzie. Do czego się przydaje? Ja jej używam do tzw. squasha commitów (czyli gdy z kilku chcę zrobić jeden) albo do zmiany nazwy commita. Przydaje mi się też, gdy po zrobieniu commita odkrywam, iż jeszcze potrzebuję coś zmienić w kodzie i dorzucić to do istniejącego commita – wtedy używam tej komendy, dodaję zmiany i robię commit raz jeszcze.

git push – -force-with-lease
Wypychanie zmian do repozytorium z tzw. forcem, czyli na siłę, nie jest dobrą praktyką. Co więc daje – -force-with-lease. Dzięki temu nasz kod nie zostanie wypchnięty do repo, jeżeli w tym czasie w kodzie coś się zmieniło (czyli np. inna osoba w projekcie coś dodała). Nie ryzykujemy więc nadpisania zmian. Ja adekwatnie zawsze używam “push” z tą dodatkową komendą, tak dla bezpieczeństwa. Nic nie ryzykuję, a zyskuję spokojne sumienie.

git log
Kiedyś myślałam, iż to bardzo dobrze znana komenda, a spotkałam się z kilkoma osobami, które jej nie używały. Git log wyświetla, jak sama nazwa wskazuje, log wszystkich aktywności w naszym kodzie. Dzięki temu wiem na przykład, ile commitów muszę się cofnąć, aby zrobić squash albo czy na pewno zrobiłam rebase.

Ufff.. to wszystkie narzędzia do pracy z kodem, jakie dziś przygotowałam. Znacie je, korzystacie? Dajcie znać! I zachęcam do zajrzenia

, gdzie dzielę się różnymi przemyśleniami, polecam fajne podcasty i robię Stories np.
albo
.

A jeżeli chcecie wiedzieć, jakie narzędzia polecam, aby być bardziej produktywnym, wskakujcie do tego wpisu.

Idź do oryginalnego materiału