【初心者向け】VS code（Visual Studio Code）のインストール・設定方法

プログラムを書く際に必要なエディターのご紹介です。プログラムを書く際はエディターを使用します。

世の中には様々なエディターがあり、ご自身のお好みエディターがすでにあれば、そちらをお使いいただけばと思いますが、なければマイクロソフト社が公開しているオープンソースのエディター「VS Code（Visual Studio Code）」をお使いください！使いやすいですし、様々プラグインもあり使っていて困ることはありません。

VS codeは転職ドラフトによる調査で、今一番使われているエディターらしいです。（以下ソース記事も貼っておきます）

VS codeのインストール・設定方法

では早速「VS Code」のインストール方法をお伝えします。

①「VS code」にアクセスして、「今すぐダウンロード」をクリック

VS codeをダウンロードします。

②お使いの環境に合わせたバージョンを選択

今回はWindows環境にインストールするので、一番左の「Windows」をクリックしてダウンロードをします。

③「VSCodeUserSetup」インストーラーがダウンロードされたら、立ち上げてください（Windowsの場合）

④「同意する」をクリックして「次へ」

⑤「追加タスクの選択」はそのままで

⑥「インストール」をクリック

インストール完了の画面が出たら、再起動を行い、「VS code」を立ち上げましょう。正しくインストールされている時は、左下検索画面に「VS code」と入力すると、以下のように「Visual Studio Code」と出てきますので、クリックしてください。

上記のような画面が表示され、VS codeが開けたらインストール・設定は完了です。

HTMLプレビューのプラグイン設定方法

今後、HTMLでコードを書いたとき、プレビューを見ながら修正・確認して進めていく予定です。HTMLプレビュー表示のプラグインもダウンロードしておきましょう。ブラウザを立ち上げて確認される方は不要ですが、流儀のない方は、合わせて以下の設定もされるといいと思います。

VS Codeの「Extension」をクリックして、「HTML Preview」と入力します。

「HTML Preview」が表示されるので、「install」を押してください。これで完了。

HTMLのコードを書いたら、ファイル上で

MAC：cmd+shift+v または cmd+k v
Windows：ctrl+shift+v または　ctrl+k v

でプレビューを見ることができます。

以上です。

まとめ

今回は、プログラムを書く際に必要なVS Codeのインストール方法・設定方法をお伝えしました。これでコードを書く環境は整いました。その他、環境構築も必要になりますが、Ruby on Railsの環境構築方法は記事にまとめておりますのでごかくにんください。

【初心者向け】Ruby on Rails 6 インストール方法（環境構築）

また、Ruby on Railsがどんなものか分からない方向けにも記事をご用意しております。興味のある方は是非ご覧ください。

【初心者向け】Ruby on Rails アプリ開発ロードマップ