타임리프 : thymeleaf inline javascript 사용시 에디터에서 자바스크립트 경고 빨간줄

왜 질문했나

vscode 사용하는데 자꾸 자바스크립트 경고가 나온다.

',' expected.javascript
Expression or comma expected.javascript
Property assignment expected.javascript

이게 나와서 나머지 이후 자바스크립트들도 덩달아 경고 표시가 나타난다.

Thymeleaf에서 inline으로 사용하는 JavaScript 코드에서 IntelliJ IDEA 같은 에디터에서 경고 메시지가 나타나는 경우가 있습니다. 이는 Thymeleaf에서 지원하는 JavaScript inlining 문법 때문입니다.

이 문제를 해결하기 위해서는 IntelliJ IDEA 설정에서 다음과 같이 처리할 수 있습니다.

IntelliJ IDEA의 "Preferences"를 엽니다.
"Languages & Frameworks" > "JavaScript"를 선택합니다.
"Libraries" 탭을 선택합니다.
"Download..." 버튼을 눌러 "thymeleaf"를 검색합니다.
"thymeleaf" 라이브러리를 선택하고 "Download and Install" 버튼을 클릭합니다.
"Apply" 버튼을 눌러 설정을 저장합니다.

이렇게 설정하면 Thymeleaf에서 inline으로 사용하는 JavaScript 코드에서 경고 메시지가 나타나지 않게 됩니다.

작업중

 
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf#javascript-natural-templates


axios.get([[ @{/a/q/l/{topicId}(topicId=${topicId}) }  ]],  
== 에디터에서 경고발생

axios.get(/*[[@{/a/q/l/{topicId}(topicId=${topicId})}]]*/'',
= 에디터경고 없음, 
thymeleaf는 주석이후는 무시한다고 되어 있음.
에디터는 주석이라서 무시
지금 경우는 문자열을 생성하는 @{}라서 ''문자열로 에디터 속임


axios.get(/*[[@{/a/q/l/{topicId}(topicId=${topicId})}]]*/'',
>>>>>> thymeleaf에서 처리 결과
axios.get("/a/q/l/1",

thymleaf 주요 th 속성

타임리프 표현식 ${...}Selection Variable Expressions: *{...}Message Expressions: #{...}Link URL Expressions: @{...}Fragment Expressions: ~{...}

QnAi로깅