Informacje o przeprowadzaniu lintingu na plikach HTML, CSS i JS 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.

Dreamweaver umożliwia przeprowadzanie lintingu na plikach HTML (.htm i .html), CSS i JavaScript. Wykonaj następujące czynności, aby przeprowadzić linting na tych plikach:

  1. Określ reguły lintingu, edytując pliki konfiguracji HTML, CSS i JS. Więcej informacji: Określanie reguł lintingu.

  2. Włączanie lub wyłączanie lintingu. Proces lintingu może być uruchamiany przy wczytywaniu lub zapisywaniu pliku. Linting 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 i określanie jego reguł

Kliknij polecenie Edycja > Preferencje (Win) lub Dreamweaver > Preferencje (Mac). Z listy Kategoria wybierz pozycję Linting i zaznacz opcję Włącz linting.

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:

  1. Kliknij polecenie Edycja > Preferencje (Win) lub Dreamweaver > Preferencje (Mac).

  2. Z listy Kategorie wybierz pozycję Linting.

  3. 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.

  4. Edytuj lub dodaj reguły lintingu w plikach konfiguracyjnych. Dodatkowe informacje na temat reguł lintingu zawiera następująca dokumentacja:

    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 CC 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.

  1. Kliknij opcję Serwis > Zarządzaj serwisami.

    Okno dialogowe Zarządzaj serwisami
    Wybierz odpowiedni serwis w oknie Zarządzaj serwisami
  2. Wybierz opcję Ustawienia zaawansowane z panelu po lewej stronie okna Konfiguracja serwisu.

  3. 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
    Wybór wersji ECMAScript
  4. 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
    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
    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 nie używasz pliku .eslintrc.js w konfiguracji serwisu, program Dreamweaver będzie go szukać we wszystkich lokalizacjach poniżej katalogu głównego.

    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.
Panel Wyjście i ikona lintingu
Panel Wyjście i ikona lintingu

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.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online