VSCodeをインストールして遊ぼう。

今日は巷で話題のVSCodeをインストールして、
HTMLを書くところまでやっていこうと思います。
最近全然新しいエディタとか触っていなかったので楽しみです。

1. 今日のお供

最近ちょっと気に入ってます。
炭酸で割るだけで簡単にゆずレモンサワーの完成です。

2. 公式サイトからダウンロード

まずは公式サイトからダウンロードします。 code.visualstudio.com

公式サイト

3. インストール

ダウンロードしたexeファイルを実行し、インストールしていきます。

インストール①

インストール②

インストール③

インストール④

インストール⑤

インストール⑥

インストール⑦

インストール完了！

4. 起動！＆日本語化

起動すると、まぁシンプルな画面が登場します。

VSCode

英語のままでも良いのですが、やっぱり分かりにくいので、ここは日本語化しましょう。 画面左側のアイコンの一番下（Extensions）をクリックします。

Extensions

拡張機能検索用の入力エリアに「Japanese Language Pack」と入力すると、Visual Studio Code用の日本語化パックが検索結果として表示されます。
そこのInstallをクリックし、インストールが完了したらVSCodeを再起動します。

日本語化パックのインストール

日本語化が出来ました。

日本語化完了

5. Emmet使ってHTMLでも書いてみましょう。

Ctrl＋nで新規作成を実施すると、まぁシンプルなエディタが開きます。

エディタ

htmlとして認識してほしいので、まずは保存し、htmlと入力してみるとびっくり、
コードスニペットでEmmetがでる！（びっくり

コードスニペットに！

もちろん選択すると展開されます。

展開

ではEmmet記法で書いて。。

展開されるかなぁ

Tabを押下したら。。展開されたー！

展開！

6. langはjaがいいですよね。

というわけで設定していきましょう。 メニューから「ファイル(F)」＞「基本設定」 > 「設定」をクリックします。

設定

右上の{}のアイコンをクリックします。

設定（JSON）を開く

setting.jsonが開きますので、そこに下記を追記し,保存します。

  "emmet.variables": {
     "lang": "ja"
  }

setting.json

VSCodeを再起動して再度、html:5を展開してみると。。
lang="ja"になりました！

jajaja

7. VSCodeインストール完了！

Emmetが標準で入っているのは本当に良いですね。
今後はVSCodeをメインエディタとして使っていこうかなぁ。。