※ 記事内にアフィリエイト広告が含まれています

お役立ち情報 まとめ記事 家電・その他

VSCodeのおすすめプラグイン9選を一挙紹介!プログラミングを効率的にサポート

komi

兼業エンジニアです。 仕事の生産性が高まるPCアプリ、ビジネスツールの紹介の他、プログラミングや語学の学習情報を発信していきます。

プログラミングを始める時、ローカルのエディタとして

Visual Studio Code(VSCode)が主流です。

ここでは初学者の方に向けて、コーディングに特に便利な9つのサポートプラグインを紹介していきます。

副業でプログラミングに挑戦中の方、エンジニア転職を目指している方は必見です。

これから紹介するプラグインを導入すれば、学習時、作業時に大いにサポートしてくれるはずです!

Visual Studio Code(VSCode)とは

MicroSoftが無料提供し、初心者から上級者まで幅広く、世界一使用されているエディタです。

Mac/Windows/Linuxなど多くのOSで使えます。

他のエディタと比較して、豊富なプラグインを揃えているのが特徴です。

サポートプラグインを入れておくと、作業効率が格段に向上します。

プラグインも無料提供されているものが殆どです。

今回紹介するプラグインも全て無料です。

VSCodeプラグイン導入の仕方

VSCordの左メニューバーのプラグイン拡張ボタンをクリックし、プラグインの名前を検索して、インストールします。

プラグインの名前は一部だけでも検索可能です。

おすすめプラグイン紹介

①:Japanese Language Pack for Visual Studio Code

VSCodeは、インストールした直後だと、全て英語表記になっています。日本語表記に変換したいという場合には、このJapanese Language Packをインストールします。

Japanese Language Packをインストールした後は、VSCodeの再起動が必要となります。

②:vscode-icons

vscode-iconsは、デフォルトだとシンプルなファイルがアイコンつきで表示され、視覚的に整理しやすくなるプラグインです。

vscode-iconsはファイルの拡張子でアイコンが変更されることはもちろん、testフォルダーやassetsフォルダー、configフォルダーなども対応したアイコンにしてくれます。

③:Highlight Matching Tag

Highlight Matching Tagは、ペアのタグを強調して表示してくれるプラグインです。

とくに長文のHTMLを記述する場合で<div>のように、複数使うことが多いタグは、

開始タグ、終了タグの関係が複雑でわかりにくくなるため、このプラグインが非常に役立ちます。

④:Auto Rename Tag

HTML, XMLのタグ名を変更するときに困るのが、
開きタグと閉じタグのセットを両方忘れずに同じタグに変えること。
これを忘れてしまうとエラーとなります。

Auto Rename Tagは、開始タグまたは閉じタグを修正した時に、対になるタグも合わせて自動修正してくれるプラグインです。

このプラグインをインストールしておくと、どちらか一方を修正すると、自動的にもう片方も修正してくれます。

⑤:Auto Close Tag

タグを記載するときに、開始タグを入力すると、自動的に終了タグを生成してくれるプラグインです。

このプラグインをインストールしておくと、開始タグしか書く必要がなくなるため、記述量を格段に削減することができます。

⑥:Bracket Pair Colorizer

Bracket Pair Colorizerは、対応する括弧に縦と横の線で色つきハイライト表示をしてくれます。

とくに長文コードを書く際に、どの括弧が対応しているのかがわからなくなるため、このプラグインがあると非常に便利です。

⑦:Trailing Spaces

プログラムを記述していると、いつの間にか、不要なスペースやタブが入ってしまっていることがよくあります。

コードに不要な半角スペースやタブが入ると、場合によっては正常にプログラムが動作しないこともあります。

そのような時に役に立つのが、Trailing Spacesです

このプラグインを使用すると、コード中に不要なスペースがある際、赤色のハイライト表示をしてくれるので余計なスペースが入るのを防ぐことができます。

⑧:EvilInspector

コード上の全角スペースを色つきで表示し可視化することができます。

全角スペースが入っているとエラーとなってしまう場合が多いため、このプラグインで防止することができます。

⑨:Prettier

Prettierは、ソースコードを自動で整形してくれるプラグインです。

ソースコードを保存するとインデント、波括弧、改行位置、セミコロンを全て自動で整形してくれるので、チームで開発するときもバラバラの記述にならず、一貫性をもったコードを書くことができます。

とくに静的なHTML、CSS、JS(jQuery)での開発時に、非常に役に立ちます。

まとめ

いかがだったでしょうか。

紹介した以上9つのプラグインを導入すれば、プログラミング作業が格段にラクになると思います。

VSCodeには上記以外にも無数のプラグインがあり、今後も続々と追加されていくでしょう。

都度、必要に応じて追加していくことをオススメします!

▼こちらの記事もオススメ

大物YouTuberや経営者が愛用中!『Simplenote』全ての端末で同期できる最強のメモアプリを紹介!

皆さんはメモアプリを日常的に活用されているでしょうか。同期や管理に難があり、紙のノートや手帳の方が使いやすいと感じている人も多いかもしれません。ですが、端末やOSを問わず同期可能な無料アプリがあるので ...

続きを見る

【社会人の神器】マインドマップ作成ツール2選!使いこなせば確実に優秀なビジネスパーソンになれる

大学生や社会人になると、上司への報告やレポート提出または打ち合わせ等で、文章で伝える、資料を作るといった機会が増え続けます。 その際... わかりやすい構造的な文章が書けない 論理的で皆が納得するよう ...

続きを見る

この記事をシェアする

スマホ&タブレットのAnTuTuベンチマークスコアまとめページのバナー画像
当サイト厳選ガジェットセール(実施中のみ)
割引率 商品名(記事リンク)
割引価格
(セール詳細は記事参照)
ミニPC
GEEKOM A6のアイコン画像
5%オフ
『GEEKOM A6』レビュー、6万円台でパワフルな性能を実現、高級感のあるデザインも魅力的な高性能・高コスパミニPC
68,000円
64,600
4/1まで
スマホ
Blackview WAVE 8のアイコン画像
23%オフ
『Blackview WAVE 8』レビュー、1万円台で充実のパッケージ内容、サブ機にうってつけの格安スマホ
21,900円
超お得16,900
4/2まで
PCモニター
KTC G27P6S ゲーミングモニターのアイコン画像
18%オフ
『KTC G27P6S ゲーミングモニター』レビュー、240Hz・1440p対応、高品質スピーカーも内蔵する高性能モデル
115,000円
95,000
4/4まで
ミニPC
MINISFORUM UM880 Plusのアイコン画像
21%オフ
『MINISFORUM UM880 Plus』レビュー、圧倒的性能、OCulink対応で拡張性抜群なミニPCの決定版
109,990円
超お得86,990
4/6まで
保温冷蔵庫
BougeRV CR Pro CH ポータブル保温冷蔵庫のアイコン画像
20%オフ
『BougeRV CR Pro CH 25L ポータブル保温冷蔵庫』レビュー、保温・保冷の両方が可能なコンパクトかつ大容量モデル
49,980円
超お得39,984
4/14まで
ミニPC
GEEKOM GT1 MEGAのアイコン画像
6%オフ
『GEEKOM GT1 MEGA』レビュー、Intel Core Ultra搭載、仕事からゲームまで快適にこなせる高性能ミニPC
149,900円
140,906
4/30まで
電動カート
楽GoWagonのアイコン画像
45%オフ
『楽GoWagon 電動カート』レビュー、200kg運搬可能、折りたたんでコンパクトに収納できる高機能モデル
99,800円
超お得54,890
6/12まで
ランタン
BougeRV AL01 ランタンのアイコン画像
30%オフ
『BougeRV AL01 ランタン』レビュー、超小型&軽量なのに強力照度、人感センサーも備えた高機能ライト
3,980円
超お得2,786
8/15まで
イヤホン
EarFun Air Pro 4のアイコン画像
25%オフ
『EarFun Air Pro 4』レビュー、Snapdragon Sound対応の高コスパなワイヤレスイヤホン
9,990円
超お得7,491
終了日未定
続きを見る

実施中セールをすべて見る

ガジェットレビュー 一覧

  • この記事を書いた人

komi

兼業エンジニアです。 仕事の生産性が高まるPCアプリ、ビジネスツールの紹介の他、プログラミングや語学の学習情報を発信していきます。

-お役立ち情報, まとめ記事, 家電・その他
-, , , , , , , , , ,

S