CRA(TypeScript), ESLint, Prettier, Styled-Components, Material UI

kimub1204·2022년 5월 24일
0

개발 환경

목록 보기
1/1

CRA(TypeScript)

npx create-react-app@latest 'Project Name' --template typescript

ESLint

VSCode Extension ESLint 설치

npm ESLint, 패키지 설치

npx install-peerdeps --dev eslint-config-airbnb

eslint-config-airbnb 패키지는 airbnb ESLint 규칙을 제공하고 아래 6개의 패키지들을 필수로 제공한다.

  • eslint
  • eslint-config-airbnb
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react
  • eslint-plugin-react-hooks

TypeScript 관련 패키지 설치

  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser

.eslintrc.js 파일 생성

module.exports = {
  env: {
    browser: true,
    commonjs: true,
  },
  extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'import/prefer-default-export': 0,
    'prettier/prettier': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0,
    'no-shadow': 0,
    'react/prop-types': 0,
    'react/jsx-filename-extension': [
      2,
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
    'jsx-a11y/no-noninteractive-element-interactions': 0,
  },
};

Prettier

VSCode Extension Prettier 설치

ESLint와 Prettier 충돌방지 설정

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

  • eslint-config-prettier
    Prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시킨다.
  • eslint-plugin-prettier
    Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력한다.

.prettierrc.js 파일 생성

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 80,
  arrowParens: 'avoid',
  endOfLine: 'auto',
};

Styled-Components(TypeScript)

npm Styled-Components 설치

npm i styled-components

  • styled-components
    npm i -D @types/styled-components
  • @types/styled-components

styled-components, @types/styled-components 두 개 다 설치해 줘야 사용할 수 있음

Material UI

npm i @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc

Material UI에서 Styled-Components를 사용하려면 emotion/react, @emotion/styled도 추가로 설치해줘야 한다.

이유는 기본적으로 @mui/styled-engine이 emotion 래퍼이기 때문에 스타일드 컴포넌트를 사용하는 경우 @mui/styled-engine-sc를 사용하는데요, 이러면 @mui/material 디펜던시로 @mui/styled-engine를 가지고 있기 때문에 @emotion/react 즉 이모션 설치가 필요하다고 한다.

package.json 코드 추가

{
  "dependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  },
}

tsconfig.json 코드 추가

"paths": {
  "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
}

참고

ESLint, Prettier 1
ESLint, Prettier 2
ESLint, Prettier 3
ESLint, Prettier 4
Material UI install
Material UI styled-engine
Styled-Components에 TypeScript 적용
Material UI v5 변경점
Styled-Components, Materi UI 사용하기

profile
안녕하세요~

0개의 댓글