開発 TIPS - 応用編 -

INDEX

1. VSCodeの便利ツール - プラグイン

まだ以下の項目ができていない方は、「VS Codeの使い方」教材を確認してください。

それでは本題のVSCodeの便利なプラグインについてご紹介しましょう。

プラグインとはVSCodeをより便利にしてくれる拡張機能のことです。インストールすることでテキストエディタがもっと便利になります。プラグインは無数にあるので、気になるものは導入してどんどん試してみてください。

試しにプラグイン「Open in Browser」を導入してみましょう！

操作手順

Open in Browser のここがポイント！

Open in Browser：これを使用すると、上の写真のようにHTMLファイルを右クリック→「Open in Default Browser」を選択すると、簡単にHTMLファイルをブラウザで開きサイトの見た目を確認できます。
Comment Anchor：コードレビューの際に、REVIEWという文字を入れてコメントを記載します。その際に導入しておくと見やすいので、インストールをお勧めします。

世界中には無数のプラグインが存在しますが、ここでは学習を始めたばかりの段階で特に入れておくべき、必須のプラグインを厳選して紹介します。

プラグイン名	概要	おすすめする理由
Japanese Language Pack for VS Code	VSCodeの表示を日本語化します。	英語のメニューが苦手な方でも、直感的に操作を理解できるようになります。学習初期のつまずきを減らすために、最初に入れておくと安心です。
Live Server	HTMLファイルを保存すると、自動でブラウザを更新（リロード）してくれます。	コードを修正するたびに手動でブラウザを更新する手間がなくなります。書いたコードの変更が即座に反映されるため、学習効率が劇的に向上します。
Prettier - Code formatter	コードのインデント（字下げ）やスペースなどを、ルールに沿って自動で整形してくれます。	誰が読んでも見やすい、一貫性のある綺麗なコードを保つ癖がつきます。チーム開発では必須のツールであり、今のうちから慣れておくことでプロの基準を学べます。
Material Icon Theme	ファイルやフォルダの種類に応じて、アイコンを見やすく表示してくれます。	ファイル名だけでなくアイコンで直感的にファイルの種類を判別できます。目的のファイルを探しやすくなり、日々の作業が快適になります。

今後、言語ごとの便利なプラグインも導入すると良いでしょう。

Googleで「VSCode 言語名プラグイン」で検索すると、おすすめプラグインを紹介する記事が見つかると思いますので、ぜひ参考にして導入してみてください。

ChromeのDeveloper Toolは特にフロントエンドの開発では必須と言っても過言ではないでしょう。

ChromeのDeveloper Toolを使用するタイミング