Edycja plików

Edycja plikow

Edytor kodu pozwala bezposrednio edytowac pliki zrodlowe Twojej strony. Ten przewodnik opisuje, jak skutecznie i bezpiecznie wprowadzac zmiany.

Otwieranie pliku do edycji

1. Przejdz do pliku w Eksploratorze plikow
2. Kliknij nazwe pliku
3. Plik otworzy sie w panelu edytora
4. Mozesz zaczac edycje!

Interfejs edycji

Funkcje edytora

• Kolorowanie skladni – Kolory dla roznych elementow kodu
• Numery linii – Odniesienie do konkretnych linii
• Pozycja kursora – Pokazuje biezaca linie i kolumne
• Paski przewijania – Nawigacja po dlugich plikach

Wiele zakladek

Otwieraj wiele plikow i przelaczaj sie miedzy nimi za pomoca zakladek.

Wprowadzanie zmian

Podstawowa edycja

1. Kliknij w miejscu, ktore chcesz edytowac
2. Wpisz zmiany
3. Plik jest teraz zmodyfikowany (wskazuje na to kropka na zakladce)

Czeste akcje

| Akcja | Windows | Mac | | -------------- | -------- | --------------- | | Zapisz | Ctrl + S | Cmd + S | | Cofnij | Ctrl + Z | Cmd + Z | | Ponow | Ctrl + Y | Cmd + Shift + Z | | Znajdz | Ctrl + F | Cmd + F | | Zamien | Ctrl + H | Cmd + H | | Zaznacz wszystko| Ctrl + A | Cmd + A | | Kopiuj | Ctrl + C | Cmd + C | | Wklej | Ctrl + V | Cmd + V | | Wytnij | Ctrl + X | Cmd + X |

Bezpieczne praktyki edycji

Przed edycja

1. Wiedz, co zmieniasz – Zrozum przeznaczenie kodu
2. Wprowadzaj jedna zmiane naraz – Latwiej sledzic, co zadzialo
3. Zapisz przed wazniejszymi zmianami – Historia wersji pomoze w razie potrzeby

Podczas edycji

1. Nie usuwaj kodu, ktorego nie rozumiesz
2. Zachowuj strukture – Dopasuj tagi otwierajace/zamykajace
3. Obserwuj wskazniki bledow – Czerwone podkreslenia oznaczaja problemy

Po edycji

1. Zapisz zmiany
2. Sprawdz podglad – Zobacz, czy zmiany zadzialy
3. Przetestuj funkcjonalnosc – Upewnij sie, ze nic sie nie zepsulo

Co edytowac (i jak)

Zmiana tresci tekstowej

Znajdz tekst w cudzyslowach i zmien go:

// Przed
<h1>Welcome to Our Site</h1>

// Po
<h1>Witaj na mojej wspanialej stronie</h1>

Zmiana kolorow

Znajdz wartosci kolorow i zastap je:

/* Przed */
background-color: #3498db;

/* Po */
background-color: #e74c3c;

Zmiana liczb/wartosci

Dostosuj wartosci liczbowe:

/* Przed */
padding: 20px;

/* Po */
padding: 40px;

Czeste typy plikow

Pliki JSX/JavaScript (.jsx, .js)

Komponenty i logika:

function Button({ text }) {
  return <button className="btn-primary">{text}</button>;
}

Pliki CSS (.css)

Stylowanie:

.btn-primary {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

Pliki JSON (.json)

Konfiguracja i dane:

{
  "name": "My Website",
  "version": "1.0.0"
}

Obsluga bledow

Bledy skladni

Jesli widzisz czerwone podkreslenia:

1. Sprawdz brakujace nawiasy, cudzyslowy lub sredniki
2. Upewnij sie, ze tagi sa prawidlowo zamkniete
3. Zweryfikuj pisownie slow kluczowych

Cos sie zepsulo?

1. Cofnij – Nacisnij Ctrl/Cmd + Z kilka razy
2. Nie zapisuj – Zamknij plik bez zapisywania
3. Historia wersji – Przywroc poprzednia wersje
4. Zapytaj AI – Opisz, co poszlo nie tak

Wskazowki dla nieprogramistow

Bezpieczne miejsca do edycji

• Tekst w cudzyslowach – Zwykle bezpieczny do zmiany
• Liczby – Dostosuj wartosci jak rozmiary
• Kody kolorow – Zamien kolory (zachowaj # dla hex)

Czego unikac

• Usuwania linii, ktorych nie rozumiesz
• Zmieniania elementow w nawiasach klamrowych {}
• Modyfikowania instrukcji importu
• Edycji czegokolwiek z function lub const

W razie watpliwosci

Uzyj czatu AI zamiast tego:

"Zmien kolor przycisku z niebieskiego na zielony"

To bezpieczniejsze niz bezposrednia edycja kodu.

Zapisywanie zmian

Reczny zapis

Kliknij przycisk Zapisz lub nacisnij Ctrl/Cmd + S.

Wskaznik niezapisanych zmian

• Kropka na zakladce pliku oznacza niezapisane zmiany
• Przycisk zapisu moze sie podswietlic

Automatyczny zapis

Niektore zmiany moga byc zapisywane automatycznie. Sprawdz ustawienia edytora.

Po zapisaniu

1. Podglad sie aktualizuje – Zobacz zmiany w podgladzie
2. Przetestuj dokladnie – Poklikaj, aby upewnic sie, ze wszystko dziala
3. Opublikuj – Gdy bedziesz gotowy, opublikuj, aby zmiany byly widoczne online