Visual Studio Codeに拡張機能を追加する操作手順

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は「Visual Studio Code」の拡張機能をご紹介いたします。ちなみに拡張機能はワードプレスで言う「プラグイン」です。エディターをより使いやすくするためのカスタマイズ機能となります。

Visual Studio Codeに拡張機能を追加する操作手順

以前にインストール手順をまとめているのでぜひ併せてチェックくださいませ。

Visual Studio CodeをMacOS環境で無料利用する方法とは

下記では拡張機能の操作手順について解説させていただきます。

拡張機能とは?

カンタンに言えばVisual Studio CodeやSublime Textはテキストエディターです。

たとえばワードプレスも機能を追加する場合はプラグインが必要ですよね。テキストエディターも同じでメインで開発する言語に合わせて拡張機能を追加していくことで環境を整えていくことができます。

拡張機能は検索ボックスからキーワードを入力してインストールするだけでOKです。

HTMLをより便利にする拡張機能

では参考までにhtmlタグを効率的に使える拡張機能を3つご紹介いたします。

・Auto Rename Tag
・InteliSense for CSS class names in HTML
・HTMLhint

それぞれ説明させていただきますね。

Auto Rename Tag

htmlの開始タグを変更すると閉じタグも連動して自動修正してくれる拡張機能。

InteliSense for CSS class names in HTML

html内のCSS名を自動で候補として表示する拡張機能。コーディング速度の向上。

HTMLhint

html構文をチェックする拡張機能。

拡張機能をインストールする

参考までに「Auto Rename Tag」を追加してみましょう。設定はカンタンです。

インストールが完了したら以下の表示に切り替わります。表示が変わりましたよね。

インストール後は以下の操作が可能です。

・無効にする
・アンインストール

一時的にストップするなら「無効にする」。削除する場合は「アンインストール」。

その他で便利な拡張機能

開発時に便利な拡張機能をいくつかご紹介させていただきます。

PHP Intelephense

PHP記述時のコード補完やコードチェックを行ってくれる拡張機能。

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

PHP Debug

PHP言語でデバッグ(プログラミングの動作チェック)機能を使うために必要な拡張機能。

CSS peek

CSS記述箇所に素早く移動する拡張機能。

zenkaku

全角スペースを教えてくれる拡張機能。

Live Server

ブラウザでプレビューできる拡張機能。

もしその他にもおすすめの拡張機能が出てきたらあらためて追記いたします。

まとめ

本日は「Visual Studio Code拡張機能の追加手順」をご紹介させていただきました。

ワードプレスのプラグインとよく似た仕組みでVisual Studio Codeにも拡張機能が用意されています。追加するとエディター機能がさらに進化してより使いやすくなるのでぜひお試しくださいませ。

上記に書いた以外にもまだまだ便利な拡張機能がたくさんあるのでまたあらためて記事にいたしますね。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください