JavaScript
Linters - 코드 품질 보장

비고

JSHint

JSHint 는 JavaScript 코드의 오류 및 잠재적 인 문제를 감지하는 오픈 소스 도구입니다.

JavaScript를 보완하기 위해 두 가지 옵션이 있습니다.

1. JSHint.com으로 이동하여 텍스트 편집기에 코드를 붙여 넣으십시오.
2. IDE에 JSHint를 설치 하십시오 .
   • Atom : linter-jshint ( Linter 플러그인을 설치해야 함)
   • 숭고한 본문 : JSHint 거터 및 / 또는 서브 라임 린터
   • Vim : jshint.vim 또는 jshint2.vim
   • Visual Studio : VSCode JSHint

IDE에 추가 ​​할 경우 JSON 구성 파일 ( .jshintrc 을 작성하면 프로그램을 linting 할 때 사용할 수 있습니다. 프로젝트간에 구성을 공유하려는 경우 수녀원입니다.

예제 .jshintrc 파일

{
    "-W097": false, // Allow "use strict" at document level
    "browser": true, // defines globals exposed by modern browsers http://jshint.com/docs/options/#browser
    "curly": true, // requires you to always put curly braces around blocks in loops and conditionals http://jshint.com/docs/options/#curly
    "devel": true, // defines globals that are usually used for logging poor-man's debugging: console, alert, etc. http://jshint.com/docs/options/#devel
    // List global variables (false means read only)
    "globals": {
        "globalVar": true
    },
    "jquery": true, // This option defines globals exposed by the jQuery JavaScript library.
    "newcap": false,
    // List any global functions or const vars
    "predef": [
        "GlobalFunction",
        "GlobalFunction2"
    ],
    "undef": true, // warn about undefined vars
    "unused": true // warn about unused vars
}

JSHint는 또한 특정 라인 / 코드 블록에 대한 구성을 허용합니다.

switch(operation)
{
   case '+'
   {
      result = a + b;
      break;
   }

   // JSHint W086 Expected a 'break' statement
   // JSHint flag to allow cases to not need a break
   /* falls through */
   case '*':
   case 'x':
   {
      result = a * b;
      break;
   }
}

// JSHint disable error for variable not defined, because it is defined in another file
/* jshint -W117 */
globalVariable = 'in-another-file.js';
/* jshint +W117 */

기타 구성 옵션은 http://jshint.com/docs/options/에 설명되어 있습니다.

ESLint / JSCS

ESLint 는 JSHint 와 비슷한 스타일 가이드를위한 코드 스타일 링터 및 포맷터입니다. ESLint는 2016 년 4 월에 JSCS 와 통합되었습니다. ESLint는 JSHint보다 설정하는 데 더 많은 노력을 기울이지 만 웹 사이트 에 시작하기위한 명확한 지침이 있습니다.

ESLint의 샘플 구성은 다음과 같습니다.

{
    "rules": {
        "semi": ["error", "always"], // throw an error when semicolons are detected 
        "quotes": ["error", "double"] // throw an error when double quotes are detected
    }
}

모든 규칙이 off로 설정된 샘플 구성 파일과 그 파일에 대한 설명이 여기에 있습니다 .

JSLint

JSLint 는 JSHint가 분기 된 트렁크입니다. JSLint는 더글러스 크록 포드 (Crookford) 가 "좋은 부품"으로 간주하는 부분만을 사용하고 더 나은 솔루션을 제공한다고 믿는 코드는 제외하고 JavaScript 코드를 작성하는 방법에 대한 의견이 많습니다. 다음 StackOverflow 스레드는 어떤 Linter가 자신에게 적합한 지 결정 하는 데 도움이 될 수 있습니다 . 차이점은 있지만 (여기에는 JSHint / ESLint 와 몇 가지 간단한 비교가 있습니다) 각 옵션은 매우 맞춤 설정할 수 있습니다.

JSLint 구성에 대한 자세한 정보는 NPM 또는 github을 확인하십시오.