Wklej uszkodzony JavaScript tutaj i kliknij "Napraw JS!!", aby go naprawićWprowadź nieprawidłowy JS

Co to jest narzędzie do naprawy JS?

Wklejasz fragment z dokumentacji albo z czatu i parser eksploduje. Brakuje średnika tam, gdzie ASI nie pomogło. Klamerka zniknęła. Łańcuch przelewa się przez koniec linii. To narzędzie bierze ten zepsuty JavaScript i oddaje coś, co silnik faktycznie zaakceptuje.

Gramatyka JavaScriptu jest zdefiniowana w specyfikacji ECMAScript od TC39 i to właśnie ona jest wzorcem dla każdej przeglądarki i Node.js przy parsowaniu kodu. Dokumentacja JavaScriptu na MDN omawia te reguły jasnym językiem. Automatyczne wstawianie średnika (ASI) jest częścią tej gramatyki — zazwyczaj wygodne, bolesne, gdy nieoczekiwany podział linii po cichu zmienia znaczenie kodu. To narzędzie celuje w błędy na poziomie składni; jeśli chcesz dodatkowo pełnego sformatowania, przepuść wynik przez Prettier.

Wszystko przechodzi przez przeglądarkę do naszego backendu i z powrotem. Używaj jako pierwszego przebiegu, zanim skierujesz ESLint na plik — większość naruszeń reguł czyta się łatwiej, gdy kod przynajmniej parsuje.

Jak używać narzędzia do naprawy JS

Trzy kroki. Każdy używa rzeczywistych przycisków i paneli na tej stronie.

Wklej uszkodzony JS lub załaduj przykład

Wstaw uszkodzony JavaScript do lewego edytora. Kliknij Przykładowy JS, by zobaczyć, jakie wejście narzędzie obsługuje. Klasyczny bałagan wygląda tak — brakujące średniki, brakujący przecinek w literale obiektu, niezbalansowany nawias klamrowy, wartość, która powinna być łańcuchem, a została wpisana bez cudzysłowów:

function processOrder(customer) {
  const order = { id: "ORD-9001" customer: customer, status: pending }
  return order

Narzędzie radzi sobie z brakującymi średnikami, niezbalansowanymi `{`/`}`, `[`/`]` oraz `(`/`)`, brakującymi przecinkami w obiektach i tablicach, wartościami bez cudzysłowów, niedomkniętymi łańcuchami i dziwnymi kombinacjami operatorów.

Kliknij Napraw JS!!

Naciśnij zielony przycisk Napraw JS!!. Kod trafia do backendu, jest naprawiany i wraca w postaci parsowalnej. W trakcie procesu pojawia się wskaźnik ładowania — zwykle sekunda lub dwie.

Sprawdź wynik

Prawy panel pokazuje naprawiony kod. Semantyka pozostaje jak najbardziej zbliżona do twojego wejścia — naprawiana jest tylko składnia. Skopiuj wynik, wklej z powrotem do edytora i przepuść przez formater lub linter.

Kiedy faktycznie tego użyjesz

Odzyskiwanie wklejonych fragmentów

Kod z wątku Slacka, odpowiedzi ze StackOverflow albo z PDF-a po drodze gubi cudzysłowy, kontynuacje linii lub całe znaki interpunkcyjne. Przepuść go tutaj, zanim zaczniesz edytować ręcznie.

Debugowanie wyciągniętego zminifikowanego kodu

Kiedy czytasz stack trace z bundla produkcyjnego i wyciągasz kawałek do analizy, doprowadzenie do tego, by się parsował, to połowa pracy. Najpierw naprawa składni, potem upiększanie, na końcu analiza.

Niespodzianki z ASI

Kod oparty na automatycznym wstawianiu średników potrafi się subtelnie zepsuć — np. `return` po nowej linii cicho zwraca `undefined`. Narzędzie dodaje wyraźne średniki tam, gdzie parser ich oczekuje.

Czyszczenie zalążków od AI

Fragmenty generowane przez LLM raz na jakiś czas gubią klamerkę albo pomijają przecinek. Napraw tu składnię, zanim wrzucisz wynik do Babela albo bundlera.

Często zadawane pytania

Czy mój kod jest gdzieś przechowywany?

Jest wysyłany do naszego backendu, by model AI mógł go naprawić, a my zwracamy wynik. Nie logujemy kodu, nie używamy go do trenowania i nie wykorzystujemy go do niczego innego niż naprawa tej jednej prośby.

Jakie typy błędów potrafi naprawić?

Rzeczy z poziomu składni: brakujące średniki, niezbalansowane klamry / nawiasy kwadratowe / okrągłe, brakujące przecinki w obiektach i tablicach, wartości bez cudzysłowów tam, gdzie spodziewano się łańcucha, niedomknięte łańcuchy i template literale, źle złożone kombinacje operatorów. Błędy logiczne (zła warunek, off-by-one) są poza zakresem.

Czy zmieni znaczenie mojego kodu?

Bardzo się stara, by tego nie robić. Celem jest zachowanie semantyki i naprawa wyłącznie gramatyki. Są przypadki brzegowe, w których trzeba interpretować (token bez cudzysłowów tam, gdzie wyraźnie powinien być łańcuch, na przykład) — wtedy narzędzie wybiera najbardziej prawdopodobną intencję. Zawsze przyjrzyj się wynikowi.

Czy obsługuje TypeScript?

Specyficzna składnia TypeScripta — adnotacje typów, generyki, dekoratory — jest poza zakresem. Podzbiór JS w TS (klasy, async/await, template literale, nowoczesne metody tablicowe) parsuje się bez problemu. Jeśli chcesz pełnej konwersji do TS, zobacz nasze narzędzie JS do TypeScript.

Czy mogę użyć tego na kodzie produkcyjnym?

To narzędzie do naprawy składni, nie zastępuje lintera ani type checkera. Traktuj wynik jako punkt wyjścia — przepuść go przez ESLint i swój zestaw testów, zanim wgrasz.

Czy jest kod, którego po prostu nie da się naprawić?

Czasem. Jeśli wejście jest zbyt fragmentaryczne lub pierwotna intencja jest naprawdę dwuznaczna (kilka równie sensownych poprawek), narzędzie wybierze jedną — ale wynik może być składniowo poprawny i semantycznie błędny. Zawsze sprawdzaj wynik, zwłaszcza dla wejść z paru linii.

Inne narzędzia JavaScript, których możesz potrzebować

Naprawa składni to tylko pierwszy krok. Oto pozostałe narzędzia JavaScript na stronie:

Narzędzie do naprawy JS