[WEB Front] veter 와 eslint 충돌 해결법

저와 같은 문제로 긴 시간을 허비하시질 않길 바라며 글을 씁니다. ㅎ

 

프론트앤드 개발을 하다보면, 코드의 품질향상을 위해 팀원끼리 코드 스타일을 통합시켜주는 Linter 를 자주 사용합니다.

이 때 주로 사용하는 툴이 ESLint 이고 ES는 ECMA Script(자바스크립트)의 약자이며, Lint는 지푸라기라는 뜻인데.

코드에 이상이 있을 경우 지푸라기처럼 표시를 해준다고 하여 붙여진 이름이라고 합니다. 

 

그래서 팀원간에 세미콜론 규칙을 정해야하는데. ESLint를 사용할 경우 rules 속성 안에 semi : ["never", "error"] 로

세미콜론을 붙이지 않고, 이 규칙을 어겼을 시, 에러를 출력하도록 명시할 수 있습니다.

 

그런데 이 규칙을 붙였음에도 불구하고 VSCode 같은 IDE에서 저장만 하면 세미콜론이 붙어버려서 린터가 에러를 내뿜는 현상을 발견할 수 있는데. 이 경우, 로컬의 eslint가 글로벌로 설치돼서 그런 것도 아닙니다. 실제로 ESLinter를 마켓에서 삭제해도 npm uninstall -g eslint를 실행해도 증상이 해결되지 않습니다.

 

이는 바로 formtter 플러그인이 충돌해서 발생하는 현상입니다.

특히 vue 프론트 앤드 개발 시, vueter 라는 플러그인을 사용하게 되는데. 플러그인 설명에 보면,

formatter 기능을 지원한다고 명시되어 있습니다...

그래서 settings.json 파일에서 vueter 의 formatter 기능을 꺼줄 필요가 있습니다.

 

이 때

vscode 에서 파일 -> 기본설정 -> 설정 ->확장->vueter 에서

formatter 항목들의 prettier 로 된 항목을 none으로 설정해주시면 해결됩니다.

prettier 를 none 으로 해주세요