コーディングするためのエディタは何を使えばいいの？
HTML・CSSなどのコードをかくときにメモ帳などのアプリを使用することは可能です。ですがとても効率が落ちてしまいますので、コードを書くのに特化したエディタを使いましょう。海外に行くのに飛行機を使うか泳いで行くかくらいの違いがあります。
現在、無料で使えてコーディングに適したテキストエディタはVisual Studio Codeを使用している方が多いです。とても使いやすく、関連した情報などもネットで多く見つかります。
今回はVisual Studio Codeの導入方法を解説していきます。
Visual Studio Codeの導入方法(Mac版)
それでは早速解説していきます。
公式サイトにアクセスしVisual Studio Codeをダウンロード
まずVisual Studio Codeの公式サイトにアクセスしていきましょう。
https://azure.microsoft.com/ja-jp/products/visual-studio-code
「Visual Studio Codeをダウンロードする」をクリックして次の画面に進みます。
自分の環境に合ったダウンロードボタンをクリックしてください。今回はMac版の解説記事ですので、Macを選択。
ダウンロードしたファイルの解凍とインストール
Macの場合はzipファイルがダウンロードフォルダに入っていると思います。このファイルをダブルクリックして解凍していきます。
するとVisual Studio Codeのアプリが姿を現しますので、これをアプリケーションフォルダに入れます。
Macの場合はFinderを開いている状態で ⌘(コマンド) + n を押すと新しいFinderウィンドウが出てきます。新しく開いたFinderウィンドウではアプリケーションフォルダを開いておきます。そこへVisual Studio Code.appをドラッグアンドドロップしていきます。
ここで一つ注意なのがアプリケーションフォルダにはプリケーションのアイコンが表示されていても実はフォルダになっているものがあります。参考画像ではAdobe XDなどがそうですが、間違えてその中に入れてしまわないようにしましょう。アプリケーションフォルダの直下にVisual Studio Code.appがある状態にしましょう。
最低限の初期設定
ここまででダウンロードとインストールは完了です。あとは最低限使えるところまでの初期設定をここですませてしまいましょう。日本語化と自動保存の設定、Live Serverのインストールです。
Visual Studio Codeの日本語化
Visual Studio Codeは標準だと英語表示だと思います。わかりにくいので、最初に日本語化しておきましょう。
まず拡張機能のアイコンをクリックします。
すると拡張機能を検索する入力欄が出現しますので、ここで「japanese」と検索します。
すると「Japanese Language Pack for Visual Studio Code」という拡張機能がトップに表示されますので、クリックして選択後「Install」をクリックします。
すると右下にポップアップがでてきますので「Change Language and Restart」をクリックしましょう。
Visual Studio Codeが再起動し、日本語化されています。
自動保存の設定
自動保存の設定も行っていきましょう。これをやっておけばいちいちファイルを保存しなくてもほぼリアルタイムで保存しておいてくれますので、手間が減ります。
上部のメニューの「ファイル」→「自動保存」にチェックを入れておきましょう。
最後に拡張機能Live Serverのインストールです。
まず拡張機能のアイコンをクリック。
検索窓で「live」と検索すると、Liveサーバーが最初に出てくるはずです。
Live Serverを選択したらインストールをクリック
右下にGo Liveという表示があれば成功です。
これでVisual Studio Codeの準備ができました。お疲れ様でした。