ESlint 설정은 모두 완료 했는데 코드에서 문제 대상 라인에 ... - 인프런

Vue.js 끝장내기 - 실무에 필요한 모든 것

ESLint 플러그인 설치 및 설정 변경

ESlint 설정은 모두 완료 했는데 코드에서 문제 대상 라인에 표시가 되지않습니다.

20.05.18 18:53 작성

7.2K

안녕하세요. 강사님. 앞부분까지 내용을 보면서 잘 따라오고 있었는데 ESlint 설정을 동일하게 설정하였습니다. 그런데 강사님 영상을 보면 틀린부분에 대해 바로바로 빨간줄로 표시가 되면서 관련 설명도 확인이 가능한데 제 VSCode에서는 빨간줄도 표시되지 않고 하단의 Problems 탭에도 어떤것도 표시되지 않지만 npm run serve를 실행하면 관련 내용이 표시가 됩니다. 어떤 설정부분이 빠진것일까요?

VSCode가 로딩되면서 Output에 아래와 같은 내용이 표시됩니다.

--------------------------------------------------

Failed to load plugin 'prettier' declared in 'vue-til-server\.eslintrc.js': Cannot find module 'eslint-plugin-prettier'

Require stack:

- C:\Users\Dart_Dev3\Desktop\vue-endgame\__placeholder__.js

Referenced from: C:\Users\Dart_Dev3\Desktop\vue-endgame\vue-til-server\.eslintrc.js

Happened while validating C:\Users\Dart_Dev3\Desktop\vue-endgame\vue-til-server\src\app.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-prettier' is installed globally as well.

3. If ESLint is installed locally, then 'eslint-plugin-prettier' isn't installed correctly.

Consider running eslint --debug C:\Users\Dart_Dev3\Desktop\vue-endgame\vue-til-server\src\app.js from a terminal to obtain a trace about the configuration files used.

--------------------------------------------------

npm install -g eslint-plugin-prettier 로 해당 패키지를 설치해봐도 정상적으로 동작하지 않습니다....

vuex javascript vuejs

답변 4

devops

질문자

2020. 05. 19. 11:27

https://www.gitmemory.com/issue/vuejs/eslint-plugin-vue/976/555925022

위 URL을 참고하여 ESLint가 정상 동작하지 않는 문제는 해결하였습니다.

settings.json 파일에 항목 추가

{
"eslint.workingDirectories": [
    "./frontend"
]
}

eslint plugin 별도 설치 명령어 실행

npm install eslint-plugin-import --save-dev
npm install eslint-plugin-node --save-dev
npm install eslint-plugin-promise --save-dev
npm install eslint-plugin-standard --save-dev

위의 2가지 작업을 수행하여 정상 동작 처리했는데 2개의 작업을 동시에 수행하여 둘 중 어떤 작업으로 인해 정상 동작하는 것인지는 정확히 확인하지 못했습니다.

장기효(캡틴판교)

지식공유자

2020. 05. 20. 10:18

안녕하세요 devops님, 앞서 말씀해주신 에러는 ESLint 플러그인에서 eslintrc 파일 경로를 정상적으로 인식하지 못해서 나오는 현상입니다. settings.json에 디렉토리 주소 추가해주셔서 정상적으로 동작된 것 같아요. 강의 수강해주셔서 감사합니다 :)

Soomi Kim

2022. 06. 02. 20:53

윗분께서 알려주신 대로 아래의 코드를 인스톨하니 정상작동하네요.

감사합니다.!!+_+

npm install eslint-plugin-node --save-dev

안지혁

2020. 09. 30. 22:49

저두

"eslint.workingDirectories": [
    "./vue-til"
]

를 추가하니 먹히네요..

그런데 프로젝트를 매번 생성할때마다 이걸 세팅 해줘야하는걸까요?

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

ESlint 설정은 모두 완료 했는데 코드에서 문제 대상 라인에 표시가 되지않습니다.