eslint-plugin-xxx와 eslint-config-xxx의 차이를 아시나요

맨 처음 프로젝트를 시작할 때, 다들 eslint 설치를 해봤을 것이다. 사람들이 많이 쓰는 eslint 패키지 이름 패턴을 보면 거의 eslint-plugin-xxx 또는 eslint-config-xxx이다. plugin과 config는 무엇이며 어떤 차이가 있을까?

eslint

공식 문서에는 eslint를 아래와 같이 설명한다.

Find and fix problmes in your JavaScript code

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

즉, eslint는 JavaScript 코드에 있는 문제를 찾아주고 고쳐준다.

다들 "eslint는 정적 분석 도구이다."라고 하던데, 정적 분석이 뭘까?

정적 분석

정적 분석은 코드를 실행하지 않고 프로그램을 분석한다. (wiki 참고)

In computer science, static program analysis (also known as static analysis or static simulation) is the analysis of computer programs performed without executing them

코드를 실행하지 않고 분석하면 코드 스타일 문제, 잠재적으로 발생할 수 있는 버그 등의 문제를 코드를 실행하기 전에 미리 발견할 수 있다.
eslint를 사용하면 런타임 전에 미리 오타나 에러도 알려주고, 코드 스타일이 틀리면 바로 잡아주기 때문에 사용하지 않을 이유가 없다!

eslint-plugin-xxx

React, Vue 환경에서 eslint의 기본 규칙만으로 만족하기 힘들다. 그래서, 개발자가 원하는 규칙을 eslint plugin 패키지로 만들어 프로젝트에 최적화된 eslint 규칙을 적용할 수 있다.

eslint-plugin-<plugin 이름>은 규칙을 정의한 패키지이다.

만약 eslint-plugin-react를 사용하려면, 다음과 같이 plugins에 <plugin 이름>을 추가해야 한다.

// .eslintrc
{
	"plugins": ["react"]
}

중요한 건 plugins에 추가해도 plugin의 모든 규칙이 자동으로 적용되지 않는다!
그냥 plugin에 있는 규칙을 이제 사용할 수 있게 된 것이다.
규칙을 사용하기 위해서 rules에 직접 추가해야 한다.

// .eslintrc
{
	"plugins": ["react"],
     "rules": {
    	"react/jsx-uses-react": "error",
    	"react/jsx-uses-vars": "error",
  	}
}

그럼 plugin에 있는 규칙을 매번 rules에 정의해야 하는데, 정말 귀찮은 작업이다.
plugin에서 추천하는 규칙이나 모든 규칙을 자동으로 적용하고 싶을 땐 어떻게 해야할까?

plugin에서 자체적으로 recommended, all 등의 config를 제공한다.
이런 config의 네이밍은 plugin:<plugin-name>/*이다.

// .eslintrc
{
  "extends": ["plugin:react/recommended"]
}

이렇게 하면 plugins에 "react"가 자동으로 추가되고, 플러그인이 추천하는 규칙들이 rules에 직접 설정된다.
(코드)
따라서, plugins에 "react"를 추가하거나 rules에 개별 규칙을 일일이 설정할 필요가 없다.

eslint-config-xxx

eslint-config-<config 이름>는 eslint-plugin-xxx들이나 규칙들을 모아서 설정한 패키지이다.
예를 들어, prettier를 사용하면 많이 봤을 eslint-config-prettier는 다음과 같이 설정한다.

{
  "extends": ["prettier"]
}

사용하고 싶은 config가 있다면 extends에 "<config 이름>"을 추가하면 된다.
그리고 plugin에서 제공하는 config은 extends에 plugin:<plugin-name>/*을 추가하면 된다.

참고로 eslint-config-prettier는 규칙들과 플러그인의 일부 규칙들을 off한다.

정리

• eslint는 잠재적인 버그, 스타일 등 문제를 코드 실행하기 전에 미리 발견하여 고쳐준다.
• eslint-plugin-xxx은 개발자가 원하는 규칙을 만든 패키지이다.
• eslint-config-xxx는 eslint-plugin-xxx들이나 규칙들을 모아서 설정한 패키지이다.

참고

eslint 공식 문서 - Coonfiguration Files
What is the difference between extends and plugins in ESLint config