まずはこれだけ！　テキストエディタの拡張機能の導入！（VScode）

# まずはこれだけ！　テキストエディタの拡張機能の導入！

「テキストエディタ導入できたけどいきなりコード書いていいの？」
もちろん書いていいです！
でもその前に**少しだけテキストエディタをカスタマイズして使いやすくしましょう！**

　わかりやすく解説します。

## ペルソナ

- プログラミングをこれから勉強しようとしている方
- 初めてプログラミングを書こうと思っている方
- テキストエディタ導入できた方

**まだ導入できていない方は[こちら](https://qiita.com/rrrrr1231/items/83798faca9a95a6e0f50)を参照してください**

## 内容
テキストエディタの拡張機能の導入（詳しいコーディングは解説しません）

## Key Word

- 拡張機能（extensions)


# 目次

1.拡張機能とは？
2.実際に導入してみる
3.まとめ


## Contents

### 1.拡張機能とは？

前回の[まずはこれだけ！テキストエディタの導入！（VScode）](https://qiita.com/rrrrr1231/items/83798faca9a95a6e0f50)で、
テキストエディタをダウンロードして使う理由の一つに、
**プログラミング開発に特化したカスタマイズができるから**とご紹介しました。

そのカスタマイズのことを**拡張機能(extensions)**と言います!
（ちなみにextensionsという英語を覚える必要は全くないです)

実際にプログラミングをする前に、最低限の拡張機能を入れておきましょう！
（とにかくプログラミングやらせてよ！という方はこの記事は読み飛ばしても構いません！
ただ、おそらく何処かのタイミングで実装することになると思うのでその時振り返ってみてください）


### 2.実際に導入してみる

では、早速導入しましょう！

①　**VScodeを開く**
**commandキー+スペースキー**で検索ボックスを開き、VSと打てば見つかると思います。
(ここでは詳細省きますが、VScodeがいつでも開きやすいようにDesktopや、Macであれば「DOCK」に
移動してもいいですね）

[![Image from Gyazo](https://i.gyazo.com/44e54367c6e4b2d1ccf8cc7d09234635.gif)](https://gyazo.com/44e54367c6e4b2d1ccf8cc7d09234635)

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

無事にVScodeを開けたでしょうか。

では拡張機能のインストールをしていきましょう！

まずはVScodeの左のサイドバーに
<img width="40" alt="VScode拡張機能ボタン.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/7e379623-f61d-5ce5-9324-5da6fd6f6668.png">

このボタン見つかるでしょうか？
こちらをクリックしてください。

[![Image from Gyazo](https://i.gyazo.com/d5726735002cc0686b8b640f24ca1596.gif)](https://gyazo.com/d5726735002cc0686b8b640f24ca1596)

なにやらタブが開いたと思います。
（実際の画面は個人で異なることがあるため、上記と全く一緒でなくても大丈夫です！）


いよいよインストールですが、今回インストールする拡張機能は以下の４つです。

- Japanese Language Pack for Visual Studio Code
- zenkaku
- YAML
- HTML Snippets

（それぞれの機能の詳細は省きますが開発しやすくするための機能という認識でいいです）

インストール手順ですが
拡張機能のタブの上部に、検索ボックスのようなものがあると思います。
そこに上記の拡張機能の名前をコピー&ペーストをしましょう！

具体的に
- Japanese Language Pack for Visual Studio Code
を例にしてやってみましょう！
（ちなみにこちらはエディタを日本語表記にするものです。英語で平気な方は入れる必要はありません）

[![Image from Gyazo](https://i.gyazo.com/4bbb7cb80c4b1527c7c3f99d158d47d9.gif)](https://gyazo.com/4bbb7cb80c4b1527c7c3f99d158d47d9)

①検索ボックスに「Japanese Language Pack for Visual Studio Code」を
コピー&ペーストして検索する

・検索前
<img width="283" alt="Vs code.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/2c7895ac-d57d-ec12-125b-6240e4fd03bc.png">


・検索後
<img width="279" alt="VS code拡張機能検索後.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/c2ede25f-8b98-8042-1991-25768b2fd82a.png">

すると検索ボックスの真下に「日本語」とか「instll」書かれたものが出てきましたね？

では「install」ボタンを押しちゃいましょう！

②インストールする！
[![Image from Gyazo](https://i.gyazo.com/8abfa984c08d0cf4ce5f12ed75564117.gif)](https://gyazo.com/8abfa984c08d0cf4ce5f12ed75564117)

インストールボタンを押すと左の広いエリアにその拡張機能の説明文が出ます。
正常にインストールが完了していれば「install」ボタンが消えて「uninstall」ボタンに変わります。

この拡張機能はVScodeを日本語表記にするものですがこれだけでは設定が終わりません。

少し面倒ですがもう少し頑張りましょう！

③日本語設定を完了させる
・**commandキー + shiftキー + p** で検索ボックスをだす
・検索ボックスで**config**と入力して検索する
・**config display language**を選択する
・さらに検索ボックスが表示されるので、**「ja」**と入力する
・VScodeを再起動する
・完了！

順番に画像を参考にしながら実行してみてください！

・**commandキー + shiftキー + p** で検索ボックスをだす
<img width="848" alt="b71b54abdbbfce3e4a21d31057d47c6a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/49c4d198-3c63-6b52-0b6d-427b2e3cb6ba.png">

・検索ボックスで**config**と入力して検索する
<img width="613" alt="74f59584966d67c3e1b833da32565e0b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/35a2ab77-e362-f068-477a-070ac0235ddd.png">

・**config display language**を選択する（青枠内をクリックしてください）
<img width="613" alt="74f59584966d67c3e1b833da32565e0b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/82275441-e396-097b-aa22-89b2b57884bd.png">

・さらに検索ボックスが表示されるので、**「ja」**と入力する
<img width="655" alt="d1addafbc14987c87402882cb10348ef.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/e3c109e7-ffd6-5e32-f64d-cffdbb185fef.png">

・VScodeを再起動する （Restartボタンをおす)
<img width="571" alt="14a084197657a5c9564293a936faf397.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/2d23d3be-9d58-23a1-9092-a28cebedcb87.png">

・完了！　日本語表記に変わっていると思います。
<img width="1440" alt="dc14734eeacd894da47b4fe251784410.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/70023345-16f2-90af-9cf7-3a6775260b8e.png">

お疲れ様でした！！
少し設定が複雑でしたができましたでしょうか？

残りの３つの拡張機能は「install」すればすぐに使えるのでぜひやってみてください

- zenkaku
- YAML
- HTML Snippets


### 3.まとめ

今回のポイントは

**テキストエディタに拡張機能を導入する方法**

- 基本的には検索してインストールボタンをおす。
- 例外的にその後の設定が必要なものもある。


でした！


今回はテキストエディタに拡張機能をインストールする方法をお伝えしました！
他にも拡張機能はたくさんあるのでぜひ調べてみてください！

（ただあれもこれもと入れすぎると動作が遅くなるなどの弊害もあるので本当に必要なものだけ入れるようにしましょう）

みなさんそろそろ「実際にプログラミングを書かせてくれよ！」となってきていると思います。

お待たせしました！

次回から実際に手を動かしながらコードを書いていきましょう！！

今回も最後までありがとうございました！！