toggle menu

[JavaScript] JSCS 로 Code Style Linting 시작하기

2015. 8. 5. 09:52 JavaScript

설마 했는데 정말 JSCS팀이 ESLint로 합류했습니다. 아직은 JSCS처럼 지정된 스타일로 코드를 변경해주는 것까지 ESLint 에서 지원해주고 있지는 않지만, 실험적으로 한 Rule씩 추가되고 있는 것으로 보입니다. 이 소식을 참고해서 아래 포스팅을 읽어주세요.




들어가며


최근 개발 파트 내에서 컨벤션에 대한 논의가 이루어지고 있어서 나중에 봐야지하고 미뤄두었던 JSCS를 본격적으로 살펴보게 되었다. 오랫동안 뜯어본 건 아니지만, 잠깐 만져본 것 만으로도 꽤나 JSCS가 제공하고 있는 기능이나 설정을 변경하는 방식 등의 구성이 마음에 들었다. 코드 스타일 관리에 대해 고민하고 있을 다른 누군가를 위해 JSCS를 시작하는데 필요한 내용을 정리해보았다.


JSCS 웹사이트에서는 JSCS에 대해 아래와 같이 설명하고 있다.


JSCS is a code style linter for programmatically enforcing your style guide.

You can configure JSCS for your project in detail using over 90 validation rules,

including presets from popular style guides like jQuery, Airbnb, Google, and more.




JSLint, JSHint, ESLint, JSCS..


아마도 컨벤션에 대해서 고민하고 있는 사람이라면 먼저 떠올린 툴은 JSLint 나 JSHint가 아닐까 싶다. 흥미롭게도 JSHint를 만든 이도 JSCS를 좋아하고 있고, 심지어 그들의 툴에 스타일 체크 기능을 발전시키기보다 JSCS에 컨트리뷰트하는 것을 더 선호하고 있다.


JSHint는 결국 3.0버전에 이르러서 코딩 스타일 체크 관련 기능들을 모두 제거하고 더 복잡한 것들에 집중하는 것으로 방향을 선회했다.

https://github.com/jscs-dev/node-jscs/issues/102


JSLint, JSHint, ESLint는 JSCS와 같은 단계에서 동작하지만, JSCS와는 추구하는 부분이 다소 다르다.


JSLint 와 JSHint 는 Best coding practice들을 제공하는데 주력하고 있지만 코딩 스타일을 체크하고 수정하는 방법은 제공하고 있지 않다.


ESLint 는 pluggable linting rules 의 필요에 의해 등장했고, JSHint가 제공하는 문제가 생길만한 패턴을 찾는 기능과 JSCS가 제공하는 코드 스타일 체크 기능을 모두 제공하고 있다.


JSCS는 쿼리 모델을 사용하며, Google, Airbnb, jQuery, grunt와 같은 다양한 회사/프로젝트/팀의 코드 스타일 프리셋 룰을 가져다가 약간의 커스터마이징을 통해 원하는 룰셋으로 트윅하거나 아예 새로 만들어줄 수도 있는 것이 특징이다.


ESLint는 JSHint보다는 2~3배 정도 느리지만, JSCS보다는 빠르며 JSHint + JSCS 를 사용한 경우보다는 ESLint만 사용하는 것이 더 빠르다. (쓰다보니 뭔가 ESLint가 더 좋아보이는 이상한 기분이.. 다음에는 ESLint도 한번 사용해봐야겠다..)





JSCS 설치 및 실행하기


JSCS 설치는 아래와 같이 npm을 통해 설치해줄 수 있다.


$ npm install jscs -g


설치 후에는 gulp 처럼 command line 에서 바로 jscs 명령으로 실행할 수 있다.


$ jscs path[ path[...]]


pipe input 도 아래와 같이 가능하다.


$ cat myfile.js | jscs



또 아래와 같이 직접 코드로 짜서 실행하는 것도 가능하다.


var JSCS = require("jscs");
var styleChecker = new JSCS();

//기본 룰 등록하기
styleChecker.registerDefaultRules();

// JSCS 설정하기
styleChecker.configure({
	//jQuery 프리셋 사용
	preset: "jquery",
	//jQuery 프리셋 중 disallowMultipleLineBreaks 옵션은 제거
	disallowMultipleLineBreaks: null,
	//기본 indent는 탭으로 설정
	validateIndentation: "\t"
});

//소스를 스트링에 담아 체크
var results = styleChecker.checkString(stringOfCode);

//오류 리스트만 가져와서 콘솔에 출력
results.getErrorList().forEach(function (error) {
	var colorizeOutput = true;
	console.log(results.explainError(error, colorizeOutput) + "\n");
});



command line 에서의 실행과 코드 상에서의 실행 모두 지원한다는 사실 정도만 기억하고 JSCS를 설정하는 방법을 살펴보자.






JSCS 프리셋 설정하기


JSCS를 설치했다면 .jscsrc 파일에 설정을 담아서 프로젝트의 루트에 위치시켜야 하는데, 다양한 프리셋들을 제공하고 있기 때문에 유명한 프리셋 중 하나를 선택한다면 설정 파일을 만지느라 고생하는 과정을 거치지 않아도 된다.


아래와 같은 내용을 담아서 .jscsrc 라는 파일명으로 프로젝트 루트에 파일을 생성해보자.


{
	"preset": "google"
}


위의 설정은 구글에서 사용하는 코드 스타일 체크 룰을 동일하게 사용하겠다는 것이다. 간단하게 한 줄로 구글의 코드 스타일을 그대로 가져올 수 있다. JSCS에서 지원하는 코드 스타일 룰 프리셋은 아래와 같다.


airbnb — https://github.com/airbnb/javascript

crockford — http://javascript.crockford.com/code.html

google — https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

grunt — http://gruntjs.com/contributing#syntax

jquery — https://contribute.jquery.org/style-guide/js/

mdcs — https://github.com/mrdoob/three.js/wiki/mr.doob's-code-style™

node-style-guide - https://github.com/felixge/node-style-guide

wikimedia — https://www.mediawiki.org/wiki/manual:coding_conventions/javascript

wordpress — https://make.wordpress.org/core/handbook/coding-standards/javascript/

yandex — https://github.com/yandex/codestyle/blob/master/javascript.md



이제 아래와 같이 커맨드 라인에서 실행하면 구글의 코드 스타일을 기준으로 index.js 파일에서 잘못된 부분들을 확인할 수 있다. 기본 설정으로는 최대 50개까지만 오류를 보여주기 때문에 50개가 나왔다면 이보다 더 많은 오류가 있을 수 있다는 걸 기억해야 한다.


$ jscs index.js





JSCS 프리셋 커스터마이징하기


특별하게 자신만의 룰을 만들때에도 처음부터 끝까지 모든 룰을 다 설정해줄 수도 있지만, 프리셋에서 몇 가지 원하는 부분만 redefine 하면 좀더 간편하게 자신만의 코드 스타일 룰을 완성할 수 있다.


먼저 indent를 2 space 가 아니라 tab 으로 하고 싶다면 아래와 같이 .jscsrc 파일에 한 줄을 추가해주면 된다.


{
	"preset": "google",
	"validateIndentation": "\t"
}



기본적으로 구글의 프리셋은 익명 함수를 선언할 때 function 키워드와 괄호 사이에 공백을 허용하지 않는다. 만약 익명 함수를 선언할 때 function 키워드와 괄호 사이에 공백을 주고 싶다면, 아래와 같이 공백을 허용하지 않는 룰을 null 로 제거하고, 공백을 반드시 주어야 한다는 룰을 추가해주면 된다.


{
	"preset": "google",
	"validateIndentation": "\t",
	"disallowSpacesInAnonymousFunctionExpression": null,
	"requireSpacesInAnonymousFunctionExpression": {
		"beforeOpeningRoundBrace": true,
		"beforeOpeningCurlyBrace": true
	}
}


위와 같이 기본 프리셋에서 일부 룰을 변경해서 자신에게 가장 적합한 룰셋을 설정해줄 수 있다. disallow와 require로 시작되는 룰은 서로 짝을 이루고 있기 때문에 하나를 설정하면 하나는 제거해주어야 한다는 사실만 기억하면 설정하는데 큰 어려움은 없을 것이다.


JSCS에서 지원하고 있는 룰은 약 90여개로, JSCS 웹사이트에 각 룰에 대해 상세히 설명되어 있기 때문에 쉽게 찾아서 적용이 가능하다.





체크하지 않을 파일 설정하기


JSCS로 코딩 스타일을 체크하지 않을 파일을 설정하는 것은 아래와 같이 .jscsrc 파일에 excludeFiles 항목을 수정해서 설정할 수 있다.


{
	...

	"excludeFiles": [
	  "node_modules/**",
	  "src/modules/a/**",
	  "src/modules/b/**",
	  "src/*.js"
	]
}





Atom 에서 JSCS를 사용해서 코드 스타일 체크하기


중요한 사실 중 하나는 JSCS가 이미 꽤나 성숙한 상태여서 다양한 IDE들을 위한 플러그인이 이미 존재한다는 사실이다.



Atom plugin: https://atom.io/packages/linter-jscs

Brackets Extension: https://github.com/globexdesigns/brackets-jscs

Grunt task: https://github.com/jscs-dev/grunt-jscs/

Gulp task: https://github.com/jscs-dev/gulp-jscs/

Overcommit Git pre-commit hook manager: https://github.com/brigade/overcommit/

SublimeText 3 Plugin: https://github.com/SublimeLinter/SublimeLinter-jscs/

Syntastic VIM Plugin: https://github.com/scrooloose/syntastic/.../syntax_checkers/javascript/jscs.vim/

Web Essentials for Visual Studio 2013: https://github.com/madskristensen/WebEssentials2013/

IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, PyCharm plugin: https://github.com/idok/jscs-plugin



나는 현재 Atom을 주력으로 사용하고 있기 때문에 Atom 에서 JSCS를 설정하는 방법을 살펴보려고 한다. (Sublime Text 용으로 더 좋은 플러그인들이 많이 있다)


먼저 아래와 같이 Atom Package Manager를 사용해서 linter와 linter-jscs 플러그인을 설치해준다.


$ apm install linter
$ apm install linter-jscs



설치가 끝났다면, Atom의 Preferences > Packages 에서 linter-jscs 의 설정에서 Only Config 옵션만 활성화해준다. 이 옵션을 활성화하면, .jscsrc 에 설정된대로 체크하고 .jscsrc 파일이 없으면 체크하지 않게 된다.


스타일이 잘못된 부분은 밑줄이 쳐져서 바로 알 수 있고 어떤 오류인지도 하단에 바로 표시되므로 코딩 중에도 잘못된 부분은 바로 수정해서 코드 스타일을 맞추는데 큰 도움이 된다.









Gulp 를 사용해서 체크하기


Gulp를 활용해서 빌드 과정 중에 JSCS를 태우거나 다른 다양한 목적으로 JSCS를 실행해줄 수 있다. JSCS를 실행하기 위한 대표적인 Gulp 플러그인 gulp-jscs 이다.


$ npm install --save-dev gulp-jscs



아무런 옵션 설정없이 가장 단순하게 Gulp task 에 JSCS를 수행하는 방법은 아래와 같다.


var gulp = require('gulp');
var jscs = require('gulp-jscs');

gulp.task('default', function () {
	return gulp.src('src/*.js')
		.pipe(jscs());
});



jscs를 호출할 때 파라메터로 전달할 수 있는 옵션이 세 가지가 있는데, JSCS 설정 파일의 경로를 지정해주는 configPath, ECMA 2015 지원 여부를 토글하는 esnext, 발견된 오류를 자동 수정할지 여부를 토글하는 fix 까지 세 가지이며, 아래와 같이 설정해줄 수 있다.


var gulp = require('gulp');
var jscs = require('gulp-jscs');

gulp.task('default', function () {
	return gulp.src('src/app.js')
		.pipe(jscs({
			configPath: '.jscsrc',
			esnext: true,
			fix: true
		}))
		.pipe(gulp.dest('src'));
});





마치며


현재 상당히 많은 그룹들이 JSCS를 활용해서 코드 스타일을 관리하고 있는데, 대표적으로는 jQuery, Adobe, Bootstrap, AngularJS, Yandex, Wikimedia, Grunt, Ember.js, Ionic 등이 있다. 이 외에도 상당히 많은 그룹들이 JSCS를 활용해서 코드 스타일을 관리하고 있다.


지금 하고 있는 프로젝트에서는 Atom 플러그인으로 설치해서 코드 스타일을 체크하고 있는데, 쉽고 편리하게 코드 스타일을 일관성있게 유지할 수 있게 되어 만족하고 있다.


협업 시에는 각자는 로컬에서 IDE 플러그인이나 Gulp 등을 사용해서 스타일을 체크한 후 원격 저장소에 커밋을 하던지, Git Hooks를 활용해 commit 전에 체크하도록 할 수도 있을 것이다. 오픈소스인 경우 Travis CI를 활용하는 케이스도 본 것 같다.


코드 스타일 관리에 대해서 고민하고 있고 JSCS에 대해서 관심이 있었다면, 이 포스팅이 조금이라도 도움이 되었기를 기대한다.



JavaScript 관련 포스팅 더보기