monorepo에서 eslint 동작방식 정리

monorepo의 디렉터리구조

eslint 동작방식 설명에 앞서 monorepo 디렉터리 구조를 짚고 넘어가자.

monorepo라 하면 루트 프로젝트 하위에 여러 패키지가 존재하여, 패키지가 각 패키지에 의존하고 재사용 할 수 있는 단일 웍스페이스라고 볼 수 있다.

개발자가 알아보기 쉽게 디렉터리 구조로 설명하자면 다음과 같다.

/package.json
/yarn.lock
/node_modules
/node_modules/cross-env
/node_modules/workspace-a -> /workspace-a
/workspace-a/package.json
/workspace-b/package.json

여기서 루트에 위치한 package.json 파일이 workspaces 프로퍼티를 가진다면, 패키지 매니저에 의해 관리되는 진정한 monorepo라 볼 수 있겠다.

 

eslint 동작방식

eslint 명령은 .eslintrc.* 파일에 설정한 rule에 따라 소스를 분석하고 그 상태를 반환하는데 아래 절차를 따른다.

1. eslint cli는 명령시 인자로 전달 된 소스 경로 부터 디렉터리를 한단계씩 상위로 거슬러 올라가며 .eslintrc.* 설정 파일을 찾는다.
2. .eslintrc.* 파일을 찾았다면 해당파일의 extends에 나열된 eslint-config- 패키지들의 룰을 취합하고. rules 프로퍼티에 나열된 override 규칙을 적용하여 하나의 룰셋을 만들고 js 파일을 분석하여 그 상태를 반환한다.

일반적으로 프로젝트의 루트 경로에 .eslintrc.* 파일을 둔다면 프로젝트 하위의 모든 소스 파일을 eslint로 검사할 수 있게 된다. 만약 특정 파일을 검사하지 않으려면 .eslintignore 파일에 검사를 무시할 파일 경로를 작성하면 된다.

 

monorepo에서의 eslint 동작방식

monorepo에서의 디렉터리 구조는 다음과 유사한 형태이다.

/package.json
/.eslintrc
/yarn.lock
/node_modules
/node_modules/cross-env
/node_modules/workspace-a -> /workspace-a
/workspace-a/package.json
/workspace-a/.eslintrc
/workspace-a/src/util/sum.js
/workspace-b/package.json
/workspace-b/.eslintrc

 

만약 이와 같은 구조에서 /workspace-a/src/util/sum.js 경로의 파일을 eslint로 분석한다면 다음과같은 명령이 될 것이다.

eslint /workspace-a/src/util/sum.js

 

그러면 eslint는 cli가 전달된 소스경로를 분석하고 소스 경로로부터 한단계씩 거슬러 올라가면서 .eslintrc 설정파일을 찾게 된다.

1. /workspace-a/src/util/sum.js <-- 와 같은 위치의 .eslintrc를 찾는다.
2. /workspace-a/src/util/.eslintrc
3. /workspace-a/src/.eslintrc
4. /workspace-a/.eslintrc <-- 이 위치에 있기 때문에 이 경로의 설정을 따라 sum.js파일을 분석한다.

만약 여기까지도 못찾았다면 그 상위로 거슬러 올라간다.
5. /.eslintrc

 

이와같은 과정은 eslint 명령에 --debug 옵션을 추가하면 확인할 수 있다.

npx eslint /workspace-a/src/util/sum.js --debug

 

🤔 monorepo라고 무조건 패키지별로 .eslintrc를 구성할 필요는 없다. 프로젝트 루트에 .eslintrc를 하나만 둘 수도 있고, 각 패키지별로 .eslintrc를 둬도 된다. 각 패키지가 개별적으로 서비스 될 수 있다면 .eslintrc를 각각 가져도 될 것이고, 그렇지 않다면 프로젝트 루트에 .eslintrc를 하나만 두어 관리해도 될 것 같다.