소개

VSCode에서의 유저 스니펫의 기사는 조사하면 있지만, Thymeleaf용의 것이 없고, VSCode의 플러그인에서도 좋은 느낌의 것이 없었기 때문에 비망록적으로 써 두려고 생각한다.
※ 검증 환경은 macOS Mojave 10.14.16

스니펫이란?

직역하면 「절단」이나 「단편」이 되지만, 요점은 호출하고 싶은 것에 이름을 붙여 간단하게 호출할 수 있도록 한 것이라고 하는 것.

조속히 시도

"Shift+Command+p"를 누르면 화면 상단에 검색 화면이 나오므로 user
그런 다음 언어 선택 화면이 나오므로 이번에는 html를 입력하고 html.json을 선택하고 엽니 다.

이 안에 스니펫을 쓰면 html 안에서 호출할 수 있습니다.

"Thymeleaf value": {
    "prefix": "tval",
    "body": "th:value=\"\\${$1.$2}\"",
},

해설

"Thymeleaf value"스니펫 이름... 스니펫 이름을 결정합니다. (이 파일에서 구별하기위한 것)"prefix": "tval",실제로 입력하는 단어… 이 문자를 html 파일로 입력하여 호출할 수 있습니다."body": "th:value=\"\\${$1.$2}\"",호출되는 것… prefix를 입력하면 여기가 호출됩니다.
1행의 경우는, ""안에, 2행 이상의 경우는 []로 넣어 주세요.
\$1… 불러온 후 입력 위치 tab 키를 누르면\$2,\$3로 이동할 수 있습니다.
\…"는\,\$는\\등 특수 문자를 단순한 문자열로 사용하려면 이스케이프하십시오.

시연

이런 식으로 움직입니다.

Thymeleaf 용으로 작성

그럼 Thymeleaf 용으로 만들고 싶습니다.

"Thymeleaf comment": {
    "prefix": "tcom",
    "body": "<!--/* $1 */-->",
},
"Thymeleaf value": {
    "prefix": "tval",
    "body": "th:value=\"\\${$1.$2}\"",
},
"Thymeleaf text": {
    "prefix": "ttex",
    "body": "th:text=\"\\${$1.$2}\"",
},
"Thymeleaf local": {
    "prefix": "twit",
    "body": "th:with=\"x=$1,y=$2\"",
},
"Thymeleaf link": {
    "prefix": "tlink",
    "body": "th:href=\"\\@{'/' + \\${$1.$2}}\"" ,
},
"Thymeleaf if": {
    "prefix": "tif",
    "body": "th:if=\"\\${$1}\"" ,
},
"Thymeleaf unless": {
    "prefix": "tif",
    "body": "th:unless=\"\\${$1}\"" ,
},
"Thymeleaf switch": {
    "prefix": "tswit",
    "body": [
        "<div th:switch=\"\\${$1}\">",
        "\t<p th:case=\"$2\" th:text=\"\\${$3}\"></p>",
        "\t<p th:case=\"$4\" th:text=\"\\${$5}\"></p>",
        "\t<p th:case=\"*\">対象なし</p>",
        "</div>"
    ] ,
},
"Thymeleaf for": {
    "prefix": "tfor",
    "body": [
        "<tr th:each=\"$2 : \\${$1}\">",
        "\t<td th:text=\"\\${$3.$4}\"></td>",
        "\t<td th:text=\"\\${$5.$6}\"></td>",
        "\t<td th:text=\"\\${$7.$8}\"></td>",
        "</tr>",
    ] ,
},

후기

우선 최근 사용하고 있는 것만 정리했습니다만, 그 밖에도 Thymeleaf의 기법은 있으므로 수시로 추가해 사용해 가고 싶습니다. 또, 이것을 개변하면 다른 언어에도 응용할 수 있으므로 적극적으로 사용해 나가려고 했습니다.

참고한 기사