Thymeleafで開発中にHTML内のth属性にwarningがついてしまう

3654 ワード
STS HTML5 Thymeleaf HTML5 テキストリンク

現象

eclipseやSTSでSpring boot + Thymeleafで開発しているとき、HTML内のth属性にwarningがついてウザい。

環境

Spring Tool Suite 3

原因

htmlの属性にxmlns:th="http://www.thymeleaf.org"を書き忘れている。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Hello SpringBoot Sample</h1>
    <h1 th:text="${message}"></h1>
  </body>
</html>

対策

パターン1：HTML属性にxmlnsを書く

HTMLタグのxmlns属性を書いて、th属性があることをエディタに知らせる。

sample.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Hello</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Hello SpringBoot Sample</h1>
    <h1 th:text="${message}"></h1>
  </body>
</html>

パターン2：th属性ではなく、data属性形式で書く

th属性ではなくdata属性の記述方式で書く
HTML5対応したい場合はこちら。個人的にはこちらを押したい。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Hello SpringBoot Sample</h1>
    <h1 data-th-text="${message}"></h1>
  </body>
</html>