인프런 커뮤니티 질문&답변

가다머님의 프로필 이미지
가다머

작성한 질문수

React로 NodeBird SNS 만들기

1-2. next와 eslint 설치하기

vscode 에서 cannot find eslint-plugin-react 에러

작성

·

7.9K

0

package.json 에서 eslint, plugin들도 확실히 다 깔려있는데 왜 이런지 모르겠습니다.

vscode extension으로 eslint도 깔아봤고 다시시작도 해봤습니다.

답변 4

6

저도 eslint가 적용이 안되는 문제때문에 해맸는데 jiyeol lee 님의 힌트를 받아서 더 찾아보니 아래처럼 settings.json 을 수정하면 된다고 하여 해보니 잘 되네요!

"eslint.workingDirectories": [
    { "mode": "auto" }
],

2

https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-512252381

저도 같은 문제로 삽질을 오래했는데 어떻게 해결은 한 것 같습니다. 저는 위 링크로 들어가면 보이는 코멘트를 참고했구요.

어쩌다보니 vscode-eslint 깃허브 레퍼지토리에 올라온 이슈까지 참고했네요. Eslint6로 업그레이드되면서(참고로 제로초님이 이 강의를 만드실때는 5.16버전이었습니다.)와 VS code의 eslint extension과의 호환 문제가 있었던 것 같아요. 6.4로 업그레이드 된지는 진짜 얼마 안 됬네요.

Nodebird 프로젝트 root 디렉토리가 아닌 front 폴더에 eslintrc 파일이 위치하고 있는 부분이 문제가 되는 것으로 보입니다. (사실 저도 잘 모르겠습니다... 영어로 다 보는게 쉽지도 않네요. 관심 있으시면 제가 첨부한 링크에 수많은 사람들이 이슈 코멘트를 최대한 보시면 될 거 같아요)

간단히 말씀드리면 vscode settings.json에 "eslint.workingDirectories": ["./front"] 이렇게 추가하고 나니 eslint 6.4 버전에서도 vscode eslint extension은 잘 동작하는 것 같습니다.

Nodebird 프로젝트가 front, back으로 나누어져있는데 저는 강의 극초반이라 어떻게 될지 모르겠지만, back 폴더 내에서 아마도 또 따로 eslintrc 파일을 나중에 생성하게 되면 "./back" 경로도 또 추가해주면 될 거 같아요. 

아직 코알못이라 저랑 똑같이 하셔도 해결될지 모르겠지만, 답글 남겨봅니다. 아니면 이미 해결하셨길 바랍니다 :)

**그냥 eslint 5.16으로 다운그레이드만 해도 해결이 되는 지 모르겠습니다. 잘 기억이 안 나네요. 워낙 정신없이 이래저리 실험을 했어서... 단순히 다운그레이드로 해결되시면 그것도 좋은 방법이겠죠.

0

전역으로 설치해도 아래와 같은 문제가 계쏙 나옵니다 .eslintrc 파일에 plugins설정에서 import 를 지우면 react-hooks로 이름만 바껴서 똑같은 오류가 발생하는데 원인이 뭘까요...

Failed to load plugin 'import' declared in 'front/.eslintrc': Cannot find module 'eslint-plugin-import'
Require stack:
- /Users/^^/Documents/vscode_workspace/react-nodebird/__placeholder__.js
Happened while validating /Users/^^/Documents/vscode_workspace/react-nodebird/front/components/LoginForm.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.

Consider running eslint --debug /Users/^^/Documents/vscode_workspace/react-nodebird/front/components/LoginForm.js from a terminal to obtain a trace about the configuration files used.

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

npm i -g로 전역 설치도 한 번 해보세요

가다머님의 프로필 이미지
가다머

작성한 질문수

질문하기