WebコーダーがVSCodeに入れるべきプラグイン7つ【初心者向け】

この記事では、Webコーダー初心者の方がVSCodeに入れるべきプラグイン7つをご紹介します。

WebコーダーがVSCodeに入れるべきプラグイン7つ

WebコーダーがVSCodeに入れるべきプラグインは下記の7つです。

では、それぞれ解説していきます。

画像などのファイルへのパスを補完してくれるプラグインです。

imgタグなどで「src=“”」を書くとフォルダやファイルの読み込み候補が出てきます。

こういった補完機能に頼っていくことで、コーディングを効率よくゴリゴリ書いていくことができます。

HTMLやCSS、SASS、Javascriptのコードを綺麗に整形してくれるプラグインです。

対応するカッコに縦横線のハイライトを表示してくれます。

特にJavascriptで活躍するプラグインです。

パレットで色指定や、ピッカーで色を取得できます。

cssで16進数で色を指定するときに便利なプラグインです。

HTMLのシンプルな構文をチェックしてくれるプラグインです。

ブラウザでHTMLとCSSが反映されたWebページを確認することができます。

Live Serverがあると、修正したコードが自動でWebページに反映されるようになります。

VSCode画面左にあるファイルツリーのそれぞれのファイルにアイコンがつきます。

こちらのプラグインは必須ではありませんが、使ってみると、文字だけでなく、画像や色も重要に感じるのではないでしょうか。

ファイルにアイコンがつけられるプラグインは他に「Seti」「Material Icon Theme」などいろいろあるので、自分好みのプラグインを入れると良いと思います。

この記事では、Webコーダー初心者の方がVSCodeに入れるべきプラグイン7つをご紹介しました。

VSCodeのプラグインは他にもたくさんありますが、プラグインを入れすぎてしまうと、機能が競合してしまったり、動作が重くなってしまう要因になりかねません。そのため、自分の用途に合わせたプラグインを使っていきましょう。