vscode(Visual Studio Code)は、マイクロソフトが開発したテキストエディタです。今では１番人気といってはいいほどみんなに使われていますし、何と言っても『無料』で使えますし、プラグインもめっちゃ豊富なので、人気なテキストエディタなのです。
ですが、vscodeを使いたいけどどうやって入れたらいいのかわからんし、どう設定したらいいのかもわからないって人多いと思います。
なので、簡単にインストールして日本語化まで一気にしちゃって、コードをかけるまでの環境構築をできるように、解説していこうと思います。
vscodeインストール手順
＊macでのインストール手順です！
- ダウンロード＆起動
- 日本語化プラグインインストール
- 再起動
簡単な手順は上の大きな４ステップになってますが、間の細かい説明もしていきますね！最後には初心者の方特にHTML・CSSを使う方向けのプラグインなども紹介しておくので、自分でカスタマイズしていってくださいね！
1.ダウンロード＆起動
1.上のリンクからダウンロードページに飛んでください
2.ダウンロードしたzipファイルをクリックして展開して、vscode のアプリマークをクリックして起動
3.アプリケーションを開くをクリックする。
4.vscode の起動完了
2.日本語化プラグインをインストール
1.上のリンクから日本語化のプラグインインストールページに行ってインストールをクリック！
2.vscodeを起動しますか？と表示が出るので『continue』をクリック
3.vscodeでのプラグインインストールをしますので『intall』をクリックしてインストール
3.vscodeを再起動
1.プラグインのインストールが終わると、再起動しますか？と出てくるので『yes』をクリックして再起動
2.再起動完了！日本語化もされているの使いやすくなりました！
ここまで終わると、いつでもプログラミングができる環境になっていますので、存分にプログラミングしちゃってください！
もし、色々な機能をvscodeにもたせたい場合はプラグインを入れるともっと使いやすくなります。なので、次は基本的に使いやすくするプラグインを紹介します。なので興味のある方はどうぞ！
vscodeでオススメのプラグイン集
プラグインは作業を効率化してくれて、いつも手間取っていた作業時間を短縮してくれる役割があります。なので、自分がしている作業でもっとも効率的になるプラグインをインストールした方がいいです。
ですが、共通して使いやすく出るプラグインがあるので紹介しときます！
vscode-icons
vscode-iconsはファイルやフォルダの横にアイコンが表示されるプラグインです。
ファイルとかを見やすくするため、どのタイプのファイルなどがアイコンだけで判断できるようになるため、すごく見やすく使いやすくなる印象です。
アイコンがつくのでごちゃごちゃするのが嫌いな人は入れない方がいいと思います。
Path Intellisense
Path Intellisenseはパスの入力補助をしてくれます。
どうゆうことかというと、画像をimgタグに入れたいときに
image/top/sample.png
と入力したいのなら、imageの地点で次の候補を勝手に呼び出してくれるので、フォルダを見てなんて名前だったかの確認なども入りません。便利なプラグインです。
Trailing Spaces
Trailing Spacesは余計なスペースを赤色で検知してくれます。設定によっては自動でスペースを消してくれるので便利です。
Auto Rename Tag
Auto Rename Tagはタグの修正時に先頭のタグを変更すると自動的に後ろのタグも変更してくれるプラグインです。いちいちタグ変更を２回もしないくても１回だけで済むので便利な機能です。
indent-rainbow
indent-rainbowはコードの列を色分けしてくれます。タグからタグのラインをカラフルに分けてくれるため、見やすくなります。
Color Highlight
Color Highlightは色のタグを入れたときにその色に応じて、同じ色をそのコードに反映してくれるプラグインです。例えば、下の画像のように白色の#fffを選択すると白色で塗りつぶされます。
Auto Close Tag
Auto Close Tagはタグを打った後に自動的に閉じタグまで入れてくれます。例えば、<div>まで打つと最後の</div>を自動で打ってくれるので、ちょっとした手間が省けます。中には自分で全部打ちたい人とかもいるので使いたかったらどうぞ！
まとめ
vscodeはテキストエディタの中でもずば抜けて性能がいいのに無料ってとこが人気の１つなのだと思います。しかし、がっつりある特定の言語を使用する場合は物足りなくなったりするので、有料のテキストエディタを使う人がいます。これは好みなので、自分が好きなテキストエディタを使ってください！
それとプラグインは山ほどあって全部シェアできないので、自分が欲しいの機能や使う言語によって自分にあったプラグインを探してください。
