【初学者必見!】VSCodeおすすめの拡張機能を大公開!

コーディングを始めている方で、なんとなくVSCodeを使用し始めていて特に拡張機能とかを追加していない方は、多いのではないでしょうか。

しかし、コーディング初学者の方だからこそ拡張機能を入れて頂き、コーディングで起こりやすい凡ミスを出来るだけ起こさないようにすることがとても重要です。

今回紹介する拡張機能の中でまだ入れていない拡張機能があれば是非入れてみてください♪

最後におまけの情報もあるので最後まで読んでみてください!

VSCodeおすすめの拡張機能

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Codeとは、VSCodeの表記を日本語に変える拡張機能です。英語の表記では、拡張機能などの設定が難しいためまずはじめに日本語に変更していきましょう!

HTML Snippets

HTML Snippetsとは、HTMLやCSSの入力をサポートしてくれる拡張機能です。
コーディングの候補を出してサポートしてくれるため、コーディングの効率が格段に上がります。

Image from Gyazo

zenkaku

全角スペースを知らせてくれる拡張機能です。コーディングでうまく表示されないことがある時の原因として全角スペースを使用してしまっていることがよくあるので、入れておくととても便利です。

Image from Gyazo

※zenkakuはインストール後、「command + p」でファイル検索を行い「> Enable Zenkaku」を選択することで全角部分を白表示することができます。

Image from Gyazo

Auto Rename Tag

Auto Rename Tagとは、HTMLの開始タグを修正した時に終了タグも同時に修正してくれる拡張機能です。これもコーディングを効率化させるために重要な拡張機能です。

Image from Gyazo

Live Server

Live Serverとは、エディタの修正をブラウザ上で自動更新してくれるプラグインです。
コーディングをしている時に、エディタで修正した後に、chromeを開いてリロードをして修正内容を変更させる手間を省くことができます。

使用方法も拡張機能を追加後に右下のGo Liveをクリックするだけで使用できるのでおすすめです。

Image from Gyazo

Code Spell Checker

Code Spell Checkerとは、コードのスペルミスをしている箇所を知らせてくれる拡張機能です。コーディング初学者の時によくある「なんで間違ってるかわからなくてイライラしていたら結局スペルミスだった」という現象を防ぐことに繋がります。

Image from Gyazo

vscode-icons

vscode-iconsとは、HTML・CSS・JavaScriptなどの言語ごとにアイコンを変えてくれてみやすくしてくれる拡張機能です。絶対入れたほうが良いまではいかないですが、ページ数の多いコーディングなどを行う時や言語が増えていく時には見やすくてとても便利です。

Image from Gyazo

Bracket Pair Colorizer

Bracket Pair Colorizerとは、JavaScriptの記述の際に対応しているカッコに同じ色をつけてわかりやすくしてくれる拡張機能です。

Image from Gyazo

VSCode拡張機能の追加方法

VSCodeでおすすめの拡張機能を紹介してきました。ここからは実際に追加方法について説明をしていきます。とても簡単なので学習の合間に必ず追加してあげましょう!

拡張機能を追加するときは、左下の歯車をクリックする拡張機能という項目があるのでそこをクリックして拡張機能の検索をできるページを表示させましょう!

あとは、今回紹介している拡張機能を1つずつコピペして検索していき、installを行うだけで使用ができます。

Image from Gyazo

※zenkakuはインストール後、「command + p」でファイル検索を行い「> Enable Zenkaku」を選択することで全角部分を白表示することができます。

Image from Gyazo

おまけ

VSCodeを使用するときは、必ずフォルダごとドラックアンドドロップで入れてあげましょう!
フォルダごと入れることで、パスなどを途中まで入れるだけで候補を表示してくれるようになります。
コーディング学習し始めの頃は、パスの記述ミスで画像やCSSファイルが読み込まれないことがよくあるのでこのやり方を実施してくださいね♪

Image from Gyazo

Image from Gyazo

この記事がいいと思ってくださった方は、SNSでのシェアをお願いします![addthis tool="addthis_inline_share_toolbox_mqi1"]

質問をTwitterから募集します!

無料でwebデザインに関する質問にお答えします。
クリ★スタは未経験からwebデザイナーを目指す方を応援しています!そのため、学習していく中での些細な疑問に記事で回答していきます。
お気軽にご連絡ください。→クリ★スタ(@cresta_design)

Youtubeでは動画学習コンテンツを配信しています!

動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。
ぜひチャンネル登録お願いします→クリ★スタYoutubeチャンネル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA