135
146

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Visual Studio Code の Emmet機能を使ってコードを楽に書こう

Last updated at Posted at 2024-07-27

エンジニアのみなさま、日々の学習本当にお疲れ様です!
また本記事まで足を運んでいただき本当に感謝です。
約1分程度で読めるので最後まで読んでもらえると幸いです。

はじめに

コードを書くのに慣れてくると、いちいちコードを書くのが煩わしくなりませんか?
そんな時 Visual Studio Code(以下、VSCode) の Emmet機能 を使えば、HTML等、特にWEB関連のコードを書くときに補完をしてくれるため、作業効率が格段にUPします。
騙されたと思ってぜひ一度お試しくださいませ!

VSCodeのインストール手順は割愛させていただきます。

設定方法

1. VSCodeを開き、画面左下の「⚙️」 > 「設定」をクリック

スクリーンショット 2024-07-27 20.42.16.png

2. 「emmet」と検索し、画面中段にある「Emmet: Trigger Expansion On Tab」にチェック

スクリーンショット 2024-07-27 20.42.50.png

以上になります。

どんな事をしてくれるのか?

あるコマンドを入力後、「Tab」を押す事で良しなに補完をしてくれます。

例えば添付の様に

20240727.gif

「.」を入力して「Tab」を押すだけでdivを補完してくれたり

20240727.gif

必要なリスト数を入力して「Tab」を押すとリスト関連の補完をしてくれます。
めっちゃ便利です。

Emmet機能を使いこなしたい方向けに

チートシートも準備されています。
個人的には画面下部にある「HTML」を覚えていけば、Emmetの良さを実感いただけると考えます。

さいごに

いかがだったでしょうか?
コードを一から書いて疲れ果てていた方の一助になれば幸いです!

おまけ

唐突ですが弊社のご紹介もさせてください。

▼ コーポレートサイト

▼ Wantedly求人

弊社メンバーは学習した内容を日々Qiitaの記事にアウトプットしております。
弊社にご興味のある方、まずは求人を見てみてください!
ご応募お待ちしておりますー!

135
146
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
135
146

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?