editorconfig vs eslint vs prettier :: 마이구미

이 글은 editorconfig, eslint, prettier 를 비교한다.
대부분의 프로젝트를 보면, 3가지 모두 공존하고 있는 경우가 많다.
eslint, prettier 를 사용한다면, editorconfig 는 굳이 필요없지않나? 라고 혹시 생각하고 있다면 이 글은 도움이 될 것이다.
3가지 파일 모두 존재하는 프로젝트 예제 - https://github.com/facebook/react
EditorConfig - https://editorconfig.org/
Eslint - https://eslint.org/
Prettier - https://prettier.io/

 

우선 EditorConfig, Eslint, Prettier 각각 무엇인지 살펴보자.

 

EditorConfig

우리가 사용하는 에디터에서 코드베이스를 정의한 스타일에 맞게 작성할 수 있게 도와준다.

.editorconfig 파일을 생성해서 제공하는 설정값들을 지정할 수 있다.

 

indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100
...

 

위 설정이 나타내는 의미는 다음과 같다.

• 에디터에서는 들여쓰기 기준이 2칸으로 설정된다.
• 줄바꿈전에 공백이 존재하면 자동으로 제거(trim)한다.
• 마지막 줄은 항상 새로운 줄을 추가한다.
• 한 줄의 최대 코드 길이의 기준은 100 으로 안내한다.

 

Prettier

EditorConfig 와 마찬가지로 코드베이스를 정의한 스타일에 맞게 작성할 수 있게 도와준다.

EditorConfig 와 다른 점은 자동으로 코드를 포맷팅하는 기능을 제공해준다.

가장 중요한 것은 코드 포맷팅에 특화되어, 관련 기능들이 다양하다.

.prettierrc.js 파일을 통해 원하는 설정을 할 수 있다.

 

{
  tabWidth: 2,
  semi: false,
  singleQuote: true
}

 

위 설정이 나타내는 의미는 다음과 같다.

• 탭 클릭시 2칸으로 이동하게 지정한다.
• 세미콜론을 사용하지 않는다.
• 큰 따옴표가 아닌 작은 따옴표를 허용한다.

 

Eslint

Prettier, EditorConifg 와 마찬가지로 코드베이스를 정의한 스타일에 맞게 작성할 수 있게 도와준다.

그리고 Prettier 처럼 자동으로 코드를 포맷팅하는 기능도 제공한다.

Eslint 의 주된 목적은 사용하지 않는 코드, 오류를 발생할 수 있는 코드 구현 방식 등 잠재적인 오류를 잡아내는 린팅(Linting)이다.

.eslintrc.js 파일을 통해 원하는 설정을 할 수 있다.

 

{
  extends: ["airbnb"],
  rules: {
    "no-console": "error",
    "import/prefer-default-export": "off"
  }
}

 

위 설정이 나타내는 의미는 다음과 같다.

• airbnb 의 규칙을 따른다.
• console.log 와 같은 코드는 에러로 지정한다.(빌드된 파일에 포함되지 않기 위함)
• export 가 하나인 경우에는 default export 를 권장하는 규칙을 제외한다.

 

---

3가지를 보면, 뭔가 EditorConfig < Prettier < Eslint 순으로 탄생된 것처럼 설명하고 있어보인다.

Eslint 는 EditorConfig, Prettier 의 기능을 모두 포함하고 있어서, 결국 Eslint 만 사용해도 되는것처럼 보인다.

하지만 그렇지 않다는 건 조금만 찾아봐도 쉽게 알 수 있다.

예를 들어, 대부분 Eslint 와 함께 Prettier 를 사용하는 것을 찾아볼 수 있다.

 

3가지 모두 사용하는 이유는 무엇인가?

그 이유는 간단하다.

3가지 모두 각자 다른 역할이 존재하는 것이 가장 큰 이유이다.

우선 Eslint, Prettier 가 공존하는 이유는 포맷팅은 특화된 Prettier 로부터, 린팅은 Eslint 의 도움을 얻는다고 보면 된다.

 

그렇다면 왜 EditorConfig 는 사용하는 것인가?

코드 포맷팅을 Prettier 가 자동으로 해줄 수 있다.

하지만 인지해야하는 것은 Prettier 는 저장 시점이나 커밋하는 시점에 실행하여 자동 포맷팅 기능을 활용하는 것이다.

이것이 의미하는 것은 EditorConfig 설정이 없다면, 에디터에서 키보드 탭을 눌렀을 때 어떻게 될까?

만약 에디터의 설정값이 4라면, 4칸을 이동할 것이다.

그리고 나서 저장을 한다면, Prettier 에 의해 다시 2칸으로 자동 포맷팅 되는 것이다.

결론은 EditorConfig 를 활용하면, 실시간 타이핑 시점에서도 코드 스타일의 일관성에 도움을 줄 수 있다.

 

EditorConfig 가 없어도 충분히 Prettier 로 코드 스타일을 일관성있게 유지할 수 있다.

그렇더라도 EditorConfig 의 효과는 생각보다 강력하여 코드 일관성뿐만 아니라 생산성에도 도움을 준다고 생각한다.