LHJ

I'm a FE developer.

2.4 린트

14 Apr 2020 » js_lj

인터뷰에 나가거나 파티에 참석할 때는 옷을 롤러로 문질러 보푸라기(lint)를 제거하지 않습니까?
물론 그럴 테죠. 가능한 한 멋지게 보여야할 테니까요.
마찬가지로 코드를(그 코드를 만든 당신도) 린트해서 멋져 보이게 할 수 있습니다.
린트 프로그램은 당신의 코드를 세심히 검토해서 자주 일어나는 실수를 알려줍니다.
필자는 25년째 소프트웨어를 만들고 있지만,
아직도 실수를 저지르고 린트 프로그램이 찾아 준 다음에나 발견하곤 합니다.
초보자에게 린트 프로그램은 정말 비할 데 없이 중요한 도구입니다.

자바스크립트 린트 프로그램은 여러가지가 있지만, 필자는 그 중에서 니콜라스 자카스의 ESLint를 추천하는 편입니다.
ESLint를 설치합시다.

$ npm intall -g eslint

ESLint를 사용하기 전에 프로젝트에 쓸 설정 파일 .eslintrc 파일을 만들어 ESLint의 린트 규칙을 적용할 수 있습니다.

eslint --init

명령을 내리고 몇 가지 질문에 답하면 기본 .eslintrc 파일이 만들어집니다.

프로젝트 루트에서

eslint --init

명령을 실행하십시오.
첫 번째로 받을 질문은 계속 질문에 대답하면서 스타일을 정할 것인지,
널리 쓰이는 스타일 가이드를 따를 것인지,
기존 자바스크립트 파일을 분석해서 스타일을 정할 것인지 입니다.
질문에 대답하면서 스타일을 정하겠다고 답하면 다음과 같은 질문을 받습니다. (나중에 질문이 바뀔 수 있습니다.)

이미지

아무래도 질문이 바뀐 것 같습니다. 위의 질문은

  • 오로지 문법검사만
  • 문법과 문제점
  • 문법 그리고 문제점 그리고 코드스타일

두번째에 체크하고 넘어갑니다.
깃배쉬에서는 숫자키로 입력을 합니다. 두번째를 선택하고 싶다면 숫자 2를 입력하고 enter키를 누르면 됩니다.

이미지

이번엔 당신의 프로젝트에서 사용할 모듈유형을 묻는 질문입니다.
JavaScript 모듈을 사용하기 때문에 숫자 ‘1’을 입력한 후 Enter키를 입력합니다.

이미지

당신의 프로젝트에서 사용하는 프레임워크에 대해 묻는 질문입니다.
현재는 리액트 그리고 뷰를 사용하지 않기 때문에 ‘3’을 입력하고 Enter 키를 입력합니다.

이미지

이번엔 타입스크립트를 사용하느지에 대한 질문입니다.
사용 안하므로 n을 입력하고 Enter 키를 입력합니다.

이미지

어디에서 당신의 코드가 실행될지를 묻는 질문입니다.
브라우저에서 실행될 지, 노드에서 실행될지를 묻는 질문입니다.
둘 다에서 실행되는 거면 둘 다 체크하면 됩니다.

이미지

당신의 환경설정 파일이 어떤 형태의 파일이면 좋겠는 지를 묻는 질문입니다.
자바스크립트를 선택, 즉 ‘1’을 입력 후 Enter 키를 입력합니다.

이미지

이렇게하면 eslint 설정 파일을 생성할 수 있습니다.

책에 쓰여있는 과거 질문은 아래와 같았습니다. 한 4년전쯤 eslint 질문이었던 것 같습니다.

  • ECMAScript 6 기능을 사용합니까? - YES
  • ES6 모듈을 사용합니까? - YES
  • 어디에서 코드를 실행합니까(노드 또는 브라우저)? - 브라우저와 노드에 각각 다른 설정을 적용하는 것이 이상적이겠지만, 그건 너무 고급 설정입니다. 노드를 선택하십시오.
  • CommonJS를 사용합니까? - No (CommonJS는 ES6 스타일 모듈의 일종이며 이 책에서 사용하지는 않습니다.)
  • JSX를 사용합니까? - NO (JSX는 XML 기반 자바스크립트 확장이며 페이스북의 UI 라이브러리 리액트에서 사용합니다. 이 책에서 JSX를 사용하지는 않습니다.)
  • 들여쓰기를 어떤 식으로 하겠습니까? - 최근의 스택오버플로 설문을 보면 프로그래머 상당수가 탭을 사용한다고 응답했지만, 경험 많은 프로그래머는 스페이스를 선호합니다. 여기에 대한 답은 스스로 정하십시오.
  • 문자열에 어떤 따옴표를 사용합니까? - 무엇이든 상관 없습니다.
  • 줄 끝 문자에 무엇을 사용합니까(유닉스 또는 윈도우)? - 리눅스나 macOS를 사용한다면 유닉스를 선택하십시오. 윈도우를 사용한다면 윈도우를 선택하십시오.
  • 세미콜론을 필수로 하길 원합니까? - YES
  • 설정 파일 형식은 무엇으로 하겠습니까(JavaScript, YAML, JSON) - JavaScript. YAML은 JSON과 비슷한 데이터 직렬화형식이며 널리 쓰입니다. 자바스크립트를 선택하면 프로퍼티 키에 따옴표를 쓰지 않아도 에러로 간주하지 않으므로 타이핑을 줄일 수 있습니다.

모든 질문에 답하면, .eslintrc 파일이 생성됩니다. 이제 ESLint를 사용할 수 있습니다.

ESLint를 사용하는 방법은 여러 가지입니다.

eslint es6/test.js

위의 명령어 처럼 직접 실행해도 되고, 에디터에 통합할 수도 있고 Gulpfile에 추가해도 됩니다.
에디터에 통합하면 아주 편리하지만, 방법이 에디터와 운영체제마다 전부 다르므로 이 책에서 설명할 수는 없습니다.
에디터에 통합하길 원한다면 에디터 이름 뒤에 eslint를 붙여 검색해 보십시오.

에디터에 통합하든 하지 않든, Gulpfile에는 ESLint를 꼭 추가하길 권합니다.
결국 빌드할 때마다 걸프를 실행하므로 여기서 코드를 체크하는 것이 좋습니다.
먼저 다음 명령을 실행합니다.

npm install --save-dev gulp-eslint
npm i -D gulp-eslint

그리고 gulpfile.js를 다음과 같이 수정합니다.

const {src, dest, parallel, series} = require('gulp');
const babel = require('gulp-babel');
const eslint = require('gulp-eslint');

function js_eslint() {
    return src(["es6/**.*.js", "public/es6/**/*.js"])
        .pipe(eslint())
        .pipe(eslint.format());
}

function node_babel () {
    return src("es6/**/*.js")
        .pipe(babel())
        .pipe(dest("dist"));
}

function browser_babel () {
    return src("public/es6/**/*.js")
        .pipe(babel())
        .pipe(dest("public/dist"))
}

exports.default = series(js_eslint, parallel(node_babel, browser_babel));

이제 ESLint에서 우리 코드 중 어떤 부분을 지적하는지 봅시다.
Gulpfile의 기본 작업에 ESLint를 추가했으므로 걸프를 실행하기만 하면 됩니다.

이미지

이런식으로 오류 또는 문제점이 있으면 실시간으로 알려줍니다.
ESLint는 다행히 무엇을 실수로 지적할지 정할 수 있습니다.

이미지

책과 달리 위와 같이 생성해서 gulp 명령어를 실행하면, 아무런 오류도 잡아내지 않습니다.
그동안 버전업이 많이되면서 이 부분도 차이가 나는듯 합니다.
다음은 책 내용입니다.

$ gulp
[15:04:16] Using gulpfile ~/git/gulpfile.js
[15:04:16] Starting 'default'...
[15:04:16] Finished 'default' after 84 ms
[15:04:16]
/home/ethan/lj/es6/test.js

4:59 error Unexpected trailing comma comma-dangle
9:5 error Unexpected console statement no-console

X 2 problems (2 errors, 0 warnings)

니콜라스 자카스와 필자는 줄 끝에 쉼표를 쓰는 것에 대해 의견이 다른 것 같습니다.
다행히 ESLint는 무엇을 실수로 지적할지 정할 수 있습니다.
comma-dangle 규칙의 기본값은 never이고, 우리는 이 규칙을 아예 끄거나 (필자가 주로 쓰는 설정인) always-multiline으로 정할 수 있습니다.
.eslintrc 파일을 수정해서 이 설정을 바꿔 봅시다.
줄 끝 쉽표를 실수로 간주하는 니콜라스의 의견에 동의한다면 그냥 never로 두면 됩니다.
.eslintrc의 각 규칙은 배열입니다.
배열의 첫 번째 요소는 숫자입니다.
0은 규칙을 적용하지 않는 것이고, 1은 실수라고 지적하며, 2는 에러로 간주합니다.

{
	"rules": {
		/*
			마지막 쉼표에 관한 규칙을 수정했습니다.  
			하지만 이 파일은 JSON 파일이므로, 마지막 쉼표를 허용하는
			이 파일에는 마지막 쉼표를 쓸 수 없습니다.
		*/
		"comma-dangle": [
			2,
			"always-multiline"
		],
		"indent": [
			2,
			4
		],
		/* ... */
	}
}

걸프를 다시 실행하면 줄 끝 쉼표를 에러로 지적하지 않습니다.
사실, test.js에서 줄 끝 쉼표를 제거하면 에러가 일어납니다.

두 번째 에러는 console.log에 관한 것입니다.
console.log를 실무 브라우저 코드에 남겨두는 것은 일반적으로 엉성한 습관이라 여기며, 구식 브라우저 대상일 경우 위험하기까지 합니다.
하지만 연습과 공부 목적이라면 console.log에 대한 경고를 꺼도 됩니다.
이 책을 진행하는 동안 console.log를 많이 사용합니다.
그리고 quotes 규칙도 끄는 편이 낫습니다.
이들 규칙을 비활성화하는 것은 독자의 연습분제로 남기겠습니다.

ESLint에는 설정 옵션이 아주 많으며, 이들은 모두 http://eslint.org/에 문서화되어 있습니다.

이제 ES6 코드를 작성하고, ES5 코드로 트랜스컴파일하고, 린트로 개선할 수 있으니 ES6를 본격적으로 배울 준비가 끝났습니다~!

이 책을 번역하는 시점에서 마지막 쉼표를 지적하는 규칙이 사라졌지만, 저자의 의도를 존중하기 위해 원문을 그대로 옮겼습니다. 참고하시기 바랍니다.

Related Posts