[React 공식 문서] 0-3. 에디터 설정하기

에디터 설정하기

• VS Code: 가장 많이 사용되는 에디터 (+ 익스텐션으로 기능 추가 가능)
• WebStorm: JS에 특화됨
• Sublime Text: JSX와 TS를 지원, 문법 강조 및 자동 완성 기능 내장
• Vim: 모든 텍스트를 효율적으로 생성, 변경할 수 있음

 

 

에디터 기능 추천

린팅 (ESLint)

• 코드를 작성하는 동안 실시간으로 문제를 찾아줌으로써 빠른 문제 해결이 가능하도록 도움
• ESLint: 가장 많이 사용되는 JavaScript를 위한 오픈소스 린터
  • React를 위한 추천 설정과 함께 ESLint 설치하기
  • VSCode의 ESLint를 공식 익스텐션과 통합하기
• 프로젝트의 모든 eslint-plugin-react-hooks 규칙을 활성화했는지 확인하기
  • 가장 심각한 버그를 조기에 발견할 수 있는 옵션
  • (권장되는 eslint-config-react-app 프리셋에는 이미 이 규칙이 포함되어 있음)

 

포매팅 (Prettier)

• 모든 탭이 공백으로 전환되고, 따옴표 형식 등의 요소를 설정에 부합하도록 수정해줌
• Prettier 사용
• VS Code의 Prettier 익스텐션 설치하기
  1. VS Code 실행 후 퀵오픈 (Ctrl + p)
  2. ext install esbenp.prettier-vscode 입력 후 엔터
• 저장 시점에 포매팅하도록 설정하기
  1. VS Code 실행 후 Ctrl + Shift + p
  2. settings 입력 후 엔터
  3. 검색 창에 format on save 입력 후 옵션 체크 (활성화)
• 이미 작성된 파일에 프리티어 적용하기

npx prettier-check [파일 경로]

 

ESLint와 Prettier의 충돌

• 상황: ESLint 프리셋에 포매팅 규칙이 존재할 때 Prettier와 충돌 일어날 수 있음
• 해결: ESLint가 오직 논리적 실수를 잡는 데만 사용되도록 eslint-config-prettier을 사용해 ESLint 프리셋의 모든 포매팅 규칙을 비활성화