티스토리 뷰

JSHint

pilot376 2014. 10. 20. 22:12

JSHint?

JSHint는 자바스크립트 내에서 에러 및 문제의 가능성이 있는 코드를 찾아내고, 팀의 코딩 컨벤션을 적용할 수 있는 (community-driven) 툴입니다. 이것은 매우 유연해서 상세한 코딩 가이드라인과 코드가 실행되는 환경을 쉽게 설정할 수 있습니다. JSHint는 자바스크립트 개발자가 복잡한 프로그램을 걱정 없이 작성하는 것을 도와줄 것입니다. (관련 링크 : http://www.jshint.com/about/)



JSLint? JSHint?

Anton Kovalyov과 Paul Irish는 Douglas Crockford가 만든 JSLint(http://www.jslint.com/lint.html)를 기반으로 JSHint를 만들었습니다. Anton Kovalyov과 Paul Irish는 JSLint가 너무 완고하다고 생각했고, 좀 더 커뮤니티 친화적이 되었으면 좋겠다는 이유로 JSHint 프로젝트를 시작하였습니다. (관련 링크 : http://badassjs.com/post/3364925033/jshint-an-community-driven-fork-of-jslint, http://readwrite.com/2011/02/19/check-your-javascript-with-jsh)



설치


압타나에 JSHint 설치하기 (http://github.eclipsesource.com/jshint-eclipse/)

  • "Help -> Install New Software"를 클릭합니다.


  • Work with 창에 "http://github.eclipsesource.com/jshint-eclipse/updates/"를 입력하고 엔터를 칩니다. 로딩 후 JSHint가 나타나면 선택하고 설치를 진행합니다.


  • 설치가 완료되면 프로젝트를 선택하고 "Properties"를 클릭합니다.


  • JSHint 메뉴에서 검사를 원하는 파일과 제외한 파일, 폴더를 설정합니다.


  • "Problems" 창에 JSHint를 통과하지 못하는 에러를 보여줍니다.


  • 옵션을 설정하면 더 많은 경고를 보여줍니다. "JSHint -> Configuration" 메뉴에서 상단 "Enable project specific configuration"에 체크한 후 원하는 옵션을 입력합니다.



그 외 환경에 설치하기



JSHint 옵션


강화 옵션

아래의 옵션을 true로 설정하면, 각 옵션에 해당하는 경고를 추가로 알려줍니다.

  • bitwise

    이 옵션은 비트 연산자(^, | 등)의 사용을 제한합니다. 자바스크립트에서 비트 연산자를 사용하는 경우는 매우 드물고, 정확하게 알고 써야만 합니다. (참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators)

    if (a&b) { // 경고
     
}

  • camelcase

    이 옵션은 변수의 이름을 camelCase 스타일 또는 UPPER_CASE 스타일로 쓰도록 제한합니다.

    var family_name = "yang"; // 경고

  • curly

    이 옵션은 조건문이나 반복문에 항상 중괄호({})를 사용하도록 제한합니다. 자바스크립트는 중괄호 블럭이 한 줄의 코드로 구성되어 있을 때 생략을 허용합니다. 하지만 몇몇 상황에서 이것은 버그를 발생시킬 수 있습니다.

    while (day) // 경고
  shuffle();

  • eqeqeq

    이 옵션은 동등 연산자(==, !=) 대신에 일치 연산자(===, !==)를 사용하도록 제한합니다. (동등 연산자와 일치 연산자 자세히 보기 : http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/)

    if (data.result == 'ERROR'){ // 경고

    이 옵션을 false로 설정해도 0, null, undefined와의 비교는 일치 연산자를 사용해야 경고가 뜨지 않습니다.


  • es3

    이 옵션은 자바스크립트 코드가 ECMAScript3 스펙을 지켜야 한다고 JSHint에게 알려줍니다. 만약 구형 브라우저(IE6/7/8/9 및 기타 레거시 환경)에서 실행되는 프로그램을 작성한다면 이 옵션을 사용합니다.

    events : {
    "click .headerBanner img" : "clickHeaderBnr",
    "click .eventBanner img" : "clickRightBnr", // 경고
}

  • forin

    이 옵션은 모든 for in 루프에 객체 아이템 필터를 필요로 합니다. for in 루프는 객체 프로토타입 체인에 포함된 모든 프로퍼티를 순회합니다. 이 동작은 예기치 않은 아이템을 읽을 수 있기 때문에, 좀 더 안전하게 객체 내 프로퍼티들을 필터링(검증)해야 합니다. (for in 루프 자세히 보기 : http://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/)

    for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        // We are sure that obj[key] belongs to the object and was not inherited.
    }
}
// obj.hasOwnProperty(key) 프로퍼티 필터링이 없을 경우 경고

  • freeze

    이 옵션은 Array, Date와 같은 네이티브 객체를 덮어쓰는 것을 제한합니다.

    Array.prototype.count = function (value) { return 4; };
// -> Warning: Extending prototype of native object: 'Array'.

  • immed

    이 옵션은 즉시 실행 함수를 감싸는 괄호 없이 사용하는 것을 제한합니다.

    var a = function() {}(); // 경고

  • indent

    이 옵션은 들여쓰기가 잘못되었을 경우 경고를 띄웁니다.

    this.noticeCounterText = "";
    this.noticeCounterNum = 0; // 경고

  • latedef

    이 옵션은 아직 선언하지 않은 변수의 사용을 제한합니다. 자바스크립트의 변수는 호이스팅에 의해서 함수의 상단으로 이동하는데, 이 동작은 종종 버그를 발생시킬 우려가 있습니다. (스코프, 호이스팅 자세히 보기 : http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)

    function foo() {
    bar(x);
    var x = 1; // 경고
}

  • newcap

    이 옵션은 설정하면 생성자 함수 이름의 첫 글자를 대문자로 사용해야 합니다. 생성자 함수 이름의 첫 글자를 대문자로 사용하면 프로그래머가 시각적으로 구별하는데 도움이 되어 함수 내에서 this를 사용하는데 실수를 줄일 수 있습니다.

    new song(); // 경고

  • noarg

    이 옵션은 argument.caller와 argument.callee의 사용을 제한합니다. .caller와 .callee는 앞으로의 자바스크립트 버전에서 사용되지 않을 예정입니다.


  • noempty

    이 옵션은 코드 블럭이 비어있을 때 경고를 띄웁니다.

    if (true) {
  
} // 경고

  • nonbsp

    이 옵션은 "non-breaking whitespace"(http://en.wikipedia.org/wiki/Non-breaking_space) 문자에 대해서 경고를 보여줍니다. 이 문자는 맥에서 option-space 키로 입력할 수 있고, UTF-8이 아닌 웹 페이지에서 깨질 가능성이 있습니다.


  • nonew

    이 옵션은 생성자 함수를 변수에 할당하지 않고 사용하는 것을 제한합니다.

    new MyConstructor(); // 경고

  • plusplus

    이 옵션은 ++, --와 같은 단항 연산자의 사용을 제한합니다.


  • quotmark

    이 옵션은 일관성없는 따옴표의 사용을 금지합니다.

    var str = "a" + 'b'; // 경고

    이 옵션은 true 이외의 값도 지원하는데, "single"로 설정하면 작은따옴표를, "double"로 설정하면 큰따옴표를 사용해야 합니다.


  • undef

    이 옵션은 명시적으로 선언되지 않은 변수의 사용을 제한합니다.

    function test() {
    var myVar = 'Hello, World';
    console.log(myvar); // Oops, typoed here. JSHint with undef will complain
}
// "console" is not defined
// "myvar" is not defined

    만약 변수가 같은 파일에 정의되지 않은 경우 JSHint 옵션에 "globals" 설정이 필요합니다.

    {
    "undef" : true,
    "globals" : {
        "console": true
    }
}

    만약 환경 옵션에서 지원한다면 "globals" 설정 없이 사용할 수 있습니다.

    {
    "undef" : true,
    "browser" : true,
    "devel" : true,
    "jquery" : true
 
}

  • unused

    이 옵션은 선언하고 사용하지 않는 변수를 알려줍니다.

    function test(a, b) {
    var c, d = 2;
    return a + d;
}
// 'test' is defined but never used.
// 'b' is defined but never used.
// 'c' is defined but never used.

  • strict

    이 옵션은 모든 함수를 ECMAScript 5의 strict 모드에서 동작하도록 합니다.

    function test() {
    var str = "test";
    return str;
}
// Missing "use strict" statement

  • maxparams

    이 옵션은 함수 파라미터의 최대 개수를 설정합니다.

    {
    "maxparams" : 3
}
 
function logout(request, isManual, whereAmI, onSuccess) { // 경고
    // ...
}

  • maxdepth

    이 옵션은 코드 블럭의 depth를 제한합니다.

    {
    "maxdepth" : 2
}
 
function main(meaning) {
    var day = true;
    if (meaning === 42) {
        while (day) {
            shuffle();
            if (tired) { // JSHint: Blocks are nested too deeply (3).
                sleep();
            }
        }
    }
}

  • maxstatements

    이 옵션은 함수 내에서 최대 스테이트먼트의 개수를 제한합니다.

    {
    "maxstatements" : 2
}
 
function inner() {
    var i2 = 1;
    var j2 = 1;
    return i2 + j2;
}
// This function has too many statements (3)

  • maxcomplexity

    이 옵션은 코드에서 cyclomatic complexity???("http://en.wikipedia.org/wiki/Cyclomatic_complexity")를 제어합니다.


  • maxlen

    이 옵션은 한 줄의 최대 글자수를 설정합니다.

    {
    "maxlen" : 5
}
 
var id = "id"; // 경고

강화옵션 이외에도 완화 옵션(http://www.jshint.com/docs/options/#relaxing-options)과 환경 옵션(http://www.jshint.com/docs/options/#environments)을 설정할 수 있습니다.



댓글