eslint 설정 및 규칙 정해보기

[dgd03146]

ESLint 룰 정해보기

Nextjs Eslint

Next.js는 기본적으로 'Strict' 설정을 제공한다.
Next.js의 기본 ESLint 설정은 이미 충분히 괜찮다는 의견 (feat: 공식문서)

아래의 룰들이 모두 eslint-config-next에서 사용됨

유명한 eslint Airbnb 설정

• 매우 엄격함.
• 과도한 설정으로 불편함을 느낄수도 있음.
• Airbnb 조직이 정한 코딩 스타일 가이드를 따라야하는 단점

Biome

장점

• 사용해봤는데 사용경험이 좋았음. rust 기반이라 속도가 빠름. 직접적으로 비교는 안 해봤지만 체감상 엄청 빠르다고 느껴짐
• Prettier와 비교했을 때 약 35배 더 빠른 처리 속도
• 린팅과 포매팅을 하나의 도구로 통합

단점

• 다른 툴들에 비해 기능 제한 - 일부 타입 인식 린팅 부재, 플러그인 미지원
• 커스텀 룰 작성 어려움
• 커뮤니티가 작음, 프로젝트 초기단계.

기본 룰 외에 추가적으로 고려해볼만한 Eslint 룰

• Type vs Interface
• 미사용 import 자동 제거
• 선언문 vs 표현식
• Named export vs default export
• 식별자 컨벤션
• Type import시 키워드 강제
• 웹 접근성 규칙
• React 훅 관련 규칙
• 테일윈드 CSS 규칙

❗제안 (의견주시면 감사하겠습니다)

1. 일단 Next.js의 'Strict' 설정으로 시작하기 + 팀 합의하에 점진적 추가
2. 또는 우아한 형제들처럼 microsoft rushstack패키지 활용 + 팀 합의하에 점진적 추가
3. Biome 활용하기 + 팀 합의하에 점진적 추가
   플러스로 고려해볼만한 Eslint 룰 얘기해보고 싶습니다.

[choi1five]

@dgd03146 eslint관련 다양한 제안들을 해주셔서 감사합니다!☺️

현재 코드 컨벤션 관련 논의가 부족하기도 해서 auto fix가 가능한 부분에 대해서는 가급적 많은 적용을 하는 것이 좋지 않을까 생각이 드네요.
이를 통해 개발 생산성도 높일 수 있을 것 같네요!

추가로 컨벤션 가이드 문서를 어떤 방식으로 제공하면 좋을지도 함께 이야기해보면 좋을 것 같아요.

추가 제안

Plugin

• import sort 관련 (eslint-plugin-simple-import-sort)
• 폴더, 파일 네이밍 관련 (eslint-plugin-check-file)

Rule

• 말씀해주신 eslint-plugin-react 내에도 jsx-sort-props 같은 유용한 rule들이 많이 있더라구요. 이것들도 함께 검토해보면 좋을 것 같습니다!