Polski frontend

Oskar Kowalów - blog o programowaniu

Git w Visual Studio Code

body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}

W tym artykule pokażę, jak można ułatwić sobie codzienną pracę z Git'em nie wychodząc z Visual Studio Code.

.css-1p1kpni{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.5rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-1p1kpni{font-size:1.875rem;}}@media screen and (min-width:768px){.css-1p1kpni{font-size:1.875rem;}}@media screen and (min-width:1024px){.css-1p1kpni{font-size:2.25rem;}}Czemu Visual Studio Code? 🤔

Visual Studio Code to najpopularnijeszy edytor kodu na świecie. Ta teza pochodzi z ankiety przeprowadzonej na .css-688a3f{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary,#6b46c1);-webkit-text-decoration:none;text-decoration:none;}.css-688a3f:hover{-webkit-text-decoration:underline;text-decoration:underline;}Stack Overflow. VS Code jest darmowy, skonfigurowany z Git'em, łatwo rozszerzalny o dodatkowe wtyczki, utrzymywany przez Microsoft i stale aktualizowany.

Git wewnątrz VS Code? 🛠

VS Code jest skonfigurowany z Gitem i daje nam możliwości korzystania z Git'a nie opuszczając tego edytora. Jakie możliwości daje nam VS Code?

.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}stage'owanie wybranego tekstu w pliku lub stage'owanie całych plików,tworzenie commitów,tworzenie nowych branchy,przełączanie się pomiędzy branchami,porównywanie plików pomiędzy różnymi commitami,rozwiązywanie konfliktów podczas mergowania branchy,wiele innych...Czy używanie Git'a w edytorze kodu to oszustwo lub pójście na łatwiznę? 🚔

Można się spotkać z takim stwierdzeniem, że używanie zewnętrznych tooli do obsługi Git'a to pójście na łatwiznę, bo jedyne słuszne podejście to używanie terminala. Ja nie zgadzam się z tym stwierdzeniem. Na początku mojej pracy z Gitem korzystałem tylko z terminala, ale przez to moja wydajność była niższa niż teraz.

VS Code przyspiesza codzinną pracę w Git'cie, ale nie zastąpi całkowicie terminala. Ten edytor kodu daje nam tylko najbardziej przydatne i najczęściej używane funkcjonalności, których możemy bardzo szybko użyć w razie potrzeby.

To samo tyczy się graficznych programów do Git'a, tzw. Git GUI. O wybranym programie Git GUI napiszę w następnym wpisie.

Zmiany w plikach 📈

W lewym panelu mamy zakładkę Source Control w której korzystamy z Git'a. Przykładowo, tak może wyglądać stan zmian naszych plików w repozytorium:

Widzimy, że plik file1.md jest zmodyfikowany i został dodany do obszaru staged, plik index.js został usunięty, a plik main.js jest nieśledzony (untracked).

Po najechaniu kursorem na któryś z plików zobaczymy trzy ikonki. Od lewej: otwórz plik, usuń wprowadzone zmiany z pliku, dodaj zmiany do obszaru stage.

Po dodaniu plików do obszaru staged, możemy w polu z napisem "Message" podać tytuł commita, wcisnąć CTRL + ENTER (lub COMMAND + ENTER) i bang, commit zrobiony 💥!

Pomocne wskaźniki i dodawanie części tekstu do obszaru staged 🔆

W pliku możemy modyfikować linie tekstu, usuwać je lub dodawać nowe. VS Code daje nam informacje o wprowadzanych zmianach w pliku na bieżąco za pomocą kolorowych wskaźników:

Czerwony trójkąt wskazuje, gdzie została usunięta linia tekstu. Linia zielona wskazuje nowo dodane linie tekstu, a linia niebieska zmodyfikowane linie tekstu.

Klikając myszką w któryś z tych wskaźników, możemy dodać wybrane linie tekstu do obszaru staged (za pomocą plusika) lub usunąć nowo wprowadzine zmiany. Pozostałych dwóch opcji nie używam.

To jest naprawdę super ułatwienie 🔥 ! Nie musimy zawsze dodawać całego pliku do obszaru staged, jak np.: git add index.js. VS Code daje możliwość wybrania tekstu, który nas interesuje, i dodania go do obszaru staged.

Praca z branchami za pomocą palety komend 🎨

Za pomocą palety komend (czyli Command Palette), możemy pracować z branchami, czyli tworzyć nowe branche (git branch), przałączać się między nimi (git checkout) lub je mergować (git merge).

.css-1gtwvjp{border-left-color:var(--theme-ui-colors-primary,#6b46c1);border-left-style:solid;border-left-width:6px;margin-left:0;margin-right:0;padding-left:2rem;}.css-1gtwvjp p{font-style:italic;}

Aby otworzyć Command Palette użyj sekwencji klawiszy CTRL + SHIFT + P (Windows) lub COMMAND + SHIFT + P (Mac)

Po otwarciu okienka możemy zacząć wpisywać "git checkout" i już w trakcie pisania VS Code zacznie podpowiadać różne komendy Git'a:

VS Code jako domyślny systemowy edytor oraz Git diff tool 💻

Można ustawić VS Code jako domyślny systemowy edytor. Dzięki temu łatwiej jest np. pisać obszerne commity, zawierające tytuł i wiadomość.

Jak ustawić VS Code jako edytor oraz diff tool dowiesz się z tego linku.

Tworzenie commitów

Od teraz, gdy VS Code stał się domyślnym edytorem, podczas tworzenia nowego commita, po wpisaniu w terminalu git commit otworzy się VS Code.

Zamiast domyślnego, nieczytelnego edytora:

... otworzy się nowa, piękna zakładka w VS Code:

Wystarczy dodać opis swojego commita, zachować plik, zamknąć tą zakładkę i voilà - commit stworzony 🎉.

.css-14fixdb{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.25rem;color:var(--theme-ui-colors-heading,#000);margin-top:1rem;}@media screen and (min-width:640px){.css-14fixdb{font-size:1.5rem;}}@media screen and (min-width:768px){.css-14fixdb{font-size:1.5rem;}}@media screen and (min-width:1024px){.css-14fixdb{font-size:1.875rem;}}Szybszy sposób na tworzenie commitów ⚡️

Możemy otworzyć Command Palette i wpisać "git commit" lub po prostu "commit" a pojawi się małe okienko z możliwością wpisania tytułu commita.

To jest naprawdę szybki sposób na tworzenie prostych commitów.

Podsumowanie 📝

W tym wpisie pokazałem jak Visual Studio Code umożliwia przyspieszenie codziennej pracy z Git'em. Osobiście korzystam z wyżej wymienionych funkcjonalności na codzień i w moim przypadku fajnie się to sprawdza.

Przestrzegam osóby początkujące, aby zbyt głęboko nie wchodziły w tajniki VS Code, skrótów klawiszowych i innych różnych fancy opcji. Najważniejsze są solidne podstawy, a takie rozwiązania mają zwyczajnie pomagać w codziennej pracy.

Co myślisz na ten temat 🙂? Korzystasz z VS Code lub innego edytoru kodu z wbudowanym Gitem, czy raczej unikasz takiego trybu pracy? Daj znać w sekcji komentarzy👇