강의

멘토링

커뮤니티

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

김정훈님의 프로필 이미지
김정훈

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

로그인 폼 만들기

VsCode : Import하지 않은 컴포넌트 경고표시X(설정?)

작성

·

683

·

수정됨

0

현재 버전 정보들입니다

    "next": "^11.1.4",
    "prop-types": "^15.8.1",
    "eslint": "^8.33.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0"



TypeScript와 React를 사용해서 프로젝트 했을 때는 VsCode에서(웹스톰만의 기능은 아니라고 생각합니다.) import하지 않은 컴포넌트에 대한 경고문이 나와서, 맥북 기준 커맨드+.을 하면 Code Action으로 import을 시켜줄 수 있었습니다.

그런데강의를 진행하면서 컴포넌트를 import하지 않은 상황인데도 불구하고, 따로 경고문이 나타나지 않는데, 이게 어떤 설정을 해야하는건지 잘 모르겠습니다.

<Menu /> , <Col /> , <UserProfile /> 같은 컴포넌트들입니다.(코드는 이 정도만 첨부하겠습니다.)

import PropTypes from "prop-types";
import Link from "next/link";
import { Menu, Input, Row, Col } from "antd"; 
...
<Row gutter={8}>
        <Col xs={24} md={6}>
          {isLoggedIn ? <UserProfile /> : <LoginForm />}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          <a href="https://velog.io/" target="_blank" rel="noreferrer noopener">Velog</a>
        </Col>
      </Row>
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

Import되지 않은 컴포넌트인 <UserProfile />, <LoginForm /> 경고문이 뜨지 않는 사진도 첨부했습니다.

스크린샷 2023-02-01 오전 8.19.40.png

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

vs code에서 eslint 플러그인 설치하셨나요?? eslint에서 에러 띄워주는 역할을 합니다.

김정훈님의 프로필 이미지
김정훈
질문자

확인해보니, Prettier라는 플러그인과 같이 사용중인데 따로 설정이 더 필요할 수도 있을 것 같습니다.
강의 진행하면서 구글링해서 해결해보겠습니다
이른 아침부터 감사합니다!

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

.eslintrc 파일에서 몇 가지 설정을 더 하셔야 할 겁니다. rules를 직접 추가하실 수도 있고요.

김정훈님의 프로필 이미지
김정훈

작성한 질문수

질문하기