ES Lint가 뭐예요

i do as i say·2020년 4월 28일

2020.4.28 TIL

ES Lint가 뭐예요......?

우리가 작성한 코드의 스타일을 정의하고, 그 스타일대로 작성이 됐는가? 를 일련의 과정을 통해 확인할 수 있게 하고, 지적해 주어서 고칠 수 있게 하는 node.js npm 모듈

왜 코드 스타일을 정의해야 하는 거조..?..

혼자서 하는 개발도 물론 있겠지만, 개발은 보통 여러 사람이, 그것도 많은 수의 사람이 함께 만들어 가게 되는 협동심 넘치는(?) 일입니다. 그렇기 때문에 나만의 스타일이나, 특이한 방식의 코드 스타일을 30명의 사람이 각자 한 명씩만 사용하게 된다고 가정했을 때, 총 30가지의 스타일을 공부하고.. 연구해야 합니다.. 그렇게 되면 유지보수가 어려워지고, 이해하기 힘든 코드가 될 수 있습니다. 그렇기에 함께 하는 프로젝트의 코드는 어떠한 룰을 가지고 있어야 하며, 그 룰을 따라야 하고, 그 룰은 파악하기 쉬워야 합니다. 그렇기 때문에 ES Lint같은 모듈을 사용하여 코드 스타일을 정의하고 그것에 따릅니다. 이것을 linting이라고 합니다.

ES Lint 설치 방법 (npm 기준)

npm install eslint --save-dev

npx eslint --init
npx를 통한 eslint --init을 받게 되면, .eslintrc 파일이 생길 텐데, "extends": "eslint:recommended"(추천 설정)가 있는지 꼭 확인해야 합니다.

CLI 설정
to check syntax and find problems / CommonJS / None of these / No / Node / JS
제가 설정한 방법이지만 만약에 리액트나 여타 다른 것들을 쓰실 분들은 기호에 맞게 쓰시길 추천드립니다.

이러면.. 끝.. 아주 쉽죠?

VSCODE 자체에서도 다운로드가 가능하던데요?

그렇습니다. 가능합니다. VScode에서 받는 것은 실시간으로 빨간 줄이 그어지며.. 단어 상단에 왜 그어졌는지 설명이 되어 있습니다. npm으로 받는 것은 npm run scripts을 사용하여 터미널에 찍히는 에러를 보고 수정하는 방식입니다.

ES Lint 사용 방법

package.json에서 npm eslint scripts를 추가합니다
"lint": "eslint */.js --quiet" (lint의 이름은 막.. 바꾸셔도 괜찮아요)
터미널에 npm run lint를 치면 수많은 에러들과 함께 Lint가 실행이 됩니다

eslintrc.js 파일은 린트에 대한 세부 조정을 하는 곳입니다. 내가 어떤 문법에 대한 것을 지키지 않을지, 또는 지킬지, 또는 이미 룰이 잡혀 있는 스타일을 따를 건지 입맛에 맞게 만들 수 있는데, ES Lint 공식 페이지를 보면,

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

원한다면 이렇게 설정을 할 수 있다의 예시가 나옵니다.
저 뜻은, 세미콜론을 쓰지 않으면 항상 error를 울리고, 스트링을 사용할 때 따옴표를 2개를 쓰지 않는다면 error를 울려라라는 뜻입니다.
저것을 사용해도 되고, 사용하지 않아도 됩니다. 왜냐하면 이미 깔았을 때부터 ES Lint가 추천하는 룰이 적용이 되었기 때문입니다. 만약, 내가 arrow function을 사용하고 싶은데 ES Lint에서 에러라고 뜨게 된다면, "arrow-body-style": 0 같은 것들을 추가적으로 넣을 수가 있습니다.