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.

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 スクリーンショット 2020-01-17 6.21.32.png 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

qiita_thymeleaf.gif 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>", "

" ] , }, "Thymeleaf for": { "prefix": "tfor", "body": [ "<tr th:each="$2 : \${$1}">", "\t<td th:text="\${$3.$4}">", "\t<td th:text="\${$5.$6}">", "\t<td th:text="\${$7.$8}">", "", ] , },

Afterword

For the time being, I have summarized only the ones I have been using recently, but since there are other Thymeleaf notations, I would like to add them as needed. Also, if I modify this, it can be applied to other languages, so I decided to use it positively.

Referenced articles

https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482

Recommended Posts

Make a snippet for Thymeleaf in VS Code
Run a Spring Boot project in VS Code
How to display a browser preview in VS Code
A memorandum for writing beautiful code
Java Spring environment in vs Code
What is a snippet in programming?
Make a SOAP call in C #
Tips for handling enums in thymeleaf
Summary of steps for developing in Docker container with VS Code
Let's write a test code for login function in Spring Boot
Enable code completion in Eclipse for Mac
How to make a judgment method to search for an arbitrary character in an array
VS Code plugin recommended for programming school students
Technology for reading Java source code in Eclipse
Code to escape a JSON string in Java
I wanted to make (a == 1 && a == 2 && a == 3) true in Java
How to make a lightweight JRE for distribution
Create a tool for name identification in Salesforce
React Native vs. Ionic – A head-to-head Comparison in 2020
How to make a follow function in Rails
Try debugging a Java program with VS Code
[Mac] Install Java in Visual Studio Code (VS Code)
Build a Java development environment with VS Code
Create a private key / public key in CentOS8.2 and connect to SSH with VS Code
You don't have to write for twice when you make a right triangle in Java
Make "I'm not a robot" in Java EE (Jakarta EE)
I read the readable code, so make a note
Make jstat logs available for immediate viewing in Excel
[Java basics] Let's make a triangle with a for statement
[Personal memo] Make a simple deep copy in Java
A note for Initializing Fields in the Java tutorial
I tried to make a login function in Java
[Environment construction] Build a Java development environment with VS Code!
How to make a mod for Slay the Spire
Java11: Run Java code in a single file as is
Specify VS Code as the default editor for jshell
In Ruby code, I was confused for a moment as "Hash-like but parentheses are arrays?"