머리말
Jshint는 JavaScript 코드가 코딩 규칙을 준수하는지 분석하고 확인하는 데 사용됩니다. 이 강력한 도구는 코드에서 오류와 문제를 발견하는 데 도움이 될 수 있으며 팀이 특정 코딩 규칙과 스타일을 유지하여 코드를 신뢰할 수 있고 쉽게 읽을 수 있도록 강요합니다.
이 기사에서는 Jshint를 설치, 구성 및 사용하는 방법을 보여 드리겠습니다. Jshint를 사용할 수있는 내가 좋아하는 편집자 중 일부를 나열하는 예제도 포함되어 있습니다.
Jshint를 설치하십시오
Jshint를 설치하는 것은 매우 쉽습니다. NPM (Node Package Manager)을 사용할 수 있습니다. NPM을 아직 설치하지 않은 경우 Nodejs 웹 사이트에서 최신 버전을 다운로드하여 Node.js 및 NPM을 설치할 수 있습니다.
NPM이 설치되면 다음 명령을 사용하여 jshint를 설치할 수 있습니다.
NPM 설치 jshint -g
-g 매개 변수는 npm 전역으로 설치하여 모든 디렉토리 에서이 명령을 호출 할 수 있도록 알려줍니다.
명령 줄을 통해 코드를 확인하십시오
JSHINT가 설치되었으므로 명령 줄에서 jshint 사용하여 JavaScript 코드 파일을 분석하겠습니다.
다음은 파일 이름 Demo1.json이있는 파일입니다.
다음 명령을 사용하여 코드를 분석합니다.
jshint demo1.js
Jshint는 Demo1.js 파일의 8 행에 오류가 있다고 말합니다. 이유 : 세미콜론이 누락되었습니다.
누락 된 세미콜론을 채우고이 명령을 다시 실행하면 오류 메시지 출력이 없습니다.
Jshint를 구성하십시오
Jshint에는 코드를 분석하기위한 기본 구성이 있지만 구성 설정은 매우 유연하게 설계되었습니다. JSHINT에 대한 구성 처리 파일을 제공하는 4 가지 방법이 있습니다.
한 가지 방법은 --config 매개 변수를 사용하여 구성 파일을 지정하는 것입니다.
jshint demo1.js ---config config.json
다른 방법은 Jshint가 코드 분석을 위해 동일한 레벨 디렉토리 에서이 구성 파일을 검색하기 때문에 구성을 .jshintrc라는 파일에 넣는 것입니다. 찾을 수없는 경우 루트 디렉토리가 될 때까지 상단 디렉토리를 계속 검색하여 프로젝트에 대한 다른 구성 파일을 설정할 수 있습니다.
세 번째 방법은 package.json 파일의 jshintconfig 속성에 구성 정보를 넣는 것입니다.
이 세 가지 방법 중 하나에서 구성 정보는 JSHINT 옵션을 켜거나 끄는 각 매개 변수를 지정하는 JSON 형식입니다. 예를 들어, 다음 구성 파일에서 "사용되지 않은"및 "undef"는 사용하지 않고 정의되지 않은 변수에 대한 알람을 활성화하는 것입니다. "Curly"는 항상 루프와 조건부 블록에 교정기를 넣어야합니다. "eqeqeq"는 == 및! =를 금지한다는 것을 의미하지만 === 및! ==를 사용해야합니다. "글로벌"은 코드에 정의되지 않은 글로벌 변수의 화이트리스트를 지정하는 데 사용됩니다.
네 번째 방법은 구성 정보를 주석으로 코드 파일에 작성하는 것입니다.
JSHINT의 동작을 제어하기 위해 다른 구성 옵션을 볼 수 있습니다.
작은 예
다음으로 위에서 언급 한 config.json 구성 파일의 옵션에서 작동하겠습니다. 아래에 JavaScript 파일이 있다고 가정 해 봅시다.이 파일은 학습을위한 작은 코드 일뿐입니다.
jshint 명령 demo2.js --config config.json 실행하면 다음과 같은 결과를 얻을 수 있습니다.
코드에는 4 개의 오류가 있습니다. 9 행에서 Jshint는 "if"코드 블록이 교정기로 포장되어야한다고 프롬프트합니다. 변수 subscription_id 정의되었지만 사용되지 않았습니다. 9 및 11 행에서 "확인"및 "콘솔"은 정의되지 않습니다.
약간의 수정만으로 처음 두 가지 오류를 피할 수 있습니다.
이제 config.json 파일에 개발 옵션을 추가하고 jshint가 "확인"및 "콘솔"을 인식 할 수 있도록 true로 설정하겠습니다.
이 시점에서 Jshint 명령을 다시 실행하면 오류가 없습니다.
요약
Jshint는 코드 오류를 줄이는 매우 좋은 도구입니다. 많은 편집자들이 Jshint 지원을 제공합니다. 방금 관심있는 친구들은 Jshint를 더 공부할 수 있습니다. 위의 것은 Jshint를 사용하여 JavaScript 오류를 줄이는 것입니다. JavaScript를 사용하는 모든 사람에게 도움이되기를 바랍니다.