eslint 질문드립니다.

Question

강의 그대로 따라했는데 계속 오류가 잡히고  eslint 에서 빨간밑줄이 안나오는것부터 시작해서 prettier 관련되서 오류가 해결이 안되서 2시간 가까이 애먹었습니다.. 구글링도하고 찾다가 우연히 질문글에 아래 사진게시물을 보고해결했습니다 위 사진 글처럼 eslint 버전을 변경후 , 재설치 하니까 해결됐습니다. 빨간 밑줄도 생겼고, 자동수정 auto fix가 안되는 현상도 해결했습니다. 오류는 잡히는데 autofix가 안돼서 어느부분이 문제인가 애먹었는데 ㅠㅠ 후.. 2시간동안 스트레스를 너무받아서 포기하려다.. 겨우 찾아냈네요 질문 혹시 드린다면.. - eslint 버전이 높다고 좋은것이 아닌가요??  - 이후 강좌에서 prettier 를 사용안함으로 바꾸어줬는데    prettier를 아예 설치를 안하고 eslint만 설치후    .eslintrc.js에서 prettier 옵션만 넣어주어도 되나요?? 프리티어를 중지시키는건 충돌을 막기위해서 인것이면 프리티어를 처음부터 설치를 안해도 되는가싶어서요 작업영역 사용안함으로 했는데, 그렇게되면  매 작업 할때마다 prettier를 작업영역 사용안함으로 해줘야하나 해서 질문드립니다.. 질문이 너무 기네요..  죄송합니다

캡틴판교 · Answer

안녕하세요  sususuz1 님, ESLint 설정하시느라 고생이 많으셨겠네요 ㅜㅜ 이 부분은 저도 항상 고민인게 VSCode, Vue CLI, ESLint 플러그인의 버전이 주기적으로 올라가기 때문에 영상으로 한번 찍어놓으면은 버전이 바뀔 때마다 안 맞는 부분이 있어서 수강하시는 분들이 불편하실거 같다는 생각을 합니다.. 조만간 또 다시 한번 최신 버전에 맞춰 영상 업데이트 해 놓겠습니다.. :) 그래도 고생하셔서 잘 구성하셨다니 다행이네요 :) 여쭤보신 질문에 답변드릴게요. 1. ESLint 버전 ESLint 버전에는 현재 강의를 기준으로 VSCode의 ESLint 플러그인 버전 과 Vue CLI에 설정되는 ESLint 자바스크립트 라이브러리 버전 이 있습니다. VSCode의 ESLint 플러그인은 항상 최신으로 유지해 주시고, Vue CLI의 ESLint 버전은 프로젝트가 생성될 때 잡히는 버전으로 유지해 주시면 됩니다. 말씀해 주신 걸 보면 전에도 동일한 현상을 겪었던 분도 계신 것 같은데 Vue CLI에서 설정해 놓은 ESLint 버전에 문제가 있어서 다운그레이드(여기서는 5.x로 낮춘 동작을 의미)를 하시는게 해결책인 것 같아요 :) 2. Prettier VSCode 플러그인 VSCode의 프리티어 플러그인은 Vue CLI로 프로젝트를 생성하지 않고 일반 JS, HTML 파일을 다룰 때 포맷팅 용도로 활용하면 좋은 플러그인입니다. 말씀하신 것처럼 Vue CLI로 프로젝트를 생성해서 진행하는 경우 ESLint와 Prettier의 조합으로 포맷팅을 진행하실 거기 때문에 Prettier 플러그인을 해당 프로젝트 기준으로 비활성화 또는 아예 제거하시는 것도 좋은 방법입니다 :) 저는 보통 해당 작업영역에서 사용 안함으로 설정해 놓습니다 :) 개인적으로 간단한 js, html 파일 만질 때는 또 있으면 편해서요. --- 수강해 주셔서 감사하고 혹시 또 진행하시다가 안되시는 것 있으면 말씀해 주세요 :)

kwmoon · Answer

settings.json 파일에 "eslint.workingDirectories": [ { "mode": "auto" } ],   추가해주시면 빨간줄 표시 됩니다 :)