【VS Code】HTMLを整形する際に各属性で折り返さないようにする

こんにちは、シロウです。

VS Codeではデフォルトで自動整形のショートカットが用意されています。

そのため「command + shift + f」を押下するとコードが自動整形されるはずです。

しかし、この自動整形はデフォルトでは、一定の長さを超過するコードは属性によって自動的に折り返されるようになっています。

これはかなり面倒なので、設定をいじって内容を変更しようと思います。

VSCodeのデフォルトの自動整形を利用した場合

まずは下記をご覧ください。

<input type="number" class="test test1 test2 test3 test4 test5" value="test" name="test" id="test"
                   form="test" min="100">

おそらくデフォルトの設定では上記のように、コードが長い場合は自動的に属性（今回の場合はform属性）で折り返されてしまいます。

個人的に、これはかなり読みにくいので折り返さないように設定していきます。

VSCodeのデフォルト自動整形の設定を変更する

まずはVSCodeのsetting.jsonを開きます。

開くことができたら、下記の一文をどこでも良いので追加してください。（迷ったら一番上でOK。）

"html.format.wrapLineLength": 1000,

これで設定は完了です。

今の設定は何をしているのか？

VSCodeの自動整形の設定は「 Format: Wrap Attributes」という項目で切り替えることが可能です。

この設定がデフォルトではauto（行の長さが超過した時に属性で折り返す）という設定になっています。

そこで、"html.format.wrapLineLength": 1000この一行で「1000字以上で属性で折り返す」という設定に変更したわけです。

普通は1000を超過することはないので、この設定にしておけば良いかなと思います。

これで終わりです(*´ω｀*)ﾉ

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。