VS Code 개발 환경 최적화

Rails 애플리케이션의 개발 환경을 표준화하고 효율성을 높이기 위해 .vscode 폴더 내의 extensions.json과 settings.json 파일을 활용하는 것이 중요합니다. 이 파일들은 프로젝트를 처음 접하는 개발자에게 권장 확장 기능을 자동으로 제안하고, 프로젝트 전반에 걸쳐 일관된 개발 설정을 적용할 수 있도록 돕습니다.

주요 권장 VS Code 확장 기능

다양한 확장 기능들이 Ruby on Rails 개발 워크플로우를 크게 개선할 수 있습니다.

• Prettier: CSS 및 JavaScript 파일의 코드 스타일을 자동으로 포맷팅하여 일관성을 유지합니다. settings.json을 통해 포맷팅 규칙을 세밀하게 조정할 수 있습니다.

• Tailwind CSS IntelliSense: Tailwind CSS 클래스에 대한 자동 완성, 구문 강조 및 호버 시 CSS 정의 표시 기능을 제공하여 개발 속도를 향상시킵니다.

• Headwind: Tailwind CSS 클래스의 순서를 의견 지향적인 방식으로 자동 정렬하여 클래스 정의의 일관성을 유지합니다.

• GitLens: 코드 라인별 Git 이력(최종 편집 시점, 작성자, 커밋 메시지)을 시각적으로 표시하여 코드 변경 사항 추적 및 이해를 용이하게 합니다.

• Ruby LSP: Ruby 언어 서버 프로토콜을 지원하여 코드 완성, 정의 이동, 오류 진단 등 풍부한 Ruby 개발 기능을 제공합니다.

• ERB Formatter: ERB(Embedded Ruby) 파일의 포맷팅을 지원합니다. 이 기능을 사용하려면 erb_formatter gem이 설치되어 있어야 합니다.

• GitHub Copilot & Copilot Chat: AI 기반의 코드 자동 완성 및 채팅 기능을 통해 개발 생산성을 높입니다. (VS Code에 특화되어 있으며, 다른 IDE에서는 비권장)

• Stimulus LSP: Stimulus 컨트롤러 작성 시 자동 완성 및 유효성 검사 기능을 제공하여 Stimulus 개발을 지원합니다.

• VSCode RuboCop: RuboCop을 VS Code에 통합하여 Ruby 코드의 스타일 및 품질 검사를 수행하고, 저장 시 발견된 문제를 자동으로 수정합니다.

자동 포맷팅 설정 및 활용

코드 일관성을 유지하는 가장 효과적인 방법 중 하나는 ‘Format on Save’ 기능을 활용하는 것입니다.

• Format on Save 활성화: VS Code 설정에서 Editor: Format On Save 옵션을 활성화하고, settings.json 파일에 각 포맷터에 대한 editor.formatOnSave: true 설정을 추가하여 파일을 저장할 때마다 자동으로 포맷팅되도록 합니다.

• 포맷팅 없이 저장: 특정 상황(예: Git diff를 깔끔하게 유지하고 싶을 때)에서는 포맷팅 없이 파일을 저장해야 할 수 있습니다. 이 경우, VS Code의 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)에서 ‘Save without Formatting’ 명령을 사용하여 포맷팅을 적용하지 않고 파일을 저장할 수 있습니다.