본문 바로가기

IT/IT Tips

이클립스(Eclipse) 자바스크립트 에디터 설정하는법

728x90
반응형
728x170

오늘은 이클립스(Eclipse) IDE를 사용할 때 자바스크립트(javaScript) 에디터를 사용하는 법에 대하여 짧고 간단하게 포스팅해보고자 합니다.

 

해당 환경의 스크린샷 등은 STS(Spring Tool Suite 4 Version)에서 진행하였지만 

이클립스 환경일때도 세팅법은 동일하기 때문에 따라서 해주시면 됩니다.

 

이클립스로 프로젝트를 진행하다 보면 가끔 나는 분명히 .JS 파일을 OPEN 하였지만

아래와 같이 아무런 에디터스러움 없이 그냥 흰 배경에 검정색 글자로만 주르륵 쓰여있고

자동완성이나 변수명, 함수명, 예약어 등에 기본 색표기 등이 전혀 없는 경우를 마주할 때가 있습니다.

 

[자바스크립트 에디터 설정 전]

이클립스 자바스크립트 에디터 설정 전

 

[자바스크립트 에디터 설정 후]

이클립스 자바스크립트 에디터 설정 후

 

이때 해당 파일을 잘 보시면 아래와 같이 기본 Text Editor로 열린 것을 알 수 있습니다.

 

이클립스 기본 Text Editor

 

 

이럴 때 이클립스 IDE에서 자바스크립트 에디터 설정을 해주면 자바스크립트에 맞춰진 하이라이트 처리 등이 진행되어 자바스크립트(JS) 개발을 할 때 다소 편하게 작업이 가능한 환경이 세팅됩니다.

 

 

간단하게 설정하는 법은 아래와 같습니다.

 

 

[1]. 가장 간단하게 해당 파일 1개만 JS Editor로 OPEN 하는 방법은 간단합니다.

- JS Editor 로 열고 싶은 파일을 마우스 오른쪽 클릭합니다.

- 오른쪽 메뉴에서 Open With 메뉴에 마우스를 올리면 옆에 메뉴가 더 생깁니다.

- 해당 메뉴에서 Generic Text Editor를 클릭하면 해당 .JS 파일이 JS Editor로 열립니다.

 

이클립스로 자바스크립트 에디터 사용하는 법

 

이클립스 자바스크립트 에디터로 열린 화면

 

위와 같이 아주 간단하게 이클립스 내장 자바스크립트 에디터로 JS 파일을 열어보았습니다.

 

하지만 이런 방식은 파일 개별로 하나하나 마다 열어줘야 하기 때문에 굉장히 번거롭고 귀찮습니다.

 

한 번에 모든 .JS 파일을 JS 에디터로 여는 설정을 해두면 번거롭지 않게 자동으로 전역 처리가 됩니다.

 

 

[2]. 모든 JavaScript File을 JS Editor OPEN Setting 하는 법

- 이클립스 상단에 Window 메뉴 클릭

- Preferences 메뉴 클릭

 

이클립스 자바스크립트 에디터 전역 설정

- Preferences메뉴에서 General > Editors > File Associations 클릭 

 

이클립스 JS Editor Setting

 

- 오른쪽 화면에 Add 버튼 클릭

 

이클립스 에디터 세팅법

 

- Add 후 나오는 창에서 " *.js " 입력 후 OK 버튼 클릭 ( *.js 입니다 ! )

 

이클립스 JS 파일 에디터 설정

- OK 버튼 누른 후 *.js 를 클릭하면 아래에 Associated editors라는 메뉴가 보입니다.

- 해당 메뉴에서 Add 버튼을 누릅니다.

 

이클립스 에디터 환경 설정

 

- Generic이라고 검색하면 Generic Text Editor라는 메뉴가 보입니다.

- 클릭 후 OK 버튼을 눌러줍니다.

 

Eclipse JS Editor Setting

- 다시 아래 메뉴에서 추가된 Generic Text Editor에 포커스를 둔 후 오른쪽에 Default 버튼을 눌러줍니다.

 

Default 버튼을 누르기 이전

 

Default 버튼을 누른 이후

- 버튼을 눌러주면 위와 같이 순서가 변경됩니다.

- 가장 하단에 Apply and Close 버튼을 눌러서 변경한 설정을 저장해주고 환경 설정 창에서 나옵니다.

 

- 아래와 같이 JS Editor로 설정되어 왼쪽 파일 그림이 JS 로 변경된것을 알 수 있습니다.

 

이클립스 기본 Text Editor
JS Editor 설정 후

- 이제 어떤 JS 파일을 열던 모두 아래와 같이 JS Editor 로 열리게 됩니다.

 

이클립스 자바스크립트 에디터로 열린 화면

 

이상으로 간단하게 이클립스 자바스크립트 에디터 설정하는 법을 알아보았습니다.

728x90
반응형
그리드형