다음을 통해 공유

Visual Studio에서 JavaScript 코드 검사

  • 아티클

Visual Studio에서 JavaScript 및 TypeScript의 Linting은 ESLint를 통해 이루어집니다. ESLint를 처음 사용하는 경우, 그들의 문서를 확인하여 시작할 수 있습니다.

Linting 지원 활성화

Visual Studio 2022 이상 버전에서 린팅 지원을 사용하려면, 도구 > 옵션 > 텍스트 편집기 > JavaScript/TypeScript > Linting에서 ESLint 설정을 활성화하세요.

Linting 도구 옵션 페이지의 스크린샷

옵션 페이지에서 검토할 파일 집합을 수정할 수도 있습니다. 기본적으로 linted(.js, .jsx, .ts, .tsx, .vue, .html)를 linted할 수 있는 모든 파일 확장명은 linted됩니다. Vue와 HTML 파일에 대한 린팅을 수행하려면 HTML LSP 기반 편집기를 활성화해야 합니다. 각 설정은 도구 > 옵션 > 환경 > 미리 보기 기능>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 플러그 인 필요할 수 있습니다. 예를 들어, TypeScript 코드에서 ESLint를 실행할 수 있도록 하고 추가 형식 정보와 관련된 규칙을 포함하는 TypeScript ESLint이 필요할 수 있습니다.

ESLint를 사용하도록 설정했지만 ESLint npm 패키지를 찾을 수 없으면 골드 막대가 표시됩니다. 이 메시지를 사용하면 로컬 npm 개발 종속성으로 ESLint를 설치할 수 있습니다.

ESLint 골드 막대 설치 스크린샷

마찬가지로 .eslintrc 파일을 찾을 수 없으면 금색 막대가 표시됩니다. 이 메시지를 사용하면 현재 프로젝트에 적용할 수 있는 플러그 인을 설치하는 구성 마법사를 실행할 수 있습니다.

ESLint 실행 마법사 골드바의 스크린샷

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

linting 오류를 특정 줄 또는 파일에서 비활성화할 수 있습니다. 빠른 작업 전구 메뉴를 사용하여 오류를 비활성화할 수 있습니다.

린팅 퀵 액션의 스크린샷

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

비활성화된 린팅 규칙의 스크린샷

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

문제 해결

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