CodeHoon

[2023.01.07 의 기록]

안녕하세요 상훈입니다.

✅ 에러 발생 환경

1) Node.js : 18.13.0
2) Vue.js : @vue/cli 4.5.15

Vue.js3 프로젝트에서 프로젝트를 git에서 pull 받아 npm i 를 통해  package.json 내부 내용을 다운로드 하였을 때 발생한 오류입니다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR! npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR! npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR! npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

✅ 에러 해결

npm에서 설명한 내용처럼,
eslint-plugin-vue 의 버전이 npm resolve를 할 때 충돌한 것 같아 eslint의 버전을 7.20.0으로 낮추었습니다.

(왜 7.20.0 으로 바꾸었는지는 아래에서 설명하도록 하겠습니다.)

[ package.json > devDependencies > eslint-plugin-vue 항목 변경]

그리고 이제  npm i 

이게 정답이 될지는 모르겠습니다. 
왜냐하면 최신 버전의 node.js 에서 추가된 기능 혹은 호환성이 존재하니까요.
( 사실 많은 버전을 낮추는게 아니라 그렇게 걸리지는 않습니다.)

만약, npm i 를 하였는데, 저처럼 audit fix 문구가 뜨신다면 해당 명령어를 진행하셔도 무방합니다. 

프로젝트를 정상적으로 돌려보았는데, 확인 부탁드립니다.

✅ Why eslint-plugin-vue 7.20.0 ??

기존에 버전은 8.0.3 이었습니다. 

그리고 기존에는 npm i -f / peer-deep~ 을 통해 무시하거나 강제로 설치해서 사용하고 있었습니다. 

에러 문구에서는 peer를 7.2.0으로 설명하기에 해당 버전과 호환되는 것으로 생각하여 이 버전으로 다운 그레이드를 해보았습니다.

이곳에서 에러를 보다가 스스로 해결하긴 했고, 댓글을 남겨놓은 상태입니다. HoonHub~

안녕하세요 상훈입니다.

1.  .eslintrc.json
2.  .prettierrc

파일에 대해서 간단한 설정 몇 가지를 작성해보려고 합니다.

1.  .eslintrc.json

일단 사용환경이 React.js 라서 ecmaFeatures 와 같은 경우 jsx 문법을 사용하고 있습니다.

commonjs를 적용해 eslint를 설치하였습니다.

- 사용하지 않은 변수에 대한 알림 및 에러 처리

하단에 보시면 no-unused-vars: "warn" 이라는 항목이 있는데, 해당 항목을 error, warn, off 로 설정이 가능합니다.

2.  .prettierrc

1) singleQuote: 싱글 쿼터로할지 더블 쿼터로 할지 설정입니다.

Vue.js 에서는 싱글을 추천하고, React.js 에서는 더블을 권장하고 있습니다. 그래서 false로 무조건 더블 쿼터 처리를 하게하였습니다.

2) semi: 코드의 맨 뒤에 콜론을 자동으로 삽입하게 할지 말지 적용하면 됩니다.

3) tabWidth: 1번 tab을 눌렀을 때 띄워줄 space의 개수입니다. 저는 2개로 했습니다. (2개로 하는게 대세더군요)

도움이 되셨길 바랍니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

Vue-cli 프로젝트를 만들 때 ESLint 옵션을 standard로 설정하고 생성하였다. 

그런데 순조롭게 코드를 작성하고 있던 와중, 딱히 코드 자체에 문제가 없어보이는데 저런 에러가 출력되면서 --fix만 사용하란다. 

■ 해결방법

npm run --fix

2022.12.12. 수정
 - npm run lint -- --fix 로 해야지 됩니다. 
위의 코드는 제가 script에 해당 내용을 미리 작성해서 되는것이었습니다. 참고바랍니다.

npm run lint -- --fix

해당 명령어를 bash에서 입력했을 때 

순조롭게 되었다.

예전에는 이게 뭐야? ㅡㅡ 하면서 지나갔던 내용인데 뭔가 오기가 생긴건지 결벽증이 생긴건지 이런 것 하나하나 신경쓰게 되었다.