에디터 설정
적절하게 구성된 에디터는 코드를 더 명확하게 읽고 더 빠르게 작성할 수 있게 해줍니다. 심지어 버그를 작성하는 즉시 잡아내는 데 도움을 줄 수도 있습니다! 에디터를 처음 설정하거나 현재 에디터를 조정하려는 경우 몇 가지 권장 사항이 있습니다.
배울 내용
- 가장 인기 있는 에디터는 무엇인지
- 코드를 자동으로 포맷하는 방법
에디터 선택
VS Code는 현재 가장 널리 사용되는 에디터 중 하나입니다. 방대한 확장 프로그램 마켓플레이스를 보유하고 있으며 GitHub와 같은 인기 서비스와 잘 통합됩니다. 아래에 나열된 대부분의 기능은 확장 프로그램으로 VS Code에 추가할 수 있어 매우 구성 가능합니다!
React 커뮤니티에서 사용되는 다른 인기 있는 텍스트 에디터는 다음과 같습니다:
- WebStorm은 JavaScript에 특화된 통합 개발 환경입니다.
- Sublime Text은 JSX와 TypeScript를 지원하며,구문 강조및 자동 완성 기능이 내장되어 있습니다.
- Vim은 모든 종류의 텍스트를 매우 효율적으로 생성하고 변경할 수 있도록 설계된 고도로 구성 가능한 텍스트 에디터입니다. 대부분의 UNIX 시스템과 Apple OS X에 "vi"로 포함되어 있습니다.
권장 텍스트 에디터 기능
일부 에디터는 이러한 기능이 내장되어 있지만, 다른 에디터는 확장 프로그램을 추가해야 할 수 있습니다. 선택한 에디터가 제공하는 지원을 확인하여 확실히 하세요!
린팅
코드 린터는 작성 중인 코드의 문제를 찾아 조기에 수정할 수 있도록 도와줍니다.ESLint는 JavaScript용으로 널리 사용되는 오픈 소스 린터입니다.
프로젝트에 eslint-plugin-react-hooks의 모든 규칙을 활성화했는지 확인하세요.이 규칙들은 필수적이며 가장 심각한 버그를 조기에 발견하는 데 도움을 줍니다. 권장eslint-config-react-app프리셋에는 이미 이 규칙들이 포함되어 있습니다.
포맷팅
다른 기여자와 코드를 공유할 때 가장 원하지 않는 것은 탭 대 공백에 대한 논쟁에 휘말리는 것입니다! 다행히도Prettier는 코드를 재포맷하여 미리 설정된 구성 가능한 규칙에 맞춰 정리해 줍니다. Prettier를 실행하면 모든 탭이 공백으로 변환되고 들여쓰기, 따옴표 등도 모두 구성에 맞게 변경됩니다. 이상적인 설정에서는 파일을 저장할 때 Prettier가 실행되어 이러한 편집을 빠르게 수행해 줍니다.
다음 단계에 따라VSCode에 Prettier 확장 프로그램을 설치할 수 있습니다:
- VS Code 실행
- 빠른 열기 사용 (Ctrl/Cmd+P 누르기)
- 다음을 붙여넣기
ext install esbenp.prettier-vscode - Enter 키 누르기
저장 시 포맷팅
이상적으로는 매번 저장할 때마다 코드를 포맷해야 합니다. VS Code에는 이를 위한 설정이 있습니다!
- VS Code에서
CTRL/CMD + SHIFT + P를 누르세요. - "settings"를 입력하세요
- Enter 키를 누르세요
- 검색창에 "format on save"를 입력하세요
- "format on save" 옵션이 체크되어 있는지 확인하세요!
ESLint 프리셋에 포맷팅 규칙이 있다면 Prettier와 충돌할 수 있습니다.eslint-config-prettier를 사용하여 ESLint 프리셋의 모든 포맷팅 규칙을 비활성화하고, ESLint가오직논리적 오류를 잡는 데만 사용되도록 하는 것이 좋습니다. 풀 리퀘스트가 병합되기 전에 파일이 포맷팅되었는지 강제하려면, 지속적 통합(CI)에prettier --check를 사용하세요.