[React] ESLint와 Prettier 설정하기 (++TypeScript)

잊기전에 기록하기

TypeScript 기반 React에서 ESLint와 Prettier 설정법

1. 프로젝트 생성
   ( 진행하던 프로젝트에서 설정할 경우 충돌이 날 수 있으니 프로젝트 시작전! 설정하자)
   

npx create-react-app my-app --template typescript

2. ESLint와 Prettier 설치

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier prettier

3. ESLint 설정


프로젝트 루트 폴더에 .eslintrc.js를 생성 후 다음 내용 추가

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

4. Prettier 설정


프로젝트 루트 폴더에 .prettierrc 생성 후 다음 내용 추가

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

++ 패키지 의존성 버전 충돌 해결


에러 메세지
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve


등등,,,

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier prettier --legacy-peer-deps

리액트 프로젝트 셋팅시에는 최신 버전이 설치되어서 라이브러리가 호환이 안 될때가 있다. --force 또는 --legacy-peer-deps : 를 사용 해주면 해결이 된다.

5. Delete ␍eslintprettier/prettier 오류 해결
   ␍ 문자는 줄 바꿈 문자의 특수한 형태 중 하나이므로 간단한 설정을 통해 해결 할 수 있다.
   .eslintrc.js 파일 수정

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
}

ESLint설정화 Pretteir 설정에 대한 많은 글이 나와 있는데 너무 많은 정보가 있어 첫 설정 당시 더욱 힘들었던 것 같다

더 이상 방황하는 사람들이 없기를 !