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

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

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

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

작성

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

질문자

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개의 작업을 동시에 수행하여 둘 중 어떤 작업으로 인해 정상 동작하는 것인지는 정확히 확인하지 못했습니다.

장기효(캡틴판교)

지식공유자

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

Soomi Kim

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

감사합니다.!!+_+

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

안지혁

저두

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

를 추가하니 먹히네요..

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

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

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