에디터 설정

적절하게 구성된 편집기는 코드를 읽기 쉽게 만들어주고 작성 속도를 높일 수 있습니다. 또한 코드를 작성하는 동안 버그를 잡는 데도 도움이 될 수 있습니다! 편집기를 설정하는 것이 처음이거나 현재 편집기를 튜닝하려는 경우 몇 가지 추천 사항이 있습니다.

편집기

VS Code는 오늘날 가장 인기 있는 편집기 중 하나입니다. VS Code는 다양한 확장 프로그램을 제공하며 GitHub와 같은 인기 있는 서비스와도 잘 통합됩니다. 아래에 나열된 대부분의 기능은 VS Code에 확장 프로그램으로 추가할 수 있어 매우 구성 가능합니다!

리액트 커뮤니티에서 널리 사용되는 인기 있는 텍스트 편집기로는 다음이 있습니다.

• WebStorm은 JavaScript에 특화된 통합 개발 환경입니다.
• Sublime Text는 JSX와 TypeScript를 지원하며, 문법 강조 표시와 자동 완성 기능이 내장되어 있습니다.
• Vim은 매우 구성 가능한 텍스트 편집기로, 어떤 종류의 텍스트를 만들고 변경하는 데 효율적으로 사용됩니다. 대부분의 UNIX 시스템과 Apple OS X에서 "vi"로 포함되어 제공됩니다.

추천하는 텍스트 편집기 기능

일부 편집기는 이러한 기능이 내장되어 있지만, 다른 편집기는 확장 프로그램을 추가해야 할 수도 있습니다. 원하는 편집기가 어떤 지원을 제공하는지 확인하십시오!

린팅

코드 린터는 코드를 작성하는 동안 문제를 찾아 조기에 수정할 수 있게 도와줍니다. ESLint는 JavaScript를 위한 인기 있는 오픈 소스 린터입니다.

1. 리액트를 위한 권장 구성을 사용하여 ESLint를 설치하세요 (Node가 설치되어 있는지 확인하세요!)
2. VS Code에서 공식 확장 프로그램을 사용하여 ESLint를 통합하세요.
3. 프로젝트에 eslint-plugin-react-hooks 규칙이 모두 활성화되어 있는지 확인하세요. 이 규칙은 중요하며 가장 심각한 버그를 조기에 잡아냅니다. 권장 eslint-config-react-app 프리셋에 이미 포함되어 있습니다.

포맷팅

다른 기여자와 코드를 공유할 때 탭 대 공백에 대한 논쟁에 빠지지 않으려면 코드를 정리하는 것이 가장 좋습니다! 다행히 Prettier는 사전 구성된 규칙에 따라 코드를 재서식화하여 정리해줍니다. Prettier를 실행하면 모든 탭이 공백으로 변환되고 들여쓰기, 따옴표 등도 구성에 맞게 변경됩니다. 이상적인 설정에서는 파일을 저장할 때마다 Prettier가 실행되어 이러한 편집을 빠르게 수행합니다.

다음 단계를 따라 VS Code에 Prettier 확장 프로그램을 설치할 수 있습니다.

1. VS Code를 실행하세요.
2. 빠른 열기 기능을 사용하세요 (Ctrl/Cmd+P를 누르세요).
3. ext install esbenp.prettier-vscode을 붙여넣으세요.
4. Enter를 누르세요.

저장 시 포맷팅

이상적으로, 코드를 저장할 때마다 포맷팅을 해야 합니다. VS Code에는 이를 위한 설정이 있습니다.

1. VS Code에서 CTRL/CMD + SHIFT + P를 누르세요.
2. "settings"을 입력하세요.
3. Enter를 누르세요.
4. 검색 창에 "format on save"를 입력하세요.
5. "format on save" 옵션이 선택되어 있는지 확인하세요!

ESLint 프리셋에 포맷팅 규칙이 있는 경우 Prettier와 충돌할 수 있습니다. ESLint 프리셋의 모든 포맷팅 규칙을 eslint-config-prettier를 사용하여 비활성화하는 것을 권장합니다. 이렇게 하면 ESLint는 논리적인 실수를 잡는 데만 사용되고 파일이 병합되기 전에 포맷팅이 적용되도록 강제할 수 있습니다.