0301 초기설정 관련 문서 (eslint, storybook, tsconfig)

[seoko97]

Eslint

installed packages

• eslint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능
• prettier : 코드의 스타일을 잡아주는 포맷팅 기능
• @typescript-eslint/eslint-plugin : Typescript 관련 린팅규칙을 설정하는 플러그인
• @typescript-eslint/parser : Typescript 를 파싱하기 위해 사용
• eslint-config-prettier : prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config
• eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력
• eslint-plugin-react : React에 관한 린트설정을 지원
• eslint-plugin-react-hooks : React Hooks의 규칙을 강제하도록 하는 플러그인
• eslint-plugin-jsx-a11y : JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공
• eslint-plugin-import : ES2015+의 import/export 구문을 지원하도록 함

고민중

• eslint-config-airbnb : airbnb 코딩규칙을 사용(리액트 코딩규칙 포함)

import/order

{
  "import/order": [
    "error",
    {
      // 각 그룹별로 모듈 순서를 정의
      "groups": ["builtin", "external", "parent"],
      // pathGroups: import 경로를 정규식으로 정의하여 그룹화
      "pathGroups": [
        {
          // pattern: 해당 패턴에 해당하는 모듈을 그룹화
          "pattern": "react*",
          // group: 그룹의 이름을 지정
          "group": "builtin",
          // position: 그룹의 위치를 지정 (해당 그룹에 앞, 뒤를 지정)
          "position": "before"
        },
        {
          "pattern": "@emotion/*",
          "group": "external"
        }
      ],
      // pathGroupsExcludedImportTypes: 구성된 pathGroup에서 처리하지 않는 가져오기 유형을 정의
      "pathGroupsExcludedImportTypes": ["builtin"],
      // alphabetize: import를 알파벳 순서로 정렬
      "alphabetize": {
        // order: 알파벳 순서를 지정 (asc: 오름차순, desc: 내림차순)
        "order": "asc",
        // caseInsensitive: 대소문자 무시 여부
        "caseInsensitive": true
      },
      "newlines-between": "never"
    }
  ]
}

참고

React + Typescript eslint, prettier설정

---

Storybook

공식문서

링크

vite 설정

• Storybook은 기본적으로 cra를 기반으로 동작하여 webpack을 사용한다.
• 따라서 vite에 대한 설정이 필요하다.

npx storybook init
npm install @storybook/builder-vite --save-dev

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
  },
};

reect-query 설정

링크

addon 설정

링크

공식문서

tsconfig

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    // ts파일내 js가져오기 허용
    "allowJs": false,
    // 기본 라이브러리 확인 건너뛰기
    "skipLibCheck": true,
    // esModuleInterop: CommonJS 형식의 모듈 가져오기를 ES6 형식의 모듈 가져오기로 변환
    // require('react') 대신 import React from 'react' 사용
    "esModuleInterop": true,
    // allowSyntheticDefaultImports: import React from 'react' 대신 import React from 'react' 사용
    "allowSyntheticDefaultImports": true,
    // strict: 엄격모드
    "strict": true,
    // forceConsistentCasingInFileNames: 파일명의 대소문자를 일관성있게 유지
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  }
}