에디터 설정하기
이번 챕터에서는 바나나 프레임워크를 사용하기 위한, 코드 에디터Code Editor를 설정하는 방법에 대해 소개합니다!
적절한 개발 환경은 코드의 가독성 및 개발 속도를 높여주며, 심지어 코드를 작성하는 과정에서 버그를 찾아줄 수도 있습니다! 코드 에디터를 설치하는 것이 이번이 처음이거나, 현재 사용하는 에디터의 설정을 개선하고 싶으시다면, 아래에서 몇 가지를 추천 사항들을 소개합니다.
에디터
VS Code는 가장 많이 사용하는 에디터 중 하나로, 바나나 프레임워크는 VS Code의 사용을 권장합니다! VS Code에 설치할 수 있는 확장Extension의 종류는 무수히 많으며, 깃허브GitHub와 같은 외부 서비스와의 연동도 지원합니다. 아래에서 추천하는 기능들은 대부분 확장Extension으로 존재하며, VS Code의 설정을 다양한 방식으로 쉽게 변경할 수 있습니다.
이외에 자주 사용하는 에디터들은 다음과 같습니다.
- IntelliJ IDEA: 자바스크립트/타입스크립트 스마트 코드 완성, ESLint/Prettier 통합, 디버깅 및 리팩토링 기능을 지원하며, 대규모 프로젝트 개발에 최적화된 환경을 제공합니다.
- Sublime Text: 자바스크립트/타입스크립트를 지원하며, 문법 강조 및 자동 완성 기능을 내장하고 있습니다.
- WebStorm: 자바스크립트/타입스크립트 개발에 특화된 통합 개발 환경입니다.
- Vim: 모든 종류의 텍스트를 효율적으로 생성하고 변경할 수 있는 텍스트 편집기입니다. 대부분의 UNIX 시스템과 Apple OS X에
vi로 포함되어 있습니다.
에디터 기능 추천
아래에서 추천하는 기능들을 기본으로 포함하고 있는 에디터들도 있지만, 별도의 확장Extension 추가가 필요한 경우도 존재합니다. 현재 사용 중인 에디터에서 어떠한 기능들을 지원하는지 한번 확인해 보세요!
주목해주세요!
VS Code 환경에서 create-bananass를 통해 바나나 프레임워크를 설치한 경우, 아래에서 설명하는 모든 기능들을 기본적으로 포함하고 있습니다!
린팅Linting
코드 린터Linter는 정적 분석Static Analysis을 통해, 코드를 작성하는 동안 실시간으로 문제를 찾아 빠른 문제 해결을 도와줍니다. 자바스크립트를 위한 오픈 소스 린터Linter로, ESLint를 가장 많이 사용합니다.
바나나 프레임워크에서 권장하는 ESLint 설정
바나나 프레임워크는 eslint-config-bananass라는 ESLint 설정 파일 패키지를 제공하고 있습니다!
이 패키지는 바나나 프레임워크에서 권장하는 규칙들을 포함하고 있으며, Airbnb JavaScript Style Guide를 기반으로 하여, 실제 개발 환경에서도 사용할 수 있는 설정 파일입니다.
VS Code에서 ESLint 설치하기
다음과 같은 단계를 통해 VS Code의 ESLint 확장Extension을 설치할 수 있습니다.
- VS Code 실행하기
- 퀵 오픈 사용하기 (
CTRL/CMD + SHIFT + P누르기) ext install dbaeumer.vscode-eslint입력하기Enter누르기
저장 시점에 린팅하기
저장할 때마다 코드를 린팅하는 것이 가장 이상적일 것입니다. 이러한 설정은 VS Code에 자체적으로 내장되어 있습니다!
- VS Code에서
CTRL/CMD + SHIFT + P누르기 - "settings" 입력하기
- 엔터 누르기
- 검색 창에서 "format on save" 입력하기
- "format on save" 옵션 체크하기
포맷팅Formatting
다른 개발자들과 협업할 때 가장 피하고 싶은 것은 탭 vs 공백에 대한 논쟁일 것입니다. 다행히 Prettier를 사용하면 직접 지정해 놓은 규칙들에 부합하도록 코드의 형식을 깔끔하게 정리할 수 있습니다. Prettier를 실행하면 모든 탭은 공백으로 전환될 뿐만 아니라 들여쓰기, 따옴표 형식과 같은 요소들이 전부 설정에 부합하도록 수정될 것입니다.
바나나 프레임워크에서 권장하는 Prettier 설정
바나나 프레임워크는 prettier-config-bananass라는 Prettier 설정 파일 패키지를 제공하고 있습니다!
이 패키지는 바나나 프레임워크에서 권장하는 규칙들을 포함하고 있으며, Airbnb JavaScript Style Guide를 기반으로 하여, 실제 개발 환경에서도 사용할 수 있는 설정 파일입니다.
VS Code에서 Prettier 설치하기
다음과 같은 단계를 통해 VS Code의 Prettier 확장Extension을 설치할 수 있습니다.
- VS Code 실행하기
- 퀵 오픈 사용하기 (
CTRL/CMD + SHIFT + P누르기) ext install esbenp.prettier-vscode입력하기Enter누르기
저장 시점에 포맷팅하기
저장할 때마다 코드를 포맷팅하는 것이 가장 이상적일 것입니다. 이러한 설정은 VS Code에 자체적으로 내장되어 있습니다!
- VS Code에서
CTRL/CMD + SHIFT + P누르기 - "settings" 입력하기
- 엔터 누르기
- 검색 창에서 "format on save" 입력하기
- "format on save" 옵션 체크하기