[Node.js] 이클립스(eclipse)에서 ejs 파일 가독성 높이기 위해 text 모드(포맷) 설정하는 방법

node.js 프로젝트를 이클립스를 이용해서 진행할 때 ejs 라는 Html 템플릿 엔진을 사용하게 됩니다. 

2019/04/02 - [Node.js] - [Node.js 6강] html 템플릿 엔진 ejs 연동해서 서버에서 넘어온 데이터 사용하기

 

그런데 이클립스에서 ejs 파일은 아래처럼 전부 검정색 글씨로 나오기 때문에 코딩할 때 가독성이 떨어지고 자동완성 등이 안되는 불편사항이 있죠. 그래서 ejs 파일을 html 이나 jsp 와 동일한 파일 포맷으로 인식하도록 설정해야 합니다. 

이클립스에서 ejs 파일을 열었을 때 화면

 

 

1. Window - Preferences 메뉴를 클릭 후 검색창에서 File Association을 입력하면 관련 메뉴(경로 : Generel - Editors - FileAssociation) 가 표시됩니다. 

 

2. File type 에 *.ejs 를 입력합니다. 

 

 

3. File Assocation에서 *.jsp (혹은 *.html)를 찾아서 클릭하면  해당 파일타입에 적용된 Associated editors 가 하단에 표시됩니다. 파일 타입을 캡쳐 등을 이용해서 기억해놓습니다. (ejs 파일에 동일한 editor를 추가해줘야 함)

 

 

4. 다시 *.ejs 를 선택해주고, Add 버튼을 클릭해서 앞에서 봤던 Associated editors를 추가해줍니다.

그리고, JSP Editor를 Default로 설정해주고 Apply (또는 Apply and Close)를 해줍니다. 

 

 

5. Content Type 설정화면으로 이동 후 Content Types 의 Text를 선택해서 확장합니다. 

(File Associations 설정화면 상단의 'See Content Type..'을 클릭하거나 Window - preferences 메뉴의 General - Content Types 를 클릭해서 이동)

 

Text 밑에 JSP를 클릭해서 확장한 후 File Assorcation의 Add 버튼을 클릭합니다. 

 

 

6. *.ejs 파일을 추가합니다. 

 

하단의 Default encoding을 UTF-8로 변경해준 후 update를 클릭합니다. (필수 아님) 

 

 

7. Apply and Close 를 클릭하고, 다시 ejs 파일을 열어보면 JSP(또는 html) 에 적용된 Editor가 동일하게 적용된걸 확인할 수 있습니다. 

 

 

코딩할 때 훨씬 가독성도 좋고 자동완성도 잘 되네요. 그리고 신경을 거슬리는 경고표시(노랑색)도 안떠서 좋습니다. ㅎㅎㅎ