바이브코딩으로 IntelliJ Community JSP 플러그인 만들기

바이브코딩으로 IntelliJ Community JSP 플러그인 만들기

무료 버전에서 JSP가 너무 불편해서 직접 만든 JSP Lite 플러그인 정리

개요: 인텔리제이 커뮤니티에서 JSP를 좀 편하게 보려고 만든 플러그인

이번에는 바이브코딩으로 IntelliJ IDEA Community Edition에서 쓸 수 있는 JSP Lite 플러그인을 만들어봤다.

 

인텔리제이 얼티밋을 쓰면 JSP 지원이 되는데, 커뮤니티 버전은 무료 버전이라 JSP 편집 지원이 거의 없다고 보면 된다. 회사나 개인 프로젝트에서 오래된 JSP 파일을 열어야 하는 경우가 있는데, 그냥 텍스트처럼 보이면 태그도 안 보이고 스크립트도 안 보이고 수정하기가 너무 피곤하다.

 

그래서 거창하게 완전한 JSP 엔진을 만든 건 아니고, 실무에서 당장 불편한 부분만 먼저 잡았다. 하이라이팅, 주석, include 이동, 함수 찾기, 변수 찾기 정도만 되어도 JSP 파일 보는 피로도가 확 줄어든다.

 

이 글은 플러그인을 어떻게 만들었는지보다는, 왜 만들었고 어떤 기능을 넣었는지 정리하는 글이다.

나중에 같은 문제로 고생하는 사람 있으면 참고하면 될 듯하다.

 

아래 깃 주소에 커밋을 해놨다..!

깃 주소: https://github.com/joonsu1229/jspEditorPlugin

1. 왜 만들었나: Community 버전에서는 JSP가 아쉽다

IntelliJ IDEA Community Edition은 무료로 쓰기 좋지만, 웹/JSP 쪽 지원은 Ultimate에 비해 제한이 있다. 특히 JSP 파일을 열었을 때 코드 색상이 제대로 안 나오거나, include 파일 이동이 안 되거나, 자바스크립트 함수 찾기가 안 되는 식으로 작은 불편함이 계속 쌓인다.

처음에는 그냥 참고 쓰려고 했는데, JSP 안에 HTML, EL, scriptlet, JavaScript, CSS가 섞여 있으니까 눈이 너무 피곤했다. 파일 하나 수정하려고 해도 어디가 태그고 어디가 스크립트인지 계속 찾아야 했다.

JSP Lite에서 목표로 잡은 것

- 보기 편하게 만들기: JSP, HTML, EL, script, style 영역을 구분해서 하이라이팅

- 기본 편집 기능 챙기기: JSP 주석을 단축키로 넣고 뺄 수 있게 처리

- 이동 기능 보강: include 파일, 함수 선언, 변수 선언 위치로 Ctrl+클릭 이동

- 가볍게 유지: 완전한 JSP 분석기가 아니라 커뮤니티 버전에서 필요한 편집 보조 기능 위주

플러그인 적용 시 하이라이팅이되고, 함수찾기 변수명 찾기가 된다.

2. 하이라이팅: 일단 눈이 편해야 한다

가장 먼저 넣은 건 하이라이팅이다. JSP는 한 파일 안에 여러 문법이 섞여 있어서 색상이 안 잡히면 읽기가 정말 힘들다.

JSP Lite에서는 JSP directive, scriptlet, declaration, expression, JSP comment를 구분하고, HTML 태그와 속성, 문자열, 주석도 따로 보이게 했다. EL 표현식도 최소한 구분되도록 넣었다.

그리고 <script> 안에서는 JavaScript 느낌으로 키워드, 문자열, 숫자, 연산자, 주석이 보이도록 했고, <style> 안에서는 CSS처럼 볼 수 있게 처리했다.

# 하이라이팅 대상

- JSP directive: <%@ page ... %>, <%@ include ... %>

- JSP scriptlet/expression/declaration: <% ... %>, <%= ... %>, <%! ... %>

- JSP comment: <%-- ... --%>

- HTML tag / attribute / string / comment

- EL expression: ${...}

- script/style 내부 기본 문법

3. 주석: JSP 주석도 단축키로 처리

JSP 주석은 일반 HTML 주석이랑 다르게 <%--, --%> 형태를 쓴다. 커뮤니티 버전에서 파일 타입이 제대로 잡히지 않으면 주석 단축키도 기대한 대로 안 먹는다.

그래서 JSP Lite 파일 타입에서는 블록 주석을 JSP 주석 형태로 넣고 뺄 수 있게 했다. 작은 기능인데 JSP 수정할 때 은근히 자주 쓰게 된다.

# JSP 주석 형태

<%--

임시로 막아둘 JSP 코드

--%>

해당 플러그인을 적용하면 실제 JSP가 등록된다.

4. 함수 찾기: Ctrl+클릭으로 선언 위치 이동

이번 플러그인에서 제일 체감이 컸던 부분은 함수 찾기다. JSP 안에는 직접 작성한 JavaScript도 있고, 외부 js 파일을 불러와서 쓰는 코드도 많다.

예를 들어 saveForm() 같은 함수를 호출하고 있는데 선언 위치가 한참 아래 있거나 다른 js 파일에 있으면, 매번 검색해서 찾는 게 귀찮다. 그래서 Ctrl+클릭하면 함수 선언 위치로 이동하도록 만들었다.

단순한 function saveForm() 형태뿐 아니라, 실무 코드에서 자주 보이는 객체 함수 형태도 같이 잡도록 했다.

# 함수 찾기에서 잡도록 한 형태

function saveForm() { ... }

var saveForm = function() { ... }

const saveForm = () => { ... }

aaa.setBBB = function(data) { ... }

aaa.setBBB (data); // Ctrl+클릭 시 위 선언으로 이동

객체 함수 이동도 따로 처리

setReadAddress라는 전역 함수와 iFU.setReadAddress가 같이 있으면 이름만 보고 찾으면 엉뚱한 곳으로 간다. 그래서 iFU.setReadAddress처럼 owner가 붙은 호출은 iFU.setReadAddress = function... 선언을 먼저 찾도록 처리했다.

5. 변수 찾기: 선언된 곳까지만 가도 충분하다

마지막으로 넣은 게 변수 찾기다. 이건 너무 크게 만들지는 않았다. 타입 추론이나 전체 프로젝트 분석까지 하려면 일이 커지니까, 우선 단일 파일 안에서 선언 위치를 찾아가는 정도로 잡았다.

예를 들어 아래처럼 변수를 선언하고 밑에서 쓰는 경우, 사용 위치에서 Ctrl+클릭하면 선언된 곳으로 이동한다.

# 변수 선언 이동 예시

var userName = "kim";

let items = [];

const mode = "view";

 

console.log(userName); // userName Ctrl+클릭 시 var userName으로 이동

그리고 함수에서 받아온 파라미터도 변수처럼 많이 쓰니까, 이 부분도 같이 처리했다.

# 함수 파라미터 이동 예시

function setReadAddress(data, isView) {

console.log(data); // data Ctrl+클릭 시 파라미터 data로 이동

}

현재 변수 찾기는 단일 파일 내에서만 동작하게 해뒀다. 괜히 프로젝트 전체를 뒤지다가 같은 이름 변수를 잘못 잡는 것보다, JSP 편집 중에 필요한 범위만 안정적으로 잡는 게 낫다고 봤다.

6. include 파일 이동도 같이 처리

JSP에서 자주 쓰는 include도 Ctrl+클릭으로 이동되게 했다. 공통 헤더, 푸터, tag 파일 같은 걸 계속 열어봐야 하는 경우가 많아서 이것도 은근히 편하다.

# include 이동 지원 예시

<%@ include file="/WEB-INF/views/common/header.jsp" %>

<jsp:include page="/WEB-INF/views/common/footer.jsp" />

<jsp:forward page="/login.jsp" />

정리하면

JSP Lite는 IntelliJ Community에서 JSP를 완벽하게 지원하려고 만든 플러그인은 아니다.

대신 내가 실제로 JSP 파일을 보면서 불편했던 부분, 그러니까 하이라이팅, 주석, include 이동, 함수 찾기, 변수 찾기를 가볍게 해결하려고 만든 플러그인이다.

(혹시나 플러그인을 원하면 메일주시면 드리겠습니다~)

참고로 codex 5.5를 이용해서 만들었다!

 

* 무료 버전에서 JSP를 자주 봐야 하는 상황이면 이 정도 기능만 있어도 꽤 쓸만하다.