inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

CSS Modules

eslint를 추가하였지만 동작을 안합니다.

191

조준희

작성한 질문수 4

0

'react/self-closing-comp': 'warn' 해당 문구를 추가했음에도 동작하지 않습니다. 재부팅도 해보았습니다만 동작하지 않습니다.

제가 잘못한 것이 있을까요?

image.pngimage.pngimage.pngimage.png

 

react React-Context react-router tailwindcss react-query eslint

답변 3

0

짐코딩

안녕하세요 🙂

VSCode 에서 Lint 오류를 표시하기 위해서는 ESLint 플러그인 설치해야 하는데요 설치하셨을까요?

그리고 eslint.config.js 는 ESLint 가 버전업이 되면서 (v8 -> v9) 변경된 사항이에요~! 잘못된건 아닙니다~!
버전관련 참고영상

0

조준희

image.png

이것이 설치되어 있는데 ESLint 플러그인이 이것과 다른걸까요?

0

짐코딩

네! 제가 말씀드린 ESLint 플러그인이 맞아요!

이게 설치가 되어 있다면 .vscode/settings.json 파일에

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

이러한 설정도 하셨을까요?

https://gymcoding.notion.site/ESLint-Prettier-8cc120bb2d994f79b57674464a803158

0

조준희

네 설정도 다 되어있습니다. 라이브러리 다운 받는 순서가 문제인지 처음 프로젝트를 구성할 때 어떨 때는 되고 어떨 때는 안되고 그러네요

0

짐코딩

순서는 크게 문제 없을 거 같은데요 ㅠ

간헐적으로 되었다 안되었다 하신다니 문제 해결이 쉽지 않네요ㅜ

우선 되는 시점 안되는 시점에 어떤 문제인지 파악하는 게 중요할 거 같은데요.

참고할 만한 강의 무료쿠폰 보내드릴게요~!

최신 Vue 3 완벽 가이드

해당 강의는 Vue 3 최신 버전에 대한 강의인데요 해당 강의에 ESLint v9 & Prettier 최신 설정에 대한 내용이 포함되어 있으니 참고하시면 될 것 같습니다.
제 메일주소로 메일 주시면 무료쿠폰 보내드릴게요~!
메일주소 확인

 

0

조준희

.eslintrc.js 또는 .esilntrc.json이 아니라 eslint.config.js 파일이 생성되던데 잘못된건가요?

npm install eslint-plugin-react --save-dev 해도 안되네요

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 준희님, ESLint 관련 문제로 문의 주셔서 감사합니다.

현재 문제가 되는 부분, react/self-closing-comp 규칙이 동작하지 않는다면, 몇 가지 확인해야 할 항목이 있습니다.

문제 해결을 위한 단계:

  1. ESLint 설정 파일 재확인: ESLint 설정 파일(.eslintrc.js 또는 .eslintrc.json)에 react 플러그인이 포함되어 있는지, 그리고 플러그인 미설치 여부를 확인하세요. 다음과 같은 형태로 설정 파일에서 플러그인을 확장하고 있는지 점검합니다.
   {
     "extends": [
       "plugin:react/recommended"
     ],
     "plugins": [
       "react"
     ],
     "rules": {
       "react/self-closing-comp": "warn"
     }
   }
  1. 플러그인 설치 상태 점검: eslint-plugin-reactnode_modules에 설치되어 있는지 확인해 주세요. 설치가 되지 않았다면 다음 명령어로 설치합니다:
   npm install eslint-plugin-react --save-dev
  1. Lint 스크립트 실행: npm run lint 명령어를 사용하여 다시 ESLint를 실행해 보세요. ESLint의 출력에서 문제를 정확히 확인할 수 있습니다.

  2. React 버전 및 코드 상태 확인: 최신 리액트 버전을 사용하고 있다면, 해당 규칙이 변경되었을 가능성도 존재합니다. 직접 코드가 잘 작성되어 있는지 다시 한 번 검토하시는 것도 도움이 될 수 있습니다.

관련 질문은 다음 게시글에서도 다루고 있습니다:
- eslint 설정 관련 문의
- eslint 세팅 방법 가이드

이 게시글들은 ESLint 설정과 관련된 다양한 솔루션을 제공하고 있으니 참고하시길 바랍니다.

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

오타?

0

27

1

뭐하나 여쭤봐도 될까요?

0

70

1

안녕하세요 질문이 있습니다.

0

55

2

질문 : 삭제 버튼 아규먼트 (id)

0

50

1

Tailwind 버전 확인

0

62

1

align-items 정렬

0

50

2

vite 명령어로 프로젝트를 만들었습니다. (vscode)

0

79

1

31. 객체 업데이트 하기 - 10:15 질문

1

55

2

강의교안, 내용 인용해서 블로그 글 작성

1

80

2

이미지가 출력되지 않아요

1

73

2

강의와 만들어진 코드가 달라요

0

76

3

AI와 CSS 라이브러리의 궁합

0

95

1

onClick 이벤트에 함수 넘길 때

0

64

1

린캔버스 기능 구현은 왜 못하나요.... 구현하고 싶습니다...

0

101

1

notes 없음 읽기 오류

0

72

1

Object.assign 문법

0

64

1

react-router 전혀 기능 안함

0

53

1

react-router-dom@6.25.1

0

47

1

React Router 최신 스펙

0

207

1

Immer 에서 filter, map 사용

0

54

1

vite 설치에 대해 질문있습니다.

0

76

2

라이브러리 버전 일치 이슈

0

76

1

"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다

0

49

2

TotalCounter을 작성할때

0

65

2