VSCodeおすすめの拡張機能【html・css・js 初心者編】

スポンサーリンク


Visural Studio Codeを、初心者さんが、html・css・JavaScriptエディタとして使う時のおすすめの拡張機能をまとめました。

なお各拡張機能のくわしい特徴・使い方・インストール方法などは、リンク先の各記事にまとめてあります。

Live Preview


Live Previewは、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能です。

htmlやcssはもちろんですが、JavaScript入門書もサクサク進めることができます。

くわしくはこちら。

VSCodeのLive Preview インストール方法・使い方・特徴
Visual Studio Codeに、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。インストール方法に加えて、使い方・特徴を簡単にご紹介!

HTML CSS Support


HTML CSS Supportは、htmlファイルの id・class属性値 へ入力するときのセレクターを、cssファイルや<style></style>に記載されているセレクターから、入力補完をしてくれる拡張機能です。

くわしくはこちら。

VSCodeで、id・class属性値へ入力するセレクターを補完する拡張機能 HTML CSS Support
Visural Studio Codeで、htmlファイルの id・class属性値 へ入力するときのセレクターを、cssファイルや<style></style>に記載されているセレクターから入力補完をしてくれるのが、拡張機能 HTML CSS Support です。

CSS Peak


CSS Peakは、htmlファイルに記載されているid・class属性値から、cssファイルに記載されているセレクタ定義をインラインやホバー表示したり、CSSファイルへ移動したりする便利な拡張機能です。

くわしくはこちら。

VSCodeで、id・class属性値から、htmlへ定義表示 & css移動する方法
VSCodeで、htmlファイルに記載されているid・class属性値から、cssファイルに記載されているセレクタ定義をインラインやホバー表示したり、CSSファイルへ移動したりする便利な拡張機能がCSS Peakです。

Image Preview


Image Previewは、html・css・mdファイルなどのエディタ部に、画像ファイルをアイコン・プレビュー表示してくれる拡張機能です。

くわしくはこちら。

VSCodeで、画像ファイルをアイコン・プレビュー表示してくれる拡張機能
Visual Stdio Codeで、html・css・mdファイルなどのエディタ部に、画像ファイルをアイコン・プレビュー表示してくれる拡張機能がImage Previewです。エクスプローラービューに表示、保存されているフォルダーも開けます。

初期設定


拡張機能に加えて、設定をすると、html・css・jsの開発を便利にすることができます。

また、日々進化しているため、以前必要だった拡張機能も、設定だけで可能になってきていることも増えてきています。

ということで、html・css・JavaScriptエディタとして使う時のおすすめの初期設定をまとてあります。

VSCodeおすすめの初期設定【html・css・js 初心者編】
Visural Studio Codeを、初心者さんが、html・css・JavaScriptエディタとして使う時のおすすめの初期設定をまとめました。

まとめ

VSCodeには、HTMLやJavaScriptで開発するための機能が、もともと含まれているため、拡張機能をそれほど必要ないと思っていたのですが…

html・css・jsの開発を、サクッとはじめられる必要最低限の拡張機能の数が、たった4つだけというのは、自分でまとめていて、ちょっとびっくりでした。

必要最低限なので、中級・上級になるにしたがって、もちろん数は増えていくと思います。その時に、追加していけばよいかと思います。

それでは。

コメント

タイトルとURLをコピーしました