VS Code에서 eslint 인식 오류 문제 해결 (masOS)

최근에 개인프로젝트로 React를 프론트로 적용시키기 위해 강좌를 보면서 해당 강좌를 따라 진행하는 도중 VS Code 내에서 eslint 플러그인이 정상적으로 동작하지 않는 것을 확인하고 수정하는 과정이다.

eslint가 적용되지 않는다?!

보통 텍스트 에디터 등에 eslint를 적용하면 설정된 코딩 컨벤션이나 규칙 등에 따라 에디터에서 이에 맞지 않는 코드를 발견할 경우 Error나 Warning 등의 알람을 보여주어 사용자가 감지할 수 있게 한다.

.eslintrc 내에 설정을 적용하고, 저장을 하는 순간 eslint가 적용되어야 정상이다. 하지만 VS Code 내 하단의 작업표시줄에 ESLint 옆에 경고 아이콘이 뜨고 있었다.

경고 내용을 검색해보니 eslint를 인식하고 있지 않아서 발생하는 문제임을 확인하고 global로 eslint를 설치하였다.

yarn global add eslint (필자는 yarn을 node package 관리 도구로 사용하고 있다.)

하지만 전역 설치를 수행하였음에도 불구하고, 해당 에러는 계속해서 발생하였다. 혹시나 하여 VS Code내 터미널에 eslint를 입력하였지만 이를 인식하지 못하였다. 그렇다면 터미널에서 이를 인식하지 못하는 문제인데 터미널과 관련하여 설정이 필요하다는 것을 깨닫게 되었다.

하지만 터미널 관련해서는 이전에 macOS를 설치하고 대대적인(?) 설정 과정에서 새로운 터미널을 깔고 변경한 것 이외에는 변경점이 없었다.

It's the Terminal, Stupid. (문제는 터미널이야. 바보야)

대부분의 IT 기업들이 macOS를 사용하고 있는 추세이므로, 개인 노트북이 없던 필자는 개인 노트북 구매와 macOS 적용을 위해 맥북 프로 최신형을 대담하게 구입하였다. 당연히 맥북에 대해서는 아는 것이 전무하다보니 맥북 초기 개발환경 설정을 아래의 사이트를 따라 진행하면서 환경을 설정하였다.

Link: 본격 macOS에 개발 환경 구축하기

해당 링크에서 개발 환경을 구축하면서 터미널을 기존의 터미널에서 iTerm2로, bash를 zsh로 변경하였고 이에 대한 설정을 따라서 진행했지만 완전한 이해를 기반으로 진행한 점이 아니었다..(후덜덜)

따라서 zsh에서 yarn의 패키지 경로를 별도로 추가하여야 yarn에서 전역으로 설치한 패키지들을 cli 형식으로 사용할 수 있는 것이다. 이를 위해서 zsh 설정파일에서 해당 경로를 추가해야 한다.

vim ~/.zshrc

export PATH="$PATH:/Users/username/.npm-packages/bin"

해당 설정을 완료한 후 터미널을 다시 실행하여 cli 적용을 확인하고 VS Code를 다시 실행하여 문제가 해결된 것을 확인하였다.

끝날 때까지 끝난게 아니야..

한동안 무리 없이 사용하고 있다가, VS Code 내에서 Tab 간격을 기본 4칸에서 2칸으로 변경하면서 코드 관리를 위해 VS Code 플러그인 중에 Prettier 플러그인을 사용하였다.

하지만 Prettier 플러그인을 적용하면서 또 다시 eslint를 사용할 수 없는 문제가 발생하였다. 이를 해결하기 위해 구글링하던 도중 동일한 이슈를 발견하였다.

ESLint fails to load plugins when using ESLint 6.x (정확히는 이 이슈가 아니라 다른 이슈지만 찾지 못했습니다..)

eslint 6에서 prettier와 같이 사용할 경우 이러한 문제가 발생할 수 있는 것 같았다. 따라서 미봉책으로 eslint 5 버전으로 다운그레이드하여 실행한 결과 동작하는 것을 확인했다. 해당 이슈를 지속적으로 확인하면서 추후에 문제가 해결되면 eslint의 버전을 올릴 예정이다.