강의

멘토링

로드맵

Inflearn brand logo image

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

주식회사대은계전님의 프로필 이미지
주식회사대은계전

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

Vue Router 란? : 프로젝트 적용

eslint 설정이 교안 그대로 했는데 이상합니다

작성

·

104

·

수정됨

0

image.pngimage.pngimage.png

 

image.png

 

웹자체는 동작을 하고있는데 자꾸 저런 에러메세지가 뜹니다. 원인을 알 수 있을까요??

 

그리고

Replace "/" with '/'

이 문구를 보고 쌍따옴표(") 대신 따옴표(')로 수정을 했는데 저장을 하면 자동으로 다시 쌍따옴표로 바뀌고 세미콜론(;)을 붙이는부분도 붙인다음 저장을 하면 자꾸 사라지는데 이건 어떤 옵션을 만져야하는지 알수있을까요??

 

 

+) npm run dev를 동작했을때 버전이 이상해서 살펴보니

image.png

버전이 0.0.0이라고 뜹니다.

image.png

설치는 교안에 작성된대로

npm init vue@3.1.10

로 입력했고요 cmd로 1번 터미널에서 3번 설치 진행했습니다。 모두 동일하게 결과가 나왔고요 혹시 이게 원인이라면 원인이거같은데 왜이렇게되나요¿¿

답변 2

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

답변) 충돌 관련

ESLint 규칙과 Prettier 규칙이 충돌이 발생하고 있는데요 충돌 방지 패키지를 잘 설치했는지 확인해 보시겠어요?
https://github.com/prettier/eslint-config-prettier

 

답변) 버전 관련

현재 package.json 에 0.0.0 의 버전은 현재 수강생분의 프로젝트 버전 이기에 라이브러리버전과는 무관해서 상관없습니다.

dependencies (또는 devDependencies) 에 있는 라이브러리 버전만 강의버전과 일치하면 됩니다.

(프론트엔드 날개달기 강좌를 보시는 것을 권장드립니다.)

 

 

 

알려주신 링크가 교안에서의 extends와 많이 다르고 @vue에 eslint-config-prettier가 이미 설치된것을 확인했기 때문에 원인을 찾던도중 한가지 짐작가는부분이 생겼습니다. 제가 이전에 리액트 공부를 잠시했었는데 거기서 디폴트 포맷터를 prettier로 설정을 했었는데 지금 다른 컴퓨터에서 VS를 재설치후 완전히 리셋된 설정 상태에서 파일을 열어보니 오류문구가 뜨지 않았습니다. 제가 아무런 배경지식없이 수업을 천천히 듣고있는데 혹시 원인이 강의 초반에 eslint와 prettier를 직접 설정할것이라는 내용이 있었는데 제컴퓨터에 이미 디폴트 포맷터를 prettier로 설정되어있어서 이부분이 충돌날수도 있는건가요??

짐코딩님의 프로필 이미지
짐코딩
지식공유자

  • VSCode 플러그인 설치목록에 Prettier 가 있다면 삭제(또는 현재 워크스페이스에서 사용안함)해보시겠어요?

  • Default Formatter를 "없음"으로 해보시겠어요? (ctrl + , 누른 후 default formatter로 검색)

강사님 말씀대로 수정한 후 즉시는 변화가 없다가 하루가 지나니까 사라졌네요ㅠㅠ 감사합니다

0

안녕하세요, 인프런 AI 인턴입니다. 주식회사대은계전님.

ESLint 설정을 완료하였음에도 오류 메시지가 계속 발생하는 상황인 것 같습니다. 이러한 문제는 설정 파일 구성이나 적용 상태에 문제가 있을 때 발생할 수 있습니다. 다음은 유사한 문제를 해결하는 데 도움이 될 수 있는 기존 게시물과 해결 방법입니다:

  1. eslint 설정 문의

이 게시물에서는 ESLint 설정 파일 구성의 최신 변경 사항과 관련된 사항을 설명합니다. 특히 eslint.config.js 파일과 .prettierrc.json 파일의 설정을 확인하여 정확히 반영되었는지 점검하는 것이 중요합니다.

  1. 프로젝트에 eslint와 prettier를 나중에 추가하고 싶습니다.

여기에서는 프로젝트에 ESLint와 Prettier 설정을 추가하는 방법을 자세히 안내하고 있습니다. 필수 패키지 설치 방법과 설정 파일 예시를 포함하고 있어, 초기 설정 상태를 다시 확인하는 데 유용할 수 있습니다.

이미지에서 확인된 문제점들을 기반으로 몇 가지 조언을 드리자면:

  • 절대 경로와 상대 경로 설정이 올바르게 되어 있는지 각 파일의 import 경로를 확인합니다. 경로가 잘못 설정되어 있을 경우 ESLint 경고 메시지가 발생할 수 있습니다.

  • Vue 파일에서 사용하지 않는 변수가 정의되어 있을 경우(예: AboutView), 해당 변수를 제거하거나 사용되도록 변경합니다.

  • package.json 파일에서 모든 패키지가 올바르게 설치되었는지, 그리고 ESLint와 관련된 플러그인 버전이 컴포넌트와 일치하는지 점검합니다.

위의 설명과 링크를 참고하여 문제 해결에 도움이 되길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

주식회사대은계전님의 프로필 이미지
주식회사대은계전

작성한 질문수

질문하기