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.
Ostatnia aktualizacja
27 kwi 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:
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 kategorii kliknij Linting, wybierz On edit linting i kliknij 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.
Spostrzeżenie
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 opcję Ustawienia zaawansowane z panelu po lewej stronie okna Konfiguracja serwisu.
Wybierz opcję Linting JS w sekcji Ustawienia zaawansowane na panelu po lewej stronie.
Możesz kliknąć listę rozwijaną obok ECMAScript Version i wybrać 3, 5 lub 6. Program Dreamweaver używa domyślnego zestawu reguł dla wersji, którą wybierzesz.
Jeśli chcesz dostosować ten zestaw reguł, wybierz z rozwijanej listy polecenie Plik konfiguracyjny i kliknij opcję Edytuj plik konfiguracyjny.
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.
Spostrzeżenie
- 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 Output
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:
Czerwony — bieżący dokument zawiera błędy i ostrzeżenia
Żółty — bieżący dokument zawiera tylko ostrzeżenia
Zielony — bieżący dokument nie zawiera błędów
Spostrzeżenie
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.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
