Visual Studio에서 JavaScript 린팅

Visual Studio의 JavaScript 및 TypeScript Linting은 ESLint를 기반으로 합니다. ESLint를 처음 사용하는 경우 해당 설명서를 확인하여 시작할 수 있습니다.

Linting 지원 사용

Visual Studio 2022 이상 버전에서 Linting 지원을 활성화하려면 도구 > 옵션 > 텍스트 편집기 > JavaScript/TypeScript > Linting에서 ESLint 활성화 설정을 활성화합니다.

옵션 페이지에서 lint할 파일 집합을 수정할 수도 있습니다. 기본적으로 린트할 수 있는 모든 파일 확장자(.js, .jsx, .ts, .tsx, .vue, .html)는 린트됩니다. Vue 및 HTML 파일을 linting하려면 HTML LSP 기반 편집기를 사용하도록 설정해야 합니다. 각 설정은 도구 > 옵션 > 환경 > 미리 보기 기능에서 찾을 수 있습니다.

독립형 React 프로젝트 템플릿과 같은 일부 프로젝트 유형에서는 이러한 옵션을 재정의할 수 있습니다. 이러한 프로젝트에서는 프로젝트 속성을 사용하여 도구 > 옵션 페이지의 설정을 재정의할 수 있습니다.

ESLint 종속성 설치

Linting을 사용하도록 설정하면 필요한 종속성을 설치해야 합니다. 종속성에는 ESLint npm 패키지와 프로젝트에 적용 가능한 기타 플러그인이 포함됩니다. 이 패키지는 Linting을 활성화하려는 각 프로젝트에 로컬로 설치하거나 npm install -g eslint를 사용하여 전역적으로 설치할 수 있습니다. 그러나 플러그 인 및 공유 가능한 구성은 항상 로컬로 설치해야 하므로 전역 설치는 권장되지 않습니다.

Visual Studio 2022 버전 17.7 프리뷰 2부터 도구 > 옵션 > 텍스트 편집기 > JavaScript/TypeScript > Linting의 ESLint 경로 설정을 사용하여 ESLint를 로드할 디렉터리를 지정할 수도 있습니다. 이는 ESLint가 전역적으로 설치되어 해당 경로를 C:\Program Files\nodejs\node_modules로 설정할 때 유용합니다.

Lint하려는 파일에 따라 다른 ESLint 플러그인이 필요할 수 있습니다. 예를 들어, ESLint가 TypeScript 코드에서 실행될 수 있도록 하고 추가 유형 정보와 관련된 규칙을 포함하는 TypeScript ESLint가 필요할 수 있습니다.

ESLint가 활성화되었지만 ESLint npm 패키지를 찾을 수 없는 경우 ESLint를 로컬 npm 개발 종속성으로 설치할 수 있는 금색 막대가 표시됩니다.

마찬가지로 .eslintrc 파일을 찾을 수 없으면 현재 프로젝트에 적용 가능한 플러그인을 설치하는 구성 마법사를 실행하기 위한 골드 막대가 표시됩니다.

Linting 규칙 및 자동 수정 비활성화

특정 줄이나 파일에서 Linting 오류를 비활성화할 수 있습니다. 빠른 작업 전구 메뉴를 사용하여 오류를 사용하지 않도록 설정할 수 있습니다.

다음 그림에서는 선택한 코드 줄에 대해 Linting 오류를 사용하지 않도록 설정한 경우의 결과를 보여 줍니다.

또한 자동 수정 코드 작업을 사용하면 자동 수정을 적용하여 해당 Linting 오류를 해결할 수 있습니다.

문제 해결

출력 창에서 ESLint 언어 확장 창을 열어 문제를 설명할 수 있는 오류 메시지나 기타 로그를 볼 수 있습니다.