프로젝트에 ESLint 적용하기

예전에 진행했던 바닐라 자바스크립트 프로젝트에 ESLint를 적용해보자.

일단 아래 명령어로 내가 적용하고 싶은 프로젝트 폴더에서 설치한다. 예전에 전역적으로 적용했다가 꽤나 고생했던 기억이 있다. 그리고 ESLint 공식문서에서도 전역 설치는 권장하고 있지 않다.

npm init @eslint/config

이렇게 설치하면 터미널에 어떤 프로젝트에 ESLint를 설치할 건지에 대한 질문이 생성되고 하나씩 답변해 나가면 된다. 그렇게 설치를 마치고 나서 JS파일을 보면 에러가 발생한 걸 볼 수 있다. ESLint를 설치하지 않았을 때는 발생하지 않았던 에러들을 ESLint가 캐치해서 얼른 고치라고 이야기하고 있는 것이다. 아무튼 지금부터 에러들을 리스트 업 해보고 하나씩 해결해 나가보자.

내가 해결해야 하는 오류는 아래와 같다.

Strings must use singlequote.eslint ([quotes](https://eslint.org/docs/latest/rules/quotes))
$mainBody' is assigned a value but never used.eslint ([no-unused-vars](https://eslint.org/docs/latest/rules/no-unused-vars))
Unexpected space before function parentheses.eslint ([space-before-function-paren](https://eslint.org/docs/latest/rules/space-before-function-paren))
Missing trailing comma.eslint([comma-dangle](https://eslint.org/docs/latest/rules/comma-dangle))
Missing JSDoc comment.eslint([require-jsdoc](https://eslint.org/docs/latest/rules/require-jsdoc))
Expected indentation of 16 spaces but found 14.eslint([indent](https://eslint.org/docs/latest/rules/indent))
Inconsistently quoted property 'indent' found.eslint(quote-props)
Missing semicolon.eslint([semi](https://eslint.org/docs/latest/rules/semi))

Strings must use singlequote.eslint (quotes)

가장 먼저 해결해야 할 부분은 prettier 설정은 string에 doublequote, 그러니까 쌍따옴표로 되어 있는데 ESLint의 기본 설정은 singlequote라 규칙에 위배된다고 에러를 발생시키고 있다.

여기서 두 가지를 생각해 볼 수 있을 것 같다. prettier 설정 같은 경우에 vscode의 setting 값으로 전역적으로 적용시켜주고 있는 상황이라 prettier 설정을 singleguote로 바꿔주면 문제는 쉽게 해결된다. 나중에 다른 프로젝트를 진행해도 이 에러에서 만큼은 ESLint를 다시 설정할 필요가 없다. 이 경우 vscode의 setting에서 singlequote를 적용해주기만 하면 된다.

하지만 만약 전역적으로 prettier는 doublequote를 유지하고 싶고 개별 프로젝트에서만 singlequote를 이용하고 싶거나 아니면 아예 프로젝트에서도 doublequote를 사용하고 싶을 때는 어떻게 해야할까?

일단 개별 프로젝트에서만 singlequote를 이용하고 싶을 때는 .prettierrc 파일을 만들어서 개별적으로 프로젝트에서만 prettier가 따로 singlequote로 변환할 수 있도록 해줄 수 있다.

// .prettierrc
{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "singleQuote": true
      }
    }
  ]
}

그렇지 않고 doublequote를 이용하면서 에러를 발생시키지 않게 하려면 setting.json 파일에 아래 코드를 넣어주면 doublequote를 사용하지만 오류를 발생시키지 않는다.

"eslint.options": {
  "rules": {
    "quotes": ["error", "single"]
  }
},

이 기회에 아예 string부분은 singlequote로 정하자. 그래서 vscode의 기본값을 바꾸고 prettierrc 파일을 굳이 만들지 않도록 하겠다.

$mainBody' is assigned a value but never used.eslint (no-unused-vars)

이 경우에 변수가 선언은 되어 있는데 사용하지 않고 있다는 에러다. 변수가 선언만 되어 있고 사용되지 않고 있다면 불필요한 코드일테니 그 부분을 ESLint가 잡아주고 있다. 이 경우에 해당 변수를 그냥 파일에서 삭제해주면 간단하게 끝난다. 하지만 진짜로 남겨야 할 것 같은 코드라면 어떻게 해야할까? (개인적으로는 그런 경우가 있어서는 안된다고 생각하지만..)

이 경우에는 .eslintrc.js 파일에 아래 코드를 추가해주면 해당 에러에 대해 관대해지면서 더 이상 에러를 발생시키지 않는다.

rules: {
    'no-unused-vars': 'off'
}

Unexpected space before function parentheses.eslint (space-before-function-paren)

그 다음이 함수를 선언할 때의 공백을 어떻게 처리해야 할 지에 대한 부분이다.

$logoBars.addEventListener('click', function () {
  $navbar.classList.toggle('active');
});

$logoBars.addEventListener('click', function() {
  $navbar.classList.toggle('active');
});

위 아래 코드의 차이는 function 부분에 공백이 있는지 없는지에 대한 부분이다. ESLint 설치시 기본적인 값은 function과 () 사이에 공백이 없어야 한다.

$logoBars.addEventListener('click', () => {
  $navbar.classList.toggle('active');
});

화살표 함수의 경우 공백이 있어 크게 불편해보이지 않는다. 사실 함수 선언할 때 대부분 화살표 함수를 사용하기 때문에 이 오류는 그냥 vscode 설정으로 가볍게 해결해도 좋으나, ESLint 설정에 대해 하나씩 알아보고 있으니, 이 경우에도 function 과 () 사이에 공백이 있어도 오류를 발생시키지 않도록 코드르 추가해보자.

rules: {
    'space-before-function-paren': 'off'
}

위의 코드를 넣어주면 function 과 () 사이의 공백을 유지해도 에러가 발생하지 않는다.

Missing trailing comma.eslint(comma-dangle)

그 다음 해결해 볼 부분은 객체를 선언할 때 가장 마지막 요소에 comma가 없을 때 발생하는 오류다.

const obj = {
  a: 1,
  b: 2
};

이 경우 Missing trailing comma.eslint 에러가 발생한다. 이 또한 회사마다 개인 마다 원하는 컨벤션이 다 다르겠지만 내 경우에는 마지막에 comma가 있으면 뭔가 그 뒤의 값을 기대하고 있다는 느낌으로 받아들여져서 가장 뒤에는 comma가 오지 않는 걸 원한다. 그래서 이 부분도 해결해보자.

{
  "rules": {
    "comma-dangle": ["error", "never"]
  }
}

Missing JSDoc comment.eslint(require-jsdoc)

이 경우는 프로젝트에 ESLint를 엄격하게 적용했을 때 발생하는 문제다. 굳이 JSDoc을 작성하지 않았다고 오류를 발생시킬 것 까지는 없다고 생각하는데, 타입스크립트를 사용하지 않는 이상 JSDoc은 잘 사용할 수록 프로젝트 자체에 도움은 된다고 생각하기 때문에 한 편으로는 괜찮은 오류라고도 생각한다.

지금 당장은 오류를 발생시키는 게 불편하기 때문에 없애보자.

{
  "rules": {
    "require-jsdoc": "off"
  }
}

아래 코드를 추가하면 JSDoc 에러가 사라진다.

이쯤되면 이제 일관성이 확실하게 보인다. vscode에서 자동으로 추론해주는 ESLint 오류를 보면 항상 맨 뒤에

.eslint( ) 형식인 걸 볼 수 있고, 괄호 안에 들어가 있는 오류가 해당 오류의 타이틀이라고 보면 될 것 같다.

그래서 지금까지 선언한 옵션들을 전체적으로 확인해보면..

rules: {
  'no-unused-vars': 'off',
  'space-before-function-paren': 'off',
  'comma-dangle': ['error', 'never'],
  'require-jsdoc': 'off'
}

rules의 키 값이 모두 eslint 에러의 타이틀인걸 볼 수 있다. 그럼 뒤에 있는 값들도 어느 정도 규칙이 있지 않을까?

1. "off": 
규칙을 비활성화합니다. 해당 규칙을 적용하지 않습니다.

2. "warn" 또는 "warning": 
경고 수준으로 설정합니다. 규칙에 위반되는 경우 경고를 표시하지만, 빌드나 실행은 계속 진행됩니다.

3. "error": 
오류 수준으로 설정합니다. 규칙에 위반되는 경우 오류로 표시되고, 빌드나 실행이 중단될 수 있습니다.

4. "on": 
"error"와 동일한 의미입니다. 규칙을 활성화하고, 위반 시 오류로 표시되며, 빌드나 실행이 중단될 수 있습니다.

5. 사용자 정의 값: 
	5-1. "never": 
	규칙을 항상 적용하지 않습니다. 즉, 규칙에 위반되더라도 경고나 오류로 표시하지 않습니다. 
	이 설정은 해당 규칙을 비활성화하는 것과 같습니다.
	
	5-2. "always": 
	규칙을 항상 적용합니다. 즉, 규칙을 위반하는 경우 경고나 오류로 표시합니다. 
	이 설정은 해당 규칙을 강제로 활성화하는 것과 같습니다.
	
	5-3. "always-multiline": 
	규칙을 여러 줄(multiline)에 적용합니다. 
	이 설정은 주로 코드가 여러 줄에 걸쳐 작성되는 경우에 적용되는 규칙에 사용됩니다. 
	예를 들어, 객체 리터럴의 속성이 여러 줄에 걸쳐 작성될 때, "always-multiline" 설정을 사용하면 속성 
	사이에 항상 쉼표를 요구할 수 있습니다.

이제부터 해당 설정값들로 vscode에서 추론해주는 eslint를 쉽게 해결해 볼수도 있을 것 같다. 그렇다면 지금부터 발생하는 오류들은 vscode에서 추론해주는 값으로 설정해보자.

Expected indentation of 16 spaces but found 14.eslint(indent)

16칸의 indent를 예상했지만 14칸이란다;; 뭐 이런 오류도 있네ㅋㅋ

간단하게는 indent 옵션을 off 하면 되지 않을까? 그런데 prettier가 자동으로 코드를 저장해주는 옵션의 Indent와 eslint가 맞지 않아서 그런거니, prettier 설정을 변경해서 해결해도 될 것 같다. 하지만 일단 vscode의 추론으로 쉽게 off 설정을 해보려고 했으니 일단 코드를 추가해보자.

"rules": {
  "indent": "off",
}

허나 이렇게 추가했더니, 새로운 오류를 발생시키면서 아래 처럼 indent의 따옴표를 자동으로 없앴다.

"rules": {
  indent: "off",
}

Inconsistently quoted property 'indent' found.eslint(quote-props)

indent의 경우 왜 바로 적용이 안되고 일관성이 없다는 오류를 발생시킨 걸까? 아무튼 새로운 오류가 발생했으니 이 코드도 추가해보자.

{
  "rules": {
		'quote-props': 'off',
	   indent: 'off'
  }
}

아래 처럼 추가해주니까 indent의 옵션도 적용이 되면서 indent의 따옴표가 없는 오류도 해결이 되었다.

여기까지 진행하고 나니까 기존에 JS 파일에서 발생했던 ESLint 오류를 모두 잡아냈다.

Missing semicolon.eslint(semi)

이 오류는 코드의 맨 뒤에 semi 콜론을 추가하지 않는 경우 발생하는 오류다. 이 경우 호불호가 많이 갈리는 것 같다. 당분간은 semi 콜론을 코드의 끝에 추가하지 않고 사용해보려고 한다.

semi콜론이 굳이 필요없다고 생각하는 개발자들도 많은 것 같다. 아직은 semi 콜론이 없으면 조금 어색하다는 느낌을 많이 받아서 semi 콜론을 추가하는 옵션으로 사용하고 있는데, 당분간은 semi 콜론 없이 사용해보자. 그럼 해당 옵션을 또 off 해보겠다. 그런데 이 경우에도 indent 처럼 따옴표가 붙질 않는데.. 왜 그런 차이가 존재하는 지 잘 모르겠다;;

rules: {
  'quote-props': 'off',
  indent: 'off',
  semi: 'off'
}

하지만 오류만 막은 것 뿐이지 prettier가 자동으로 autoSave해서 다시 semi 콜론이 생성된다. 그러니까 prettier 설정 값도 변경해주자. vscode 설정에 가서 semi로 검색한 다음에 prettier: Semi로 가서 체크표시를 해제해주자. 그렇게 하고 다시 저장하면 semi 콜론이 없어진다.

정리

이 외에도 수많은 설정들이 있겠지만 일단은 이 정도에서 마무리하고 추가적으로 앞으로 프로젝트 진행하면서 ESLint 오류가 발생하면 해결해나가면서 지금 이 포스팅에 계속 업데이트 해나가도록 하자.

ESLint는 협업으로 프로젝트 진행시에 사소한 의견 다툼이나 불필요한 커뮤니케이션을 많이 줄여줄 수 있다고 생각한다. 초기에 공통으로 규칙을 정해놓으면 나중에 가서 딴소리 할 필요도 없고 만약 변경하고 싶다면 다시 의논하에 설정값만 변경해주면 되니 크게 어려운 부분은 아니라고 생각한다.