eslint-config-airbnb, eslint-plugin-simple-import-sort 사용 이유

< 목차 >

1. eslint-config-airbnb 사용 이유

2. eslint-plugin-simple-import-sort 사용 이유

 

 

1. eslint-config-airbnb 사용 이유

: eslint-config-airbnb는 엄격한 규칙을 기반으로 하고 있지만, 필요에 따라 설정을 커스터마이징하여 팀의 요구에 맞출 수도 있음

 

 

 

최신 JavaScript와 React 프로젝트에 강력한 가이드라인을 제공하는 것이 가장 큰 장점

 

[결론] 사용하는 이유

- 품질 보장: 코드의 안정성과 오류 방지

- 협업 최적화: 팀 간 일관된 코드 스타일 유지

- 최신 기술 지원: React와 ES6+ 규칙 내장

- 생산성 향상: 접근성과 유지보수성 강화

 

 

(1) 엄격하고 일관된 코드 스타일

- Airbnb 스타일 가이드는 엄격한 규칙을 통해 코드 품질과 일관성을 유지

- 협업 시 팀원 간 코드 스타일 차이를 줄이고, 가독성을 높임

- “베스트 프랙티스”를 기본으로 설정하여 코드 작성 시 오류를 방지

 

(2) React 친화적

- React 프로젝트에서 많이 사용되는 React-specific linting rules가 포함되어 있음

- React Hooks 규칙(react-hooks/rules-of-hooks, react-hooks/exhaustive-deps)도 지원하므로, 올바른 방식으로 React 컴포넌트를 작성하도록 도와줌

 

(3) 최신 JavaScript 및 ES6+ 지원

- ES6 이상의 최신 JavaScript 문법을 기반으로 규칙이 설정되어 있음

- 모듈 시스템(import/export), 화살표 함수, 템플릿 리터럴 등 최신 문법을 올바르게 사용하도록 유도함

 

(4) 접근성(a11y) 강화

- eslint-plugin-jsx-a11y를 포함하고 있어, 웹 접근성을 자동으로 검사하고 개선할 수 있음

- 화면 리더, 키보드 내비게이션 등을 고려한 규칙을 제공하여 사용자 경험을 향상시킴

 

(5) 업계 표준

- Airbnb 스타일 가이드는 업계에서 널리 사용되는 사실상의 표준

- 오픈 소스 프로젝트 및 회사 내부 프로젝트에서도 널리 채택되어, 가독성과 유지보수성을 높이는 데 유리

 

(6) 협업 및 코드 리뷰 효율성 향상

- 코드 스타일을 규칙으로 강제하여 리뷰에서 스타일 관련 논쟁을 줄임

- 개발자는 로직에 집중하고, 스타일은 ESLint가 자동으로 검사하도록 설정할 수 있음

 

 

2. eslint-plugin-simple-import-sort 사용 이유

: import 구문을 자동으로 정렬하기 위한 ESLint 플러그인

모듈을 깔끔하게 정렬하여 코드 가독성을 높이고 팀 스타일을 일관되게 유지하는 데 유용하다.

 

import 정렬 규칙

: simple-import-sort는 기본적으로 아래의 순서로 import 구문을 정렬

 

1. 내장 모듈: fs, path 등

2. 외부 모듈: react, lodash 등

3. 내부 모듈: 프로젝트 내부 파일(@/components 등)

4. CSS/Assets: 스타일 및 리소스 파일(./styles.css 등)