프론트엔드 개발환경의 이해 : lint

Lint

코드는 사람이 작성하는 것이다 보니 어쩔 수 없이 헛점을 가지고 있다

이러한 자질구레한 헛점들 즉, 선언했지만 사용하지 않는 변수, 제멋대로인 들여쓰기 등등

그냥 지나쳐도 코드가 실행하는데는 크게 영향을 주지 않고 정상적으로 작동하지만 쌓이다 보면 점점 가독성이 떨어지고 이내 곧 유지보수를 힘들게하는 것들이다

코드의 이러한 부분들을 설정한 옵션에 맞게 검사해주고 교정해주는 것을 바로 lint혹은 linter라고 부른다

Lint가 필요한 상황

console.log()

자바스크립트에서는 이렇게 명령 뒤에 세미콜론을 붙이이 않아도 런타임시에 자동으로 붙여준다

실제 실행에 문제가 되지 않기 때문에 세미콜론을 붙이지 않는 스타일의 코딩을 하는 사람도 있는데

// in app.js
console.log()
(function (){})()

이런 코드에서는 얘기가 좀 다르다 자동으로 세미콜론을 붙여서 해석하지 못하고

console.log()(function () {})()

이런 한 줄의 함수로 해석해버려서 에러가 발생하는 것

이러한 경우들을 개발자에게 알려주는, 혹은 자동으로 고쳐주는 역할을 하는 것이 lint다

ESLint

ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나아가 좋은 코드로 정정하는 린트 도구 중의 하나이다

위에서 얘기했듯이 코드의 가독성을 높이고 런타임시의 버그를 예방하는 등 여러방면에서 생산성을 높여준다

린트가 코드를 검사하는 항목은 크게 나누어서보면 두 가지인데

• 포맷팅
  포매팅은 일관된 코드 스타일을 유지하게 하고 본인을 포함한 다른 개발자들이 코드를 읽기 쉽게 도와준다
  여기서는 코드 들여쓰기, 코드라인의 최대 너비 규칙같은 부분을 검사하고 정정해준다
• 코드 품질
  코드 품질은 어플리케이션의 잠재적인 버그나 런타임시에 발생할 수 있는 부분을 예방하기 위한 항목이다
  사용하지 않는 변수, 글로벌 스코프 억제 등이 있다

설치 및 사용법

설치는 다른 라이브러리들과 똑같이 npm i eslint로 설치를 하면된다

eslint는 반드시 설정파일이 필요한데 webpack이나 babel과는 다르게 설정 파일의 이름이 다르지만 노드의 모듈시스템을 활용하는 것은 같다

.eslintrc.js라는 파일을 생성해주자

module.exports = {
}

이렇게 설정 파일을 비워놓고 린트를 돌려보면

npx eslint app.js
...

실제로 ...이라고 뜨진 않지만 아무런 결과가 나오지 않는 다는 것을 표현했다

규칙

ESlint는 바벨과 비슷하게 설정값이 없으면 아무일도 하지않는다

그 설정값을 하는 것이 rules옵션인데 ESlint 개발자들은 사전에 이러한 규칙들을 전부 정의해놓았다

우리는 필요한 것을 가져다 커스터마이징할 부분은 고쳐서 쓰면된다

지금 필요한 규칙은 no-unexpected-multiline으로 함수나 명령어를 여러 줄에 걸쳐서 표현하지 못하게 하는 규칙이다

설정 파일에 추가해보자

module.exports = {
    rules: {
        "no-unexpected-multiline": "error",
    },
}

여기서 규칙 이름 뒤에 따라오는 error값은 개발자가 수정해 줄 수 있는데 3가지의 값을 가지고 있다

• off 이나 0
  규칙을 끄는 옵션이다
• warn 이나 1
  경고, 실행에는 영향을 끼치지 않지만 바꾸는게 좋다는 의미 정도
• error 나 2
  이 때는 규칙에 맞지 않을 때 오류를 발생하게끔 하는 설정값

npx eslint app.js를 실행해보면

  2:1  error  Unexpected newline between function and ( of function call  no-unexpected-multiline

✖ 1 problem (1 error, 0 warnings)

오류를 잡아주는 것을 확인 할 수 있다

console.log();
(function (){})();

세미 콜론을 넣고 돌리면 에러가 발생하지 않는다

자동 수정 규칙

이번에는 코드를 살짝 수정해보자

console.log();;;;;;;
(function (){})();

세미콜론이 있긴 한데 쓸데없이 많다 이러한 경우를 알려주는 규칙도 존재하는데 바로 no-extra-semi옵션이다

설정 파일에 추가해보자

module.exports = {
    rules: {
        "no-unexpected-multiline": "error",
        "no-extra-semi" : "error",
    },
}

ESLint를 돌리면..

  1:15  error  Unnecessary semicolon  no-extra-semi
  1:16  error  Unnecessary semicolon  no-extra-semi
  1:17  error  Unnecessary semicolon  no-extra-semi
  1:18  error  Unnecessary semicolon  no-extra-semi
  1:19  error  Unnecessary semicolon  no-extra-semi
  1:20  error  Unnecessary semicolon  no-extra-semi

✖ 6 problems (6 errors, 0 warnings)
  6 errors and 0 warnings potentially fixable with the `--fix` option.

오버된 세미콜론의 개수만큼 에러가 발생하는데 이전에 볼 수 없었던 메시지가 있다

potentially fixable with the --fix option. 라는 구문인데 자동으로 고칠 수 있으니 --fix 옵션을 사용하라고 한다

시키는대로 이번엔 npx eslint app.js --fix으로 실행해보자

그럼 터미널에는 아무 메시지가 뜨지 않고 app.js가 자동으로 수정된 것을 볼 수 있다

console.log();
(function (){})();

ESLint의 규칙 중에는 이렇게 자동으로 수정을 해주는 규칙들이 있는데 홈페이지의 rules페이지에 가 보면

저 렌치 모양의 아이콘이 자동으로 수정해주는 옵션을 가지고 있는 규칙들임을 알려주고 있다

Extensible Config

위에서 처럼 필요한 규칙을 하나씩 갖다 써도 되지만 그러면 너무 피곤하기 때문에 ESLint에서 추천하는 것들을 모아놓은 세트가 있다

그것을 Extensible Config라고 부르는데 이를 설정 파일에 추가할 때는 rules가 아닌 extends 설정으로 추가해야한다

eslint:recommended를 추가해보자

module.exports = {
    extends: [
        'eslint:recommended',
    ],
}

이렇게 해두고 필요한 규칙이 있다면 밑에 rules로 더 가져와도 되고 이 recommended 옵션 말고도 다른 세트들도 존재한다

eslint-config-airbnb-base : airbnb 설정은 airbnb 스타일 가이드를 따르는 규칙 모음이다

eslint-config-standard : standard 설정은 자바스크립트 스탠다드 스타일의 규칙 모음이다

초기화

사실 이러한 ESLint 설정들은 세트나 룰을 직접 가져다 쓰기 보다는 npx eslint --init옵션으로 쉽게 구성할 수 있다

npx eslint --init

? How would you like to use ESLint?
? What type of modules does your project use?
? Which framework does your project use?
? Where does your code run?
? How would you like to define a style for your project?
? Which style guide do you want to follow?
? What format do you want your config file to be in?

위와 같은 대화 형식으로 진행되며 모든 질문에 대답하면 알아서 규칙들이 구성된다