JSHint는 JavaScript 소스코드를 대상으로 현재 존재하는 에러나 잠재적으로 발생가능한 에러를 발견할 수 있게 해주고, Coding Convention을 맞출 수 있게 해주는 도구.
설정이 대단히 자유로운 편이라 유연하게 사용할 수 있음.
Mozilla, Facebook, Twitter, jQuery 등의 기업이나 프로젝트가 사용하고 있다고 함.
여러가지 방법이 있겠으나 여기선 node.js 의 모듈로 설치하여 에디트플러스에서 사용하는 법을 예제로 함.
[설치]
node.js
- http://nodejs.org 를 방문하여 중앙에 INSTALL 버튼을 누질러서 설치.
jshint
- node.js 설치를 완료한 후 cmd.exe를 실행하여 콘솔창을 연 다음 node.js가 설치된 디렉토리로 이동하여 npm install jshint -g 라는 명령어로 설치.
- 설치가 완료되면 어디에 설치되었는지 나오는데 이걸 잘 확인할 것.
ex) C:\Users\사용자명\AppData\Roaming\npm\jshint
[설정]
에디트플러스의 사용자 도구에 등록해서 사용하는 예제.
1. 에디트플러스 메뉴 중 도구 > 사용자 도구 구성(C)... 을 선택하여 설정창을 연다.
2. 추가(D) >> 를 클릭하고 프로그램(P) 을 선택하여 JSHint 추가.
3. 세부설정
- 메뉴 제목: JSHint
- 명령(O): C:\Users\사용자명\AppData\Roaming\npm\jshint.cmd
- 인수(E): $(FilePath)
- 동작: 출력 내용 캡쳐
- 출력 패턴 버튼 클릭
- 기본 출력 패턴 사용(U) 체크 해제.
- 정규식(R) : ^(.*?): line ([0-9]+), col ([0-9]+),
- 정규식 태그 > 파일 이름 : 태그로 표시된 식 1
- 정규식 태그 > 줄: 태그로 표시된 식 2
- 정규식 태그 > 칸: 태그로 표시된 식 3
여기까지 설정 후 저장하면 JSHint 사용가능.
js 파일을 하나 열고 위에서 등록한 사용자 도구를 실행시키면 콘솔창에 JSHint 실행결과가 출력됨.
[옵션]
JSHint에서 체크하는 각종 항목들을 지정할 수 있는 많은 옵션이 존재함.
옵션을 설정하는 방법도 여러가지지만 여기선 .jshintrc 파일을 이용하는 방법을 기준으로 설명함.
자세한 사항은 다음 참조: http://jshint.com/docs/options
JSHint가 실행되면 체크할 js 파일이 위치한 디렉토리부터 상위로 올라가면서 .jshintrc 파일이 있는지 찾음.
중간에 하나 찾으면 해당 옵션을 사용하고 끝까지 못찾으면 기본옵션으로 실행됨.
그러므로 어떤 프로젝트가 있다면 해당 프로젝트의 최상단에 .jshintrc 파일을 만들어 놓고 공동사용이 가능한 구조.
아래는 간략한 예제.
C:\JSHint 라는 디렉토리를 기준으로 한다고 가정.
test.js 라는 소스코드를 아래처럼 작성.
아무 옵션도 설정하지 않았을 경우 이 소스코드는 체크사항이 하나도 없는 소스코드임.
function func(a, b)
{
return a + 1;
}
console.log(func(1));
같은 디렉토리에 .jshintrc 라는 파일을 아래처럼 작성.
{
// 정의되었으나 사용되지 않는 것 체크
"unused": true,
// 정의되지 않았으나 사용된 것 체크
"undef": true
}
에디트플러스에서 test.js 파일을 열어 설정한 JSHint 사용자도구를 실행하면 아래처럼 나옴.
---------- JSHint ----------
C:\JSHint\test.js: line 6, col 1, 'console' is not defined.
C:\JSHint\test.js: line 1, col 18, 'b' is defined but never used.
2 errors
출력 완료 (0초 경과) - 정상 종료
console의 경우 정의되지는 않았으나 전역객체이므로 체크ㅔ서 예외처리를 하고 싶다면 test.js 소스코드에 이렇게 인라인 옵션을 설정하면 됨.
/*jshint undef:false */ // 방법1. 소스코드 내의 전체 undefined를 예외처리.
/* global console */ // 방법2. console을 전역으로 선언하는 방식.
function func(a, b)
{
return a + 1;
}
console.log(func(1));
