Portfolio

💡

본인이 경험한 문제와 해결과정을 기록하고 공유해주세요.

stories/components/atoms/Container.stories.tsx


// eslint-disable-next-line
import { Container } from '@/components'; // 이 부분 eslint에서 걸림

export default {
  title: 'Components/Atoms/Container',
  component: Container,
};

export const Default = () => {
  return <Container>Hello World!</Container>;
};

vscode prettier 설정 확인

prettierrc대로 포맷팅이 되는지 확인이 필요

조지

settings.json 파일에 아래 내용 추가해주세요

esbenp.prettier-vscode: default prettier 세팅, .prettierrc 파일이 있으면 해당 파일로 prettier가 적용된다.


"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[javascriptreact]":{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

App.tsx


// eslint-disable-next-line
import { Container } from '@/components'; // 이 부분 eslint에서 걸림

const App = function () {
  return (
    <Container>
      <h1>hello, YAS!</h1>
    </Container>
  );
};

export default App;

조지

no-unresolved: import를 절대 경로로 작성했을 때 기존 파일의 경로와 다르다고 인식해서 발생하는 ESLint 에러

ESLint의 rule에 caseSensitive값을 false로 작성해주면 해당 에러를 무시한다.

caseSensitive: 작성된 파일 경로와 실제 파일 경로를 비교해서 다르면 에러를 발생시킨다.(Default: true)

이번 프로젝트 에서는 절대경로를 ./src ⇒ @/ 로 사용해서 해당 옵션을 false로 바꿔도 에러가 발생한다. ⇒ 에러를 무시하기 위해 아래의 코드를 작성한다.


rules: {
    'import/no-unresolved': 0,
  },

yarn start 시 warnigs 해결 필요


src/App.tsx
  Line 4:13:  Missing return type on function  @typescript-eslint/explicit-module-boundary-types

src/components/atoms/Container/Container.tsx
  Line 5:19:  Missing return type on function  @typescript-eslint/explicit-module-boundary-types

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

조지

explicit-module-boundary-types: Typescript로 작성된 함수에 리턴 타입을 작성하지 않으면 발생하는 warning

JSX 코드를 리턴하는 컴포넌트는 ReactElement를 리턴 값으로 명시해주면 된다.


import { ReactElement } from 'react';

const App = function (): ReactElement {
	return <div />
}

TRY