Udostępnij za pośrednictwem

Linting JavaScript in Visual Studio

  • Artykuł

Linting JavaScript i TypeScript w programie Visual Studio jest obsługiwane przez bibliotekę ESLint. Jeśli dopiero zaczynasz ESLint, możesz zacząć od sprawdzenia ich dokumentacji.

Włączanie obsługi lintingu

Aby włączyć obsługę lintingu w programie Visual Studio 2022 lub nowszym, włącz ustawienie Włącz ESLint w obszarze Narzędzia > Opcje > edytora > tekstów JavaScript/TypeScript > Linting.

Screenshot of linting Tools Options page.

Na stronie opcji można również zmodyfikować zestaw plików, które mają być wyśmielone. Domyślnie wszystkie rozszerzenia plików, które mogą być linted (.js, .jsx, .ts, .tsx, .vue, .html) będą linted. Edytor oparty na protokole LSP HTML musi być włączony do obsługi lintingu plików Vue i HTML. Odpowiednie ustawienie można znaleźć w obszarze Narzędzia > Opcje > Środowiska > w wersji zapoznawczej funkcje.

Te opcje można zastąpić w niektórych typach projektów, takich jak autonomiczne szablony projektów React. W tych projektach można zastąpić ustawienia na stronie Narzędzia > Opcje przy użyciu właściwości projektu:

Screenshot of linting project properties.

Instalowanie zależności ESLint

Po włączeniu lintingu należy zainstalować niezbędne zależności. Zależności obejmują pakiet ESLint npm i inne wtyczki dotyczące projektu. Ten pakiet można zainstalować lokalnie w każdym projekcie, w którym chcesz włączyć linting, lub zainstalować go globalnie przy użyciu polecenia npm install -g eslint. Jednak instalacja globalna nie jest zalecana, ponieważ wtyczki i konfiguracje z możliwością udostępniania zawsze muszą być instalowane lokalnie.

Począwszy od programu Visual Studio 2022 w wersji 17.7 (wersja zapoznawcza 2), możesz również użyć ustawienia Ścieżka ESLint w obszarze Narzędzia > Opcje > edytora > tekstów JavaScript/TypeScript > Linting , aby określić katalog, z którego chcesz załadować bibliotekę ESLint. Jest to przydatne, gdy program ESLint jest instalowany globalnie, gdzie można ustawić odpowiednią ścieżkę na C:\Program Files\nodejs\node_modules.

W zależności od plików, które mają być lint, mogą być potrzebne inne wtyczki ESLint. Na przykład może być potrzebny skrypt TypeScript ESLint, który umożliwia uruchamianie ESLint w kodzie TypeScript i zawiera reguły specyficzne dla dodatkowych informacji o typie.

Gdy pakiet ESLint jest włączony, ale pakiet ESLint npm nie zostanie znaleziony, zostanie wyświetlony złoty pasek, który umożliwia zainstalowanie pakietu ESLint jako lokalnej zależności programistycznej npm .

Screenshot of Install ESLint gold bar.

Podobnie, gdy plik eslintrc nie zostanie znaleziony, zostanie wyświetlony złoty pasek, aby uruchomić kreatora konfiguracji, który zainstaluje wtyczki dotyczące bieżącego projektu.

Screenshot of Run ESLint wizard gold bar.

Wyłączanie reguł lintingu i automatycznych poprawek

Błędy lintingu można wyłączyć w określonym wierszu lub pliku. Błędy można wyłączyć za pomocą menu żarówki Szybkie akcje:

Screenshot of linting Quick Actions.

Poniższa ilustracja przedstawia wynik, jeśli wyłączysz błąd lintingu dla wybranego wiersza kodu.

Screenshot of disabled linting rule.

Ponadto akcje kodu naprawy automatycznej umożliwiają zastosowanie automatycznej poprawki w celu rozwiązania odpowiedniego błędu lintingu.

Rozwiązywanie problemów

Możesz otworzyć okienko Rozszerzenia języka ESLint w oknie Dane wyjściowe, aby wyświetlić komunikaty o błędach lub inne dzienniki, które mogą wyjaśnić problem.