Vue.jsで快適な開発ライフを送りたい

VS Codeは、デフォルトで色々なショートカットキーがあったりして、特にプラグインなどを入れなくても、十分便利に使えるのですが、Udemyの講習やQiitaの記事ではプラグインが入っている前提で話が進んでいることが多いので、後から追加したプラグインや加えた設定を備忘録として残しておこうと思います。

コード整形

Vue.jsでは、HTMLタグに属性を追加して、動的な処理を加えていくのですが、何の設定もしないと、以下のようなHTMLタグが出来上がってしまいます。

このコードでは、属性が2つだけなので、何とか読めますが、これが3つ4つと増えてきたら読めた物ではありません。
タグが見切れる前に早く何とかしましょう。

参考にした記事はこちら↓
VSCodeでvueファイルのhtmlを自動フォーマットする方法
必要な情報だけが載っていてノーストレスで解決できました。

設定が終わったら、。.vueのコードを全選択して、Shift + option + Fで整形完了!
(WindowsならCtrl + Alt + F

これならソースコードが右側に見切れることはありませんね

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)