Visual Studio Code: Refaktoryzacja

1.42+

0:00W tej lekcji pokażę ci kilka trików na szybki refactoring

0:04naszego kodu z użyciem vs code pamiętasz jeszcze ten kod

0:08który mieliśmy to jest html5 boilerplate i napisaliśmy sobie tutaj taką prostą klasę tutaj

0:13jest ta klasa ja tutaj ją importuję ten plugin tworzę nową instancję

0:17później się do niej odwołuję do metody do work pokażę ci fajny

0:21refactor na początek który może się wtedy gdy mamy bardzo duży plik

0:25i w wielu miejscach do jakiejś zmiennej się odwołujemy wyobraź sobie że chcielibyśmy nazwę

0:29tej zmiennej p zmienić tutaj i wszystkie jej odwołania więc tutaj najprościej

0:34byłoby to zrobić za pomocą command d żeby zaznaczyć kolejny ale jak widzisz od

0:38razu nam tutaj zaznacza plugin i jest to kłopot a co by było wtedy gdybyśmy mieli

0:42bardzo duży plik i chcemy wszystkie referencje do tej zmiennej zmienić w sposób inteligentny a

0:46nie taki po prostu że sobie patrzymy i zmieniamy i coś możemy pominąć albo

0:51możemy zmienić zmienną w innym zakresie jak będzie jakaś funkcja i taka sama zmienna

0:55i tak dalej otóż możemy taką zmienną zaznaczyć w ten sposób kliknąć

1:01prawym przyciskiem i wybrać rename symbol możemy

1:05to również pod skrót klawiaturowy przypisać i teraz nam się pojawia taki input gdzie możemy

1:10sobie wpisać i może nazwiemy sobie po prostu test wciskam

1:14enter i wszystkie odwołania do tej zmiennej zostały zamienione i

1:18gwarantuję ci że gdyby ten plik był zaawansowany byłyby różne funkcje które korzystają

1:23z tej zmiennej która dla nich byłaby tutaj lokalna gdzieś w innym miejscu tak naprawdę jakby

1:27globalna to też zostałoby to zamienione to się dzieje w sposób inteligentny a

1:31nie na zasadzie find and replace mogę zapisać ten plik teraz przejdziemy

1:36sobie tutaj i będę chciał ci pokazać kolejny ciekawy refactor

1:40na przykład wyobraź sobie że byśmy z tego obiektu zwracali jakiś

1:45inny obiekt gdzie byłoby array jakaś tablica 1 2 3 nieistotne

1:49czasami po prostu jest tak że zwracamy coś literalnie a chcielibyśmy to wyciąć

1:53i jednak wstawić do zmiennej po to aby zrobić z niej console log albo cokolwiek innego

1:57znowu możemy sobie coś takiego zaznaczyć pojawi nam się tutaj

2:01taka żaróweczka i jeżeli na nią klikniemy mamy tutaj trochę różnych rzeczy

2:05i będę chciał tutaj wybrać extract to constant in

2:10enclosing scope czyli w tym zawierającym zakresie

2:14klikam i zauważ że nowa zmienna czy taka stała została

2:18utworzona mogę jej nadać nazwę na przykład arr w ten sposób i

2:22zostanie tutaj podstawione a ja mam to w zniennej i mogę sobie z tego zrobić na

2:26przykład console log inną rzeczą którą moglibyśmy tutaj zrobić to byłoby extract

2:30to constant in module scope czyli wtedy na samej górze zostanie to wstawione wszystkie

2:35funkcje cały ten kod jak wiemy w javascript również będzie miał do tego dostęp i znowu mogę

2:39tutaj nadać nazwę jeszcze innym fajnym refactorem jest

2:44coś takiego że czasami mamy jakąś metodę w kodzie i zaczniemy pisać dużo kodu i

2:48mamy taką takie wrażenie że fajnie byłoby to wyekstrahować do osobnej metody

2:52powiedzmy że tutaj ta metoda przyjmuje jakąś tablice i następnie robimy jakieś

2:56array push dodajemy coś do tej tablicy powiedzmy 1

3:002 3 no i wyobraź sobie że tutaj mamy więcej kodu na przykład 10 linijek

3:04kodu i uznaliśmy że fajnie byłoby to wyekstrahować do innej metody więc jeżeli

3:08to zaznaczę pojawi się znowu taka żaróweczka i teraz będę mógł wybrać extract

3:13to method in class plugin zobacz co się stanie zostanie

3:17utworzona nowa metoda której mogę nadać nazwę na przykład add i

3:21tutaj automatycznie vs code wiedział że należy do tej metody this add przekazać tą

3:25tablicę i ta metoda przyjmuje ją tutaj jako parametr i

3:29wykonuje taki kod jak mieliśmy wcześniej i jak widzisz to właśnie

3:33takie małe rzeczy sprawiają że vs code jest na prawdę świetnym edytorem a kiedy znajdziemy

3:38sobie odpowiednie dodatki to wtedy już naprawdę możemy tutaj pracować

3:42bardzo bardzo wydajnie i przyjemnie