리액트 vscode Failed to load jshint library. 에러 처리 방법

리액트 VSCode "Failed to load jshint library" 에러 처리 방법

서론

최근에 새로운 노트북에 Visual Studio Code (VSCode)를 설치하고, 리액트를 개발하던 중 "Failed to load jshint library. Please install jshint in your workspace folder using 'npm install jshint' and then press Retry." 에러 메시지가 출력되는 상황을 겪었습니다. 처음에는 인터넷에서 많이 나오는 대로 jshint를 설치하려고 시도했지만, 그 결과 엄격한 경고와 불필요한 간섭을 겪게 되었습니다. 이번 포스팅에서는 이 문제의 해결 방법을 소개하겠습니다.

본론

VSCode에서 이 "Failed to load jshint library" 에러가 발생하는 이유는, 기본적으로 VSCode가 내장하고 있는 jshint와 사용자가 전역으로 설치한 jshint 간의 충돌 때문입니다.

The extension looks for a jshint module in the current directory and in the global package location.

이로 인해 JSX 문법이나 ES6 문법을 포함한 일반적인 자바스크립트 코드에 대해서도 지나치게 엄격한 경고와 규칙이 적용되어 개발 편의성이 떨어지게 됩니다.

내가 순수한 자바스크립트를 구현하고 있다면 모를까, 리액트를 사용한다면 JSX문법에 대해서 간섭하기 시작하고 심지어는 ES6 문법에 대해서도 "너 그렇게 쓰면 안 돼!"를 연발해댄다.

해결 방법

1. jshint Uninstall
   • 기본적으로 설치된 jshint를 삭제합니다. 터미널에서 다음 명령어를 실행합니다.

     npm uninstall jshint -g

   • 이렇게 하면 jshint가 전역에서 삭제되며, VSCode의 확장 프로그램에서 더 이상 jshint를 찾지 못해 "Failed to load jshint library" 에러가 발생하지 않습니다.
2. ESLint 사용
   • jshint 대신 ESLint를 사용하면 더 편리하게 자바스크립트 코드를 검사할 수 있습니다. ESLint는 확장성이 뛰어나고, 커스터마이징이 용이한 도구로서 다양한 프로젝트에 적용할 수 있습니다.
   • ESLint를 설치하려면 프로젝트 폴더에서 다음 명령어를 실행합니다.

     npm install eslint --save-dev

   • VSCode 확장 프로그램에서 ESLint를 검색하여 설치하고, 프로젝트에 맞는 규칙을 설정합니다.
3. VSCode 설정 변경
   • VSCode에서 ESLint를 기본 Linter로 설정하면 "Failed to load jshint library" 에러가 발생하지 않습니다. 설정 변경을 위해 다음 단계를 따릅니다.
   • 먼저, VSCode 설정으로 이동합니다. (File -> Preferences -> Settings)
   • 검색 창에서 "eslint.validate"를 입력하고, "Edit in settings.json"을 클릭합니다.
   • "eslint.validate": "javascript" 라인을 추가하여 자바스크립트 파일에만 ESLint가 적용되도록 설정합니다. (기본적으로 .js 파일에만 적용됩니다)
   • 설정을 저장하고 VSCode를 재시작합니다.

결론

"Failed to load jshint library" 에러를 해결하기 위해 jshint를 강제로 설치하는 것은 지양해야 합니다. 대신, jshint를 삭제하고 ESLint로 대체하는 것이 더 좋은 방법입니다.

굳이 설치돼 있는 JShint를 Uninstall할 필요는 없다. 다만, disabled를 시켜줄 뿐이다.

ESLint는 더 많은 확장성과 커스터마이징 가능성을 제공하며, 개발자들이 더 효율적이고 편리하게 코드를 검사하고 개발할 수 있도록 도와줍니다.

참고 자료

• ESLint 공식 웹사이트
• VSCode ESLint 확장 프로그램

---

이 포스팅에서는 "Failed to load jshint library" 에러를 해결하는 방법으로 jshint를 삭제하고, ESLint를 사용하도록 권장했습니다. 이로써 개발환경에서 보다 원활하게 리액트 프로젝트를 개발할 수 있게 되었습니다. ESLint를 활용하면 코드 품질을 향상시키고, 불필요한 경고를 최소화하며, 개발자들이 더 나은 개발 경험을 할 수 있습니다.