28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

EclipseでHTMLやJSPをフォーマットして残念なレイアウトになったときにする設定

Last updated at Posted at 2017-03-08

EclipseでJSPやHTMLを実装していて、フォーマットをかけると残念なことになります。
具体的にはこんなソースコードにフォーマット書けると以下のようになります。

[フォーマット前]
before.png

[フォーマット後]
after.png

ソースは今使っているSpring Bootのサンプルを拝借してちょっと手を加えました。
https://github.com/spring-projects/spring-boot/tree/master/spring-boot-samples

このフォーマットの何が残念かと言うと、以下の2点が考慮されないことです。

  1. 長文になると不要な改行が入る
  2. 改行されないHTMLタグがある

after_red.png

そこでEclipseに以下の設定をすると求めるフォーマットをしてくれます。

  1. メニューから「Windows」→「Preferences」をクリック
  2. 「Preferences」の画面が開いたら、「Web」→「HTML Files」→「Edtor」
  3. 「Formatting」の「Line width:」を「72」から「200」にする
  4. 同じ設定画面の「Inline Elements:」から改行してほしいHTMLタグを選択して「Remove」を押して消す
      ※ 今回の場合は「td」と「input」が改行されていないので、削除します。

「Line width:」は1行に表示する文字数の設定です。
200文字はあくまでも目安なので、もっと長文を1行で表示したい場合は適当に調整してください。

「Inline Elements:」はinlieで表示するHTMLタグが登録されています。
そのため、この設定から削除したタグは改行して表示されます。

これで再度フォーマットをするといい感じになりました。

28
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?