Zenn
😎

VSCodeで完全自動フォーマットする話

2021/02/25に公開
CSS
HTML
Scss
VS Code
初心者
tech

気になる人は気になるインデントですが、いちいち気を使って整えるのは面倒くさい。
そんな怠惰なる方々にとっておすすめのvscodeの設定です。
※基本的にはweb制作(HTML/CSS/Sass/JavaScript/jQueryを使用したもの)を想定した設定なので、ご了承ください。

デフォルトのフォーマッターを導入・設定する

以下の手順で、prettier+を導入・設定していきます。
ちなみに、フォーマッターとは自動でコードを整えてくれる機能のことです。

  1. プラグイン「prettier+」をインストールする
    さまざまなフォーマットプラグインがありますが、ここではprettier+を紹介させていただきます。
    理由として、Sassのコードも自動でフォーマットしてくれるからです。
    プラグインのインストール方法は調べていただけると幸いです。
    prettier+はあくまでおすすめというだけですので、お好きなプラグインアドを使って構いません。
    気が向けば紹介しますが、言語（ファイルの拡張子）ごとにフォーマッターを変える設定などもあります。

  2. vscodeの設定(setting)を開く
    vscodeの設定はvscodeアプリケーション画面の左下の歯車から開けます（以下の写真はmacでの画面です）。

  3. 検索欄で「format」と調べる
    画面上部にある検索欄で「format」と調べると、該当ワードのある項目が表示されます。

  4. 「Editor: Default Formatter」のプルダウンで「svipas.prettier-plus」を選択する
    以下の画像のようにすると、デフォルトのフォーマッターをprettier+にすることができます。

自動フォーマット機能をオンにする

続いて、保存するたびに自動でフォーマット＆特定の動作で自動保存されるようにする設定をしていきます。

  1. 「format」の検索結果で一緒に出ている「Editor: Format On Save」をチェックする
    これで保存されるたびにフォーマッターが動くようになります。
    ついでに「Editor: Format On Paste」にもチェックを入れると、コードをコピペしたときにもフォーマッターが動くようになります。

  2. 検索欄で「save」と調べる
    先ほどと同様、検索してください。「保存」に関する設定項目が表示されます。

  3. 「Files: Auto Save」をoff以外に設定する
    これで、選択した動作をするたびに、自動で保存されるようになります。
    おすすめは「onFocusChange」です。カーソルでのしょうてんが変わるたびに保存されるようになります。

これで、コードが勝手に整う環境の出来上がりです。
htmlの閉じタグがなかったりなどのエラー判定が発生すると整わなくなるのでお気をつけください。

この時点で設定は終わりましたが、次の設定もすることをお勧めします。

indent-rainbowが赤くなるなどする可能性

vscodeの規定のインデントのtabの数の設定と、フォーマッター側のtabの数が異なる場合があるので、以下の手順でインデントのtabの数を指定するとプラグイン「indent-rainbow」で赤くなるなどの事態が起こらなくなります。

  1. 設定を開く
  2. 「tab」と検索する
  3. 「Editor: Tab Size」を「2」にする
    ちなみに、「indent-rainbow」はインデントを見やすくするためのプラグインです。導入するだけで良いので、こちらも良ければ併せて使うといいと思います。

最後に

以上で「VSCodeで完全自動フォーマットする話」を終わりとさせていただきます。
インデントは不要論などありますが、閉じタグ忘れやコードの構造が分かりやすくなるなどのメリットがおおきいと私は考えます。
インデントを中心にフォーマットの話をしましたが、{}前後の半角スペースが付いたりなど、コード全体がみやすくなるので、インデントの重要性がよく分からなくても、導入して損のない設定だと思います。

特に、複数人で共同開発する場合や、保守管理や引き継ぎを考えても、コードを綺麗にすることは開発のストレスを減らすことができます。
手動で全て整えていくのは大変ですが、自動で整うのなら、この設定を導入して、他の人にも好かれるコーディングをしましょう。

Discussion