2018年4月3日 【HTML編】Visual Studio Code おすすめプラグイン紹介 #02 Visual Studio Code 検索する Popular tags 生成AI(Generative AI) Looker Studio BigQuery AlloyDB Google Workspace 事例紹介 Cloud SQL Category 技術開発 Author SHARE Content こんにちは。Visual Studio Codeのおすすめプラグイン紹介の時間がやって参りました。暖かくなってきてすっかりコーディング日和ですね。 さて、今回はHTMLのコーディングに役立つプラグインを紹介致します。Visual Studio Codeを使ったことが無いHTMLコーダーのあなたも、これを機にVisual Studio Codeをインストールして使い始めましょう! おすすめプラグイン【HTML編】 タグの閉じ忘れに! HTMLやXMLでタグを記載するときに、開始タグを打ち終わったときに自動的に終了タグを生成してくれるプラグインです。 HTMLやXMLを書いていて、特にタグの入れ子が多くなってきた時とか、終了タグを忘れてエラーになることってないですか?この Auto Close Tag を入れれば終了タグを毎回書かずに、開始タグを書いたら自動的にタグを閉じてくれます。 HTMLを書く効率が格段に上がるので、イチオシのプラグインです! プラグイン名 Auto Close Tag URL https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag HTML、XMLの修正効率アップ! 開始タグを修正したときに、自動的に対になる終了タグを修正してくれるプラグインです。 Auto Close Tagの親戚のようなプラグインですね。HTML/XMLの要素を修正することはよくあるかと思いますが、このプラグインは開始タグを書き換えれば終了タグも自動的に書き換えてくれるので、修正効率はとても上がるかと思います。 Auto Close Tagと併せて使うとあなたのVSCode環境は間違いなく快適になるでしょう! プラグイン名 Auto Rename Tag URL https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag HTMLマークアップのサポートに! HTML用の追加コードスニペットです。入力中に、入力内容に応じたHTMLスニペットが表示されるようになります。 HTMLを普段からがっつり書く方はもしかしたら不要かもしれませんが、このプラグインを入れればHTMLの要素がわからなくなった場合など、スニペットが表示されるようになり入力のサポートをしてくれるようになります。入れておいて損はないですね! プラグイン名 HTMLSnippets URL https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets CSSの参照をサポート CSSクラスを指定するときに、入力補完してくれるのがこのプラグインです。 このプラグインを入れると、ワークスペースの中のCSSを読み込んでHTML上でクラス指定するときに入力候補を表示してくれるようになります。自分で定義したCSSでも、量が増えてくるとどんな名前にしたか忘れてきてしまうことってないですか?。このプラグインを入れておけば、自分で定義したCSSでもスムーズにクラスを指定できるようになると思います。 プラグイン名 IntelliSense for CSS class names in HTML URL https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion さいごに 今回は、ワタシがよく使っているプラグインの中でも、HTML向けで特に使いやすいものを紹介してみました。特にプラグインを入れなくても快適に使えるのがVisual Studio Codeではありますが、自分好みのプラグインを入れるとIDE顔負けの環境になってくるところも素晴らしいエディタだなぁと感じます。皆さんもお好みのプラグインを見つけて、ぜひ快適で有意義なコーディング環境を作ってください! 次はプログラミング言語系のプラグインを紹介したいと思います。それでは、また。 頂きましたご意見につきましては、今後のより良い商品開発・サービス改善に活かしていきたいと考えております。 Author Visual Studio Code 2018年4月3日 【HTML編】Visual Studio Code おすすめプラグイン紹介 #02 Category 技術開発 前の記事を読む 【4コマ漫画】SEひつじは定時退社の夢を見る~エナジードリンク~ 次の記事を読む 【IoT】MESH使ってIoTやってみまっし! ~番外編~ Recommendation オススメ記事 2023年9月5日 Google Cloud 【Google Cloud】Looker Studio × Looker Studio Pro × Looker を徹底比較!機能・選び方を解説 2023年8月24日 Google Cloud 【Google Cloud】Migrate for Anthos and GKEでVMを移行してみた(1:概要編) 2022年10月10日 Google Cloud 【Google Cloud】AlloyDB と Cloud SQL を徹底比較してみた!!(第1回:AlloyDB の概要、性能検証編) BigQuery ML ワークショップ開催のお知らせ 生成AI導入支援パッケージ Discovery AI導入支援パッケージ Google Cloud ホワイトペーパー 新着記事 2025年3月28日 Google Cloud Google Cloud Partner Top Engineer Meetup 2025に参加してきました! 2025年3月14日 お知らせ 【Google Cloud】type就活のデータ分析基盤の Google Cloud 移行を支援(キャリアデザインセンター様) 2025年2月28日 Google Cloud Looker セミナー「Developing Data Models with LookML」に参加しました! HOME 技術開発 【HTML編】Visual Studio Code おすすめプラグイン紹介 #02