웹 프로젝트에서 jslint로 자바스크립트 검증하기: maven 또는 ant

웹 프로젝트에서 자바스크립트의 비중이 점점 커지면서, JSLint 같은 검증 도구의 필요성이 날로 높아지고 있다 이걸 매번 소스코드를 클립보드로 복사(copy)해서 jslint.com의 웹 폼에 붙여넣고(paste) 돌리는 짓을 하다가 귀찮아서 몇가지 방법을 찾아 보았다.

먼저, maven:

pom.xml에 이런거 대충 추가하자. 그러면 mvn site 돌릴때 같이 실행되서 target/site/jslint/index.html에 보고서가 만들어진다. 중간에 sourceDirectory는 잘 고쳐 주시길... 안고쳐주면 src/main/javascript 가 기본값이다.

    <reporting>
...
        <plugins>
...
            <plugin>
                <groupId>org.codehaus.mojo.javascript</groupId>
                <artifactId>javascript-report-maven-plugin</artifactId>
                <configuration>
                    <sourceDirectory>src/main/webapp/js</sourceDirectory>
                    <encoding>UTF-8</encoding>
                    <assumeBrowser>yes</assumeBrowser>
                </configuration>
            </plugin>
...
        </plugins>
...
    </reporting>

site까지 돌리지 않고 수시로 확인하고 싶다면, pom.xml에 이런거 대충 추가자. 그러면 mvn javascript-report:jslint 명령을 사용하여 수시로 확인할 수 있다.

    <build>
...
        <plugins>
....
            <plugin>
                <groupId>org.codehaus.mojo.javascript</groupId>
                <artifactId>javascript-report-maven-plugin</artifactId>
                <configuration>
                    <sourceDirectory>src/main/webapp/js</sourceDirectory>
                    <encoding>UTF-8</encoding>
                    <assumeBrowser>yes</assumeBrowser>
                </configuration>
            </plugin>
...
        </plugins>
...
    </build>

compile 페이즈에서 실행하고, 에러나면 중단해버리고 싶은데... 보시다시피 플러그인 이름부터 report용 플러그인이다보니... 잘 안된다.

아... 이 녀석이 아직 정식 릴리즈가 안되서.. mojo 홈페이지의 문서를 참조해서 mono의 snapshot 플러그인 리파지터리를 활성화시켜야 한다.

다음으로, ant:

사실 maven으로 하기전에 먼저 ant로 했었다.

build.xml에 이런거 대충 추가해주자. 그러면, ant verify 명령을 사용하여 수시로 확인할 수 있다.

    <target name="verify">
        <scriptdef name="jslint" src="etc/fulljslint-ant.js" language="javascript">
            <attribute name="options" />
            <element name="fileset" type="fileset" />
        </scriptdef>
        <jslint>
            <fileset dir="src/main/webapp/js">
                <include name="**/*.js" />
            </fileset>
        </jslint>
    </target>

중간에 있는 자바스크립트 소스 디렉토리는 잘 고쳐 주시길... 물론 이렇게 하지 않고 <property name="js.srcDir" location="src/main/webapp/js" /> 이런식으로 쓰게 되겠지만...

더 중요한 것은 위쪽에 있는 fulljslint-ant.js인데, JSLint 홈페이지에 있던 크록포드옹의 코드에를 다운받아서 다음의 코드를 추가한 것이다:

importClass(java.io.File);
importClass(java.io.FileInputStream);
importClass(java.io.InputStreamReader);
importClass(Packages.org.apache.tools.ant.util.FileUtils);

function checkFile(file, options) {
    var reader = new InputStreamReader(new FileInputStream(file), "UTF-8");
    var input = new String(FileUtils.readFully(reader));
    input = input.toString();
    if (!input) {
        print("Couldn't open file '" + file.toString() + "'.");
        return;
    }
    if (!JSLINT(input, options)) {
        print("Problems found in " + file.toString());
        for (var i = 0; i < JSLINT.errors.length; i += 1) {
            var e = JSLINT.errors[i];
            if (e) {
                print('Lint at line ' + (e.line + 1) + ' character ' +
                        (e.character + 1) + ': ' + e.reason);
                print((e.evidence || '').
                        replace(/^\s*(\S*(\s+\S+)*)\s*$/, "$1"));
                print('');
            }
        }
    } else {
        print("No problems found in " + file.toString());
    }
}

var options = attributes.get("options") || "{ browser:true }";
project.log('Running jslint....');
project.log('\toptions=' + options);
options = eval('(' + options + ')');

//var options = {eqeqeq : false, white: true, plusplus : false, bitwise : true, passfail: false, browser: true, evil: true, forin: true, newprimitive: true};
if (elements.get("fileset").size() > 0) {
    var fileset = elements.get("fileset").get(0);
    var ds = fileset.getDirectoryScanner(project);
    var srcFiles = ds.getIncludedFiles();
    for (var i = 0; i < srcFiles.length; i++) {
        var jsfile = new File(fileset.getDir(project), srcFiles[i]);
        checkFile(jsfile, options);
    }
}

코드가 좀 지저분해도 이해해주시길... =3=3=333

혹시, 아직도 jslint로 검사하지 않은 자바스크립트 코드를 deploy하고 있다면 지금 바로 가까운 벽으로 달려가서... 두 손 번쩍 들고... 반성하자. 그리고 지금이라도 (일단 간단하게 copy & paste로) jslint를 돌려보자.

좌절할 필요는 없다. 이제부터 고치면 된다.

참고로... 말해두지만... jslint.com에 괜히 이런 메시지가 있는게 아니다...

WARNING: JSLint may hurt your feelings.

=3=3=333