Monaco Editor에 Prettier 포맷터를 통합하여 에디터 내에서 단축키를 통해 코드 포맷팅 기능 추가

[Bori-github]

📌 요약

• Monaco Editor에 Prettier 포맷터를 통합하여 에디터 내에서 단축키를 통해 코드 포맷팅 기능 추가

📝 작업 내용

• Prettier 포맷터 통합
  • prettier/standalone과 플러그인(babel, estree)을 사용하여 브라우저 환경에서 Prettier 실행
  • Monaco Editor의 registerDocumentFormattingEditProvider API를 사용하여 JavaScript 언어에 대한 포맷터 등록
  • 에디터의 "Format Document" 기능을 Prettier로 대체
• 단축키 추가
  • Cmd+Shift+F: 문서 전체 포맷팅 실행
• Prettier 설정
  • apps/executeJS 내 .prettierrc 설정과 동일하게 적용

🔍 스크린샷

2025-11-04.3.15.53.mov

💡 참고 사항

• 코드 실행 시 포맷터 기능 넣지 않은 상태
  • 코드 실행 시 포맷터 기능 적용 시도했으나, 포맷터 동작하나 포맷팅 된 코드가 로컬스토리지에 저장되지 않아 확인 필요

[Copilot]

Pull Request Overview

This PR integrates Prettier code formatting into the Monaco code editor widget, enabling automatic code formatting with a keyboard shortcut.

• Imports Prettier standalone library with Babel and ESTree plugins
• Registers a Monaco document formatting provider that formats code using Prettier
• Adds Cmd+Shift+F keyboard shortcut to trigger code formatting

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ohah]

기능 추가되면 docs에도 같이 설명 추가하고 이러면 더 조을것 같아요

[Bori-github]

@ohah 형배님 포맷팅 runjs처럼 settings 기능으로 제공할거에요?

[ohah]

@ohah 형배님 포맷팅 runjs처럼 settings 기능으로 제공할거에요?

넴

[Bori-github]

@ohah 그럼 settings에 포맷팅 기능 추가되면 docs에 내용 추가할게요!