Make a snippet for Thymeleaf in VS Code

Introduction

I've looked up the article on user snippets in VS Code, but I didn't find one for Thymeleaf, and I didn't find a good VS Code plugin, so I'll write it as a reminder.

• The verification environment is macOS Mojave 10.14.16

What is a snippet?

Translated literally, it becomes a "scrap" or "fragment", but the point is that you give a name to what you want to call so that you can easily call it.

I will try it immediately

When you press "Shift + Command + p", the search screen will appear at the top of the screen. If you type ʻuseretc.," Preferences: Configure User Snippets "will appear, so select this. <img width="597" alt="スクリーンショット 2020-01-17 6.17.10.png " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568373/fde322f4-a64c-51d0-0472-97880d1e1260.png "> Next, the language selection screen will appear, so this time enterhtml`, select html.json and open it If you write a snippet in this, you can call it in html.

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

Commentary

"Thymeleaf value" Snippet name… Decide the name of the snippet. (To distinguish in this file) "prefix": "tval", The word you actually enter ... You can call it by entering this character in an html file. "body": "th:value=\"\\${$1.$2}\"", What is called ... If you enter the prefix, this will be called. If there is one line, enter it in "", and if there are two or more lines, enter it in []. \ $ 1… Input position after being called You can move to \ $ 2 and \ $ 3 by pressing the tab key. If you want to use special characters as simple strings, such as \… "is \ and \ $ is \, escape them.

Demonstration

It works like this.

Created for Thymeleaf

Now, I would like to create this for 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 = " * \ "> Not applicable </ p>", "

Recommended Posts