Visual Studio에서 JavaScript 및 TypeScript를 Linting하는 것은 ESLint의해 구동됩니다. ESLint를 접하는 경우 설명서확인하여 시작할 수 있습니다.
Linting 지원 활성화
Visual Studio 2022 이상 버전에서 linting 지원을 사용하도록 설정하려면 에서 > 사용을 설정합니다.
옵션 페이지에서 lint할 파일 집합을 수정할 수도 있습니다. 기본적으로 linted할 수 있는 모든 파일 확장명(.js, .jsx, .ts, .tsx, .vue, .html)은 linted됩니다. HTML LSP 기반 편집기를 사용하도록 설정해야 Vue 및 HTML 파일을 린팅할 수 있습니다. 각 설정은 도구 > 옵션 > 환경 > 미리 보기 기능>HTML LSP 기반 편집기찾을 수 있습니다.
독립 실행형 React 프로젝트 템플릿 같은 일부 프로젝트 형식에서 이러한 옵션을 재정의할 수 있습니다. 이러한 프로젝트에서는 프로젝트 속성을 사용하여 도구 > 옵션 페이지에서 설정을 재정의할 수 있습니다.
ESLint 종속성 설치
Linting을 사용하도록 설정하면 필요한 종속성을 설치해야 합니다. 종속성에는 ESLint npm 패키지 및 프로젝트에 적용할 수 있는 기타 플러그 인이 포함됩니다. 이 패키지는 Linting을 사용하도록 설정하려는 각 프로젝트에 로컬로 설치하거나 npm install -g eslint사용하여 전역적으로 설치할 수 있습니다. 그러나 플러그 인 및 공유 가능한 구성은 항상 로컬로 설치해야 하므로 전역 설치는 권장되지 않습니다.
Visual Studio 2022 버전 17.7 미리 보기 2부터 JavaScript/TypeScript Linting > 도구 > 옵션 > 텍스트 편집기에서 > 설정을 사용하여 ESLint를 로드할 디렉터리를 지정할 수도 있습니다. 이 설정은 ESLint가 전역적으로 설치되어 C:\Program Files\nodejs\node_modules 해당 경로를 설정할 수 있는 경우에 유용합니다.
lint하려는 파일에 따라 다른 ESLint 플러그 인 필요할 수 있습니다. 예를 들어, TypeScript ESLint은 TypeScript 코드에서 ESLint를 실행할 수 있게 해주고, 추가 형식 정보에 대한 규칙을 포함할 수 있도록 필요할 수 있습니다.
ESLint를 사용하도록 설정했지만 ESLint npm 패키지를 찾을 수 없으면 골드 막대가 표시됩니다. 이 메시지를 사용하면 로컬 npm 개발 종속성으로 ESLint를 설치할 수 있습니다.
마찬가지로 .eslintrc 파일을 찾을 수 없으면 금색 막대가 표시됩니다. 이 메시지를 사용하면 현재 프로젝트에 적용할 수 있는 플러그 인을 설치하는 구성 마법사를 실행할 수 있습니다.
Linting 규칙 및 자동 수정 사용 안 함
특정 줄 또는 파일에서 linting 오류를 비활성화할 수 있습니다. 빠른 작업 전구 메뉴를 사용하여 오류를 비활성화할 수 있습니다.
다음 그림에서는 선택한 코드 줄에 대해 linting 오류를 사용하지 않도록 설정한 경우의 결과를 보여 줍니다.
또한 자동 수정 코드 작업을 사용하면 자동 수정을 적용하여 해당 linting 오류를 해결할 수 있습니다.
문제 해결
출력 창에서 ESLint 언어 확장 창을 열어 문제를 설명할 수 있는 오류 메시지 또는 기타 로그를 볼 수 있습니다.