INDEX
目次
1. VSCodeの便利ツール - プラグイン
VSCodeの基本的な使い方はProgateと以下の記事を参照してください。
a. VSCode使い方を確認しよう!
おすすめの記事 - VSCodeの使い方入門 -
【アニメ図解たっぷり】VSCodeの使い方入門!~ 基本からWeb制作まで | Skillhub[スキルハブ]
![【アニメ図解たっぷり】VSCodeの使い方入門!~ 基本からWeb制作まで | Skillhub[スキルハブ]](https://cdn.clipkit.co/tenants/589/item_links/images/000/005/825/thumb/34419bc4-1e4e-494f-8528-b526ca0b6b35.png?1726667544)
Visual Studio Code(VSCode)の導入の仕方から使い方をアニメーションたっぷりで解説する入門記事です。はじめて使う人は迷いなく、導入〜基本的な使い方までできるようになります。プログラミング初心者の方には最適ですよ。
上記の記事で押さえてほしいポイント💡
二度目の記事となるので、以下の点を確認できていれば問題ありません!
- VSCodeのインストールができている
┗ VSCodeをいじる前にインストールを完了させましょう! - VSCodeの基本的な使い方がわかる
- VSCodeを日本語化できる
- VSCodeのフォルダーを開き、ファイルを作成できる
- VSCodeの便利機能についてわかる
b. おすすめプラグイン紹介
それでは本題のVSCodeの便利なプラグインについてご紹介しましょう。
プラグインとはVSCodeをより便利にしてくれる拡張機能のことです。インストールすることでテキストエディタがもっと便利になります。プラグインは無数にあるので、気になるものは導入してどんどん試してみてください。
プラグインとはVSCodeをより便利にしてくれる拡張機能のことです。インストールすることでテキストエディタがもっと便利になります。プラグインは無数にあるので、気になるものは導入してどんどん試してみてください。
おすすめの記事 - プラグインの入れ方 -
Visual Studio Code のプラグインの入れ方 #VisualStudioCode - Qiita

目的Visual Studio Codeにて汎用的なプラグインの入れ方をまとめるこの記事のターゲットVisual Studio Codeのプラグインの入れ方が分からない方プラグインの導入方法画面左側のプラグインのボタン(赤矢印部分)をクリックする…
試しにプラグイン「Open in Browser」を導入してみましょう!
Open in Browser のここがポイント!
- Open in Browser:これを使用すると、上の写真のようにHTMLファイルを右クリック→「Open in Default Browser」を選択すると、簡単にHTMLファイルをブラウザで開きサイトの見た目を確認できます。
- Comment Anchor:コードレビューの際に、REVIEWという文字を入れてコメントを記載します。その際に導入しておくと見やすいので、インストールをお勧めします。
その他VSCodeのおすすめ拡張機能(プラグイン)は以下の記事を参考にしてみてください。気になるものがあれば積極的に使用しましょう。
VSCodeのおすすめ拡張機能 24 選(とTipsをいくつか)#Git - Qiita

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。Tipsは**ここ**から。拡張機能 24 選1. vscode-iconsアイコンがついて見やすくなる。2. G…
今後、言語ごとの便利なプラグインも導入すると良いでしょう。
Googleで「VSCode 言語名 プラグイン」で検索すると、おすすめプラグインを紹介する記事が見つかると思いますので、ぜひ参考にして導入してみてください。
Googleで「VSCode 言語名 プラグイン」で検索すると、おすすめプラグインを紹介する記事が見つかると思いますので、ぜひ参考にして導入してみてください。
2. ChromeのDeveloper Toolを使いこなす
ChromeのDeveloper Toolは特にフロントエンドの開発では必須と言っても過言ではないでしょう。
ChromeのDeveloper Toolを使用するタイミング
- HTML・CSSでWebサイトを作り、PC・スマホ・タブレットなど様々な画面幅でデザインが崩れていないか確認したい時
- 他のサイトのHTML・CSSを分析したい時
- サイトでエラーが出ていないか確認したい時
学習を進めていくと、後ほどProgateでもDeveloper Toolについて学べるので、まずはそちらで学びましょう。
「今すぐ知りたい」という方向け!参考記事
Chrome デベロッパーツールの使い方まとめ #JavaScript - Qiita

デベロッパーツールでできることGoogle Chromeのデベロッパーツールは、フロントエンド開発において欠かせないツールです。他のブラウザにも同様のツールはありますが、Chromeのものが最も…