image

はじめに

この記事は「HTML&CSS速習教室」の学習ページの1つ「プラグインのインストール」の中から、特にコーディングやプログラミングの学習を始めたての人にインストールして欲しいプラグイン「Prettier」の紹介部分を抜粋したものです。

このページを読んで得られるメリット

  • Prettierがどういうものかわかるようになる
  • VSCodeのプラグインインストール方法がわかるようになる
  • Prettierプラグインを有効にするための設定手順がわかるようになる

Prettierの役割

Prettierを一言で説明すると「コードをキレイに整形してくれるツール」となります。

コーディングの学習を始めたばかりの初心者あるあるだと思うのですが、HTML・CSS・JavaScriptなどといったコードを書いていると「コードがゴチャゴチャしてしまう」という経験はありませんか？

コードがゴチャゴチャしていると

  • 読みづらい
  • コードにおかしい部分があっても気付きづらい
  • 仕事レベルであれば先輩エンジニアに怒られる

など、デメリットのオンパレードとなります^^;

ただ、だからといって「コードをキレイに保つ」というのはコーディング初心者にとっては慣れていない作業なので、なかなか難しいかと思います。
（「そもそもキレイなコードってどういう状態？」という感じではないでしょうか？）

そういった悩みを一発で解決できるツールが「Prettier」になります。

現役で仕事をしているエンジニアであれば使っている人のほうが多いかと思いますが、コーディング学習を始めたての初心者こそまずは「Prettier」をインストールすることで、学習効率が大きく改善されるのかなと考えています^^

Prettierのインストール手順と設定手順

手順は以下の動画で解説しているので、そちらを参考に同じように進めていただけたらと思います^^
↓
https://youtu.be/Xhh7ICNDymE
（直接動画を埋め込めないため、YouTubeのリンクを貼っています）

おわりに

Prettierのインストールと設定が完了したら、ファイルを保存するたびに「自動整形」が実行されるか確認してみましょう^^

今回は「Prettier」を紹介しましたが、他にもコーディング初心者向けに紹介しているプラグインを「プラグインのインストール」の中で紹介しているので、もし興味があればぜひご覧になっていただけたらと思います^^