프론트엔드와 백엔드 개발을 위한 Eclipse와 Visual Studio Code 파일 연동 방법

23년 11월 9일 작성

---

 

하는 이유:
프론트엔드와 백엔드 개발을 함께 수행하다 보면, 두 가지 통합 개발 환경(IDE)을 사용해야 할 때가 있음.
백엔드 작업할 때는 Eclipse를 쓰고 프론트엔드 작업을 할 땐 더 편한 vscode를 쓰기 위해서.
vscode에서 작성한 코드는 eclipse에도 자동 저장됨.

---

eclipse > window > preferences > general > editors > File Associations

연동할 확장자 파일 선택(ex: .html, .css, .js).
원하는 확장자가 없다면 add를 클릭해서 새 확장자 추가 가능. (ex: .html)
하단의 Associated editors 옆의 Add 버튼을 눌러서 외부 프로그램 추가.

Editor selection 창이 뜨면 External programs으로 선택한 후, "visual studio code 원본 파일"을 선택한다. apply and close 클릭하여 창을 닫는다.

이제 Eclip
Preference > Workspace에서 상단의 "Refresh using native hooks or polling" 체크.
Apply and Close 버튼 클릭.
("Refresh using native hooks or polling"은 Eclipse의 파일 시스템 업데이트 방법을 설정하는 옵션이다. 이 설정은 Eclipse가 프로젝트 내의 파일 변경을 주기적으로 감지하고 그에 따라 프로젝트를 자동으로 업데이트한다.
이 설정은 파일 시스템 업데이트가 실시간으로 이루어져 하는 경우에 사용. 예) 다른 개발자와의 협업 프로젝트에서 파일 변경을 빠르게 동기화하려는 경우 등.)이제 vscode에서 eclipse와 파일을 동기화해야 함.
연동하고 싶은 파일 선택.
오른쪽 마우스 클릭 > Open with >" Visual Studio Code 원본 파일" 클릭

자동으로 vscode가 켜진다.
코드를 작성하고 저장하면 eclipse에도 자동 저장 된다.

지금까지 설명한 설정을 통해 두 개의 IDE 간에 파일을 손쉽게 공유하면서 프론트엔드와 백엔드 작업을 더 효율적으로 관리할 수 있게 됨.