[Feat] 프론트엔드 eslint, prettier 세팅

[simeunseo]

관련 이슈 번호

• close [Feat] 프론트엔드 eslint 룰 설정 #116

작업 내용

eslint plugin 확장

• plugin:react/recommended: React 코드의 기본적인 Best Practices 규칙
• plugin:react-hooks/recommended: React Hooks 사용에 대한 규칙
• plugin:jsx-a11y/recommended: 웹 접근성(Accessibility) 관련 규칙
• plugin:react/jsx-runtime: React 17 이상에서 도입된 새로운 JSX Transform을 위한 설정

eslint rule 추가

• 'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }]: 불필요한 중괄호 사용을 방지
• 'react/jsx-boolean-value': ['error', 'never']: JSX에서 boolean props를 축약형으로 사용하도록 강제
• 'no-multiple-empty-lines': ['error', { max: 1 }]: 연속된 빈 줄을 최대 1줄로 제한
• 'import/no-duplicates': 'error': 동일한 모듈의 중복 import를 방지
• 'no-console': 'error': console.log() 등 console 객체 사용을 금지

PR 포인트

개발하면서 필요한 규칙이 있으면 확장해나갈 계획입니다~!

고민과 학습내용

eslintrc에서 extends와 plugins의 차이

1. extends

• 미리 정의된 규칙들의 집합을 활성화
• 플러그인의 recommended 설정이나 다른 설정 파일들을 확장
• 실제로 규칙들을 켜고 적용하는 역할

2. plugins

• 플러그인을 불러오기만 하는 것
• 실제 규칙들은 아직 활성화되지 않은 상태
• 플러그인이 제공하는 규칙들을 사용할 수 있게 해주는 "도구 상자"를 가져오는 개념

스크린샷

[begong313]

👍🏿