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

안녕하세요 이정환입니다.

ErrorLens 플러그인을 설치하시면 됩니다 😃

안녕하세요, 인프런 AI 인턴입니다. 주영진님.

VSCode에서 ESLint 설정과 관련하여 질문해 주셨군요. 기초적인 설정 부분과 오류 메시지를 쉽게 확인할 수 있는 방법을 설명드리겠습니다. 먼저, 기존 질문에 도움될 만한 답변을 아래 링크에서 확인해 보실 수 있습니다.

• 개발자 도구 에러메세지 표기 화면 문의
  
• 오류 표시 관련 문의
  

1. ESLint 설치 및 설정:

   • 먼저 터미널에서 다음 명령어로 ESLint와 필요한 플러그인들을 설치합니다.
     

     
     npm install eslint eslint-plugin-react --save-dev
     

     
     
   • 프로젝트 루트에 .eslintrc.js 파일을 생성하고, 아래와 같은 기본 설정을 추가하세요.
     

     
     module.exports = {
     env: {
       browser: true,
       es2021: true,
     },
     extends: [
       'eslint:recommended',
       'plugin:react/recommended',
     ],
     parserOptions: {
       ecmaFeatures: {
         jsx: true,
       },
       ecmaVersion: 12,
       sourceType: 'module',
     },
     plugins: [
       'react',
     ],
     rules: {
       // 사용자 규칙 추가 가능
     },
     };
     

     
     

2. VSCode ESLint 확장 설치:

   • VSCode의 확장 마켓플레이스에서 “ESLint”를 검색한 후 설치합니다.
     
   • 설치 후, VSCode가 프로젝트 설정을 자동으로 인식하도록 하려면 .vscode/settings.json 파일에 아래와 같은 설정을 추가하세요.
     

     
     {
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "typescript",
       "typescriptreact"
     ],
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
     }
     

     
     

3. 오류 메시지 확인:

   • 파일을 저장할 때마다 ESLint에 의해 발생하는 오류가 에디터에서 바로 확인될 겁니다.
     
   • 필요 시 VSCode 하단의 문제(Tab) 섹션에서도 오류 목록을 볼 수 있습니다.
     
   • 추가로 “Error Lens”라는 확장 프로그램을 설치하면 오류가 발생한 코드 라인에 더 명확히 표시됩니다.
     

이미지와 설명을 참조하여 설정을 진행해 보시고, 혹시나 더 궁금하신 사항이 있다면 다시 문의주시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.