다음을 통해 공유

Visual Studio에서 JavaScript 린팅

  • 아티클

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

Linting 지원 사용

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

Screenshot of linting Tools Options page.

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

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

Screenshot of linting project properties.

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 개발 종속성으로 설치할 수 있는 금색 막대가 표시됩니다.

Screenshot of Install ESLint gold bar.

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

Screenshot of Run ESLint wizard gold bar.

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

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

Screenshot of linting Quick Actions.

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

Screenshot of disabled linting rule.

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

문제 해결

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