プログラミング学習初心者のための情報メディア
Visual Studio CodeでEmmetが使えない場合の対応方法について解説します。
タブキーを押してもコードが展開されない場合にチェックしてみましょう。
Code > 基本設定 > 設定
検索キーワード入力欄に”emmet”と入力し、設定項目を絞り込みます。
“Emmet: Trigger Expansion On Tab”のチェックボックスをONに設定する
設定は自動で保存されます。
これで、タブキーを押したときに、コードが展開されるようになります。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する
プログラミング初心者の受講生の方から良くいただくご質問、
Visual Studio Codeのメニューを、
ついて解説します！
チャンネル登録お願いします！
Visual Studio Codeをインストールするとメニューは英語表記です。
英語が並んでいると、それだけで見るのが嫌だなと思ってしまう方もいらっしゃると思います。
しかしながら、Visual Studio Codeを普段使う時によく使うメニューは、限られていて、
レベルの単語の意味がわかれば、日常のコーディング作業は問題なく使えます。
すでに実質日本語になっているような簡単な単語です。
わからない英単語が出てきたら、ネットの辞書で調べれば大抵理解できます。
私は、Visual Studio Codeの細かい設定や操作についてネットで調べる時に、
英語の情報に頼ることも多く、英語表記のままにしておくことが多いです。
もちろん、メニューを日本語化することもできます。
メニューの View > Command Paletteを選択
languageと入力して、検索。
Configure Display Languageを選択
ここで、もし、jaが表示されている場合は、jaを選択すれば日本語化できます。
jaが表示されていない場合は、
Install Additional Languages を選択
Japanese Language Pack for Visual Studio Codeを選択
Installをします。
メニューのView > Command Palette > Configure Display Languageを選択
Japaneseを意味する、jaを選択します。
Visual Studio Codeを再起動をします。
メニューの日本語化ができました。
表示 > コマンドパレット > Configure Display Language
Englishを意味する、enを選択します。
再起動を求められるので、再起動をします。
Visual Studio Codeのメニューが英語表記に戻りました。
Windowsでも、基本的には同じ操作です。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する
この記事では、VSCodeを使用する上で必須となるプロジェクトフォルダ機能の設定方法について解説します。
この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「新HTML入門」のサポート記事です。
なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。
VSCodeはVisual Stduio Codeの略で、Microsoft社が開発しているエディタを指します。
VSCodeは様々な言語やOSに対応しており、拡張機能も豊富で効率的に開発を進めることができるため、人気が集まっています。
プロジェクトフォルダとは、プログラムを作成する際の作業フォルダを指します。
プロジェクトフォルダを設定することでコーディングを効率的に進めることができます。
ここでは、デスクトップに配置した「web」という名前のフォルダをプロジェクトフォルダに設定する想定で、手順について説明します。
まずVSCodeを起動します。
VSCodeを起動すると、デフォルトではプロジェクトフォルダは設定されていない状態です。
左のカラムの一番上が「Explorer」のアイコンです。
「Explorer」アイコンをクリックすると、右側に「You have not yet opened a folder」という表示が出るので、その下の「Open Folder」ボタンをクリックします。
なお、VSCodeの左上の「File」をクリックして、「Open…」を選択しても同じ操作が可能です。(Windows版では「File」から「Open Folder…」を選択)
Finderまたはファイルエクスプローラーが表示されるので、プロジェクトフォルダを選択します。
プロジェクトフォルダを設定すると、Exploerのカラムにプロジェクトフォルダの中身が表示されます。
今回は、「web」フォルダの中に「html-basic」という名前のフォルダが存在するので、その中身が一覧表示されています。
プロジェクトフォルダを設定すると、フォルダ内のファイル構成が一目で分かるようになるので便利です。
ファイル名をクリックすると、ファイルが右側のタブで表示されます。
プロジェクトフォルダはコマンドラインからも設定できます。
VSCodeをダウンロードするとコマンドラインでcodeコマンドが有効になります。code フォルダ名とすることで、該当フォルダをプロジェクトフォルダとしたウィンドウが立ち上がります。
WindowsではPowerShellまたはコマンドプロンプト、Macではターミナルから起動可能です。
$ cd ~/Desktop $ ls web $ code web
ここでは、インターネットからダウンロードした画像をプロジェクトフォルダに追加し、VSCodeでプレビュー表示する方法ついて説明します。
①画像のダウンロード
Webサイトなどで表示されている画像をダウンロードして利用したい場合について解説します。
画像を右クリックして、「名前をつけて画像を保存」をクリックします。
②画像のドラッグ & ドロップ
ダウンロードした画像をプロジェクトフォルダにドラッグ & ドロップします。
VSCodeで既にプロジェクトフォルダを設定している場合は、直接画像ファイルをドラッグ & ドロップすることも可能です。
③VSCodeでプロジェクトフォルダを開く
VSCodeのプロジェクトフォルダにダウンロードした画像が追加されています。
画像ファイル名をクリックすると、右側のタブに画像が表示されます。
VSCodeで画像をプレビュー表示することができました！
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する
Visual Studio Code（VS Code）でEmmet省略記法を有効にする方法について説明いたします。
デフォルトではOFFになっているため、ONに設定する必要があります。
Emmetは、主にHTMLやCSSの記述をサポートしてくれるライブラリです。
メニュー > 基本設定 > 設定
下記を追加
“emmet.triggerExpansionOnTab”: true
htmlファイルで、下記のように入力
div>ul>li ※Tabキーを押すと展開される
<div>
<ul>
<li></li>
</ul>
</div>
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する