Podręcznik użytkownika Anuluj

Linting: oczyszczanie kodu z błędów

Szukaj

Ostatnia aktualizacja 21 maj 2021

Informacje o przeprowadzaniu lintingu na plikach HTML, CSS i JS oraz plikach szablonów DW w programie Adobe Dreamweaver. Wyświetlanie błędów i ostrzeżeń w panelu Wyjście i przechodzenie pojedynczym kliknięciem do wiersza zawierającego błąd.

Zarówno początkujący, jak i doświadczeni programiści mają często do czynienia z błędami wkradającymi się do tworzonego kodu — czy to przez pomyłkę, czy z braku doświadczenia. Jeśli strona WWW lub jakaś jej część nie wygląda zgodnie z oczekiwaniami, trzeba przeprowadzić procedurę debugowania kodu, aby zlokalizować błędy składniowe lub logiczne. Niestety proces debugowania może być niezwykle trudny i czasochłonny. Jest to szczególnie prawdziwe w przypadku złożonych implementacji kodu.

Dlatego też program Dreamweaver udostępnia funkcję lintingu, która pozwala w prosty i łatwy sposób usuwać z kodu typowe błędy. Linting to proces polegający na analizie kodu i oznaczaniu potencjalnych błędów lub miejsc „podejrzanych”. W programie Dreamweaver funkcja lintingu może na przykład oznaczać błędy składni HTML, błędy parsowania w kodzie CSS lub ostrzeżenia w plikach JavaScript.

Wykryte błędy i ostrzeżenia są wyświetlane w osobnym panelu Wyjście, zadokowanym na dole przestrzeni roboczej. Każdy wiersz w tym panelu umożliwia przejście do tego fragmentu kodu, w którym wystąpił błąd. Ułatwia to lokalizowanie i korygowanie błędnego kodu. Ponadto numery wierszy zawierających błędy lub ostrzeżenia są podświetlone odpowiednio na czerwono (dla błędów) lub na żółto (dla ostrzeżeń). Zatrzymanie kursora myszy nad tak podświetlonym numerem wiersza pozwala wyświetlić podgląd błędu lub ostrzeżenia.

Funkcja lintingu podczas edycji umożliwia wyświetlanie błędów i ostrzeżeń na panelu Wyjście w trakcie edytowania kodu.

Program Dreamweaver umożliwia przeprowadzanie lintingu na plikach HTML (.htm i .html), CSS i JavaScript oraz plikach szablonów DW.

Wykonaj następujące czynności, aby przeprowadzić linting na tych plikach:

Reguły lintingu można określić, edytując pliki konfiguracji formatu HTML, CSS i JS oraz szablonów DW. Więcej informacji: Określanie reguł lintingu.
Linting można włączać lub wyłączać; proces lintingu może być uruchamiany przy wczytywaniu lub zapisywaniu pliku albo podczas jego edycji.
- Linting podczas edycji można włączać i wyłączać za pomocą opcji Preferencje > Linting. Więcej informacji: Włączanie lintingu i ustawianie jego preferencji.

Błędy i ostrzeżenia znalezione w plikach będą wyświetlane w panelu Wyjście. Więcej informacji: Wyniki lintingu i panel Wyjście.

Włączanie lintingu podczas edycji i określanie jego reguł

Kliknij polecenie Edycja > Preferencje (Win) lub Dreamweaver > Preferencje (Mac). Na liście Kategoria kliknij pozycję Linting. Wybierz opcję Włącz linting i kliknij przycisk Zastosuj.

Linting podczas edycji

W programie Dreamweaver funkcja lintingu w edycji jest domyślnie włączona. Aby ją wyłączyć, wybierz polecenie Edycja > Preferencje (Win) lub Dreamweaver > Preferencje (Mac). Na liście Kategoria kliknij pozycję Linting. Wybierz opcję Linting podczas edycji i kliknij przycisk Zastosuj.

Określanie reguł lintingu

Linting plików HTML, CSS i JS można przeprowadzać, modyfikując reguły zawarte w odpowiednich plikach konfiguracyjnych:

HTML: DW.htmlhintrc
CSS: DW.csslintrc
JS: .eslintrc

Aby wyświetlić i edytować te pliki, wykonaj następujące czynności:

Kliknij polecenie Edycja > Preferencje (Win) lub Dreamweaver > Preferencje (Mac).
Z listy Kategoria wybierz pozycję Linting.
W sekcji Edytuj zestaw reguł kliknij odpowiedni typ pliku. Następnie kliknij opcję Edytuj i zastosuj zmiany.

W programie Dreamweaver zostanie otwarty odpowiedni plik konfiguracyjny.
Edytuj lub dodaj reguły lintingu w plikach konfiguracyjnych. Dodatkowe informacje na temat reguł lintingu zawiera następująca dokumentacja:
- Linting HTML: https://github.com/yaniswang/HTMLHint/wiki/Rules
- Linting CSS: https://github.com/CSSLint/csslint/wiki/Rules
- Linting JS: https://eslint.org/docs/rules
W wymienionych powyżej plikach konfiguracyjnych można zdefiniować również typy błędów i ostrzeżeń, które będą wyświetlane.

Uwaga:

Plik konfiguracji reguł lintingu we wcześniejszych wersjach programu Dreamweaver 19.0 ma nazwę JS: DW.jshintrc. Zobacz http://jshint.com/docs/options/

Linting ECMAScript 6

Program Dreamweaver obsługuje składnię ECMAScript 6. Obsługiwany jest również linting kodu ECMAScript, a moduł ESLint jest teraz stosowany jako domyślny linter JavaScript.

Kliknij opcję Serwis > Zarządzaj serwisami.

Wybierz odpowiedni serwis w oknie Zarządzaj serwisami
Wybierz opcję Ustawienia zaawansowane z panelu po lewej stronie okna Konfiguracja serwisu.
Wybierz opcję Linting JS w sekcji Ustawienia zaawansowane na panelu po lewej stronie.

Obok opcji Wersja ECMAScript znajduje się rozwijana lista, z której można wybrać wersję 3, 5 lub 6. Program Dreamweaver będzie używać domyślnego zestawu reguł dla wybranej wersji.

Wybór wersji ECMAScript
Jeśli chcesz dostosować ten zestaw reguł, wybierz z rozwijanej listy polecenie Plik konfiguracyjny i kliknij opcję Edytuj plik konfiguracyjny.

Edytowanie pliku konfiguracyjnego lintingu JS

Zmiany wprowadzone w oknie dialogowym Ustawienia serwisu są zapisywane w pliku konfiguracyjnym .eslintrc.js w katalogu głównym serwisu. Jeśli taki plik jeszcze nie istnieje, to jest tworzony nowy.

Plik eslintrc.js z katalogu głównego serwisu zostanie otwarty do edycji. Więcej informacji: Reguły lintingu ESLint.

Plik konfiguracyjny .eslintrc.js
Uwaga:
Wartość opcji Wersja ECMAScript zdefiniowana w oknie dialogowym Konfiguracja serwisu ma znaczenie rozstrzygające nad wartością z pliku .eslintrc.js w katalogu głównym serwisu.

Jeśli w serwisie nie ma plików konfiguracyjnych ESLint, program Dreamweaver będzie ich szukać we wszystkich lokalizacjach poniżej katalogu głównego serwisu.

Więcej informacji o kaskadzie i hierarchii pliku konfiguracyjnego podano w serwisie ESLint.

Wyniki lintingu i panel Wyjście

Wyniki lintingu, czyli błędy i ostrzeżenia, są wyświetlane w panelu Wyjście. Panel Wyjście jest dostępny w trybie zadokowanym w dolnej części wszystkich domyślnych przestrzeni roboczych. Jeżeli panel Wyjście jest zamknięty, otwórz go, wykonując jedną z następujących czynności:

Kliknij ikonę stanu lintingu na pasku stanu w oknie Dokument.
Użyj skrótu klawiszowego Shift+F6.
Użyj polecenia Okno > Wyniki > Wyjście.

Ikona lintingu na pasku stanu sygnalizuje rezultaty lintingu:

Czerwona — bieżący dokument zawiera błędy i ostrzeżenia
Żółta — bieżący dokument zawiera tylko ostrzeżenia
Zielona — w bieżącym dokumencie nie ma błędów

Uwaga:

Za pomocą ikony lintingu na pasku stanu można również przełączać (otwierać lub zamykać) panel Wyjście. Jest to możliwe w sytuacji, gdy ikona jest czerwona lub żółta (ale nie zielona).

Wiersze zawierające błędy lub ostrzeżenia są podświetlane odpowiednio na czerwono lub na żółto. Dwukrotne kliknięcie komunikatu w panelu Wyjście umożliwia przejście do wiersza, w którym wystąpił dany błąd. W widoku Kod można również zatrzymać kursor myszy nad numerem wiersza, który zawiera nieprawidłowości, aby wyświetlić podgląd błędu lub ostrzeżenia.

Panel Wyjście wyświetla 50 komunikatów naraz. Błędy są wyświetlane przed ostrzeżeniami. Gdy skorygujesz widoczne błędy, lista w panelu zostanie przewinięta i wyświetli kolejny błąd.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?