【初心者・デザイナーおすすめ】テキストエディタをAtomからVScodeに乗り換えました。理由やインストール方法など。

今まで職場では会社指定のAdobe Dreamweaverを使い、自宅ではAtomを使用していました。ただ、自宅では頻繁に使わないせいもあってAtomの設定やエディターの画面、入力方法などに少し使いづらさを感じていて、評判のいいVScodeに乗り換えることにしました。

VScodeに乗り換える理由やインストールについて書いていきたいと思います。

VScodeとは

豊富な拡張機能、多数の言語に対応しているのはAtomとも共通しています。Atomがだんだん重くなってきていることもあり、無料かつ軽量でシンプルな使用感・でも自分好みに変えていけるVScodeに人気が集まってきているようです。

夫婦でソースをいじりたいという謎の願望があり、未経験者（Windows使用）の旦那が扱いやすく、Githubなどで一緒に作業ができるソフトを探していました。

＜求めていたこと＞

公式サイトでWindows／Linux／Mac版いずれか必要なものをダウンロードします。
ダウンロードをクリックすると別のページに飛ばされるかもしれませんが気にしないでください。

Windowsの場合は指示に従ってインストールするのみ。（「追加タスクの選択」はもし必要なものがあればしてください）
Macの場合は「Visual Studio Code.app」を「アプリケーション」フォルダに移動するだけで完了です。

このまま作業をはじめてもいいですが、基本的な拡張機能をインストールしてしまいましょう。
VScodeを開いて、左下の設定マークをクリックすると拡張機能の選択画面に移れます。

下の画像（１）の検索バーで拡張機能を探し、
（２）のボタンからインストールします。（画像はインストール済みのものなので「アンインストール」になっています。）

インストール後はVScodeを再起動するのがおすすめです。

HTMLやCSS、JavaScriptを使う方におすすめの拡張機能です。

メニューなどを日本語化してくれる拡張機能です。

全角スペースをハイライト表示してくれる拡張機能です。

HTMLの間違っている箇所を教えてくれる拡張機能です。

画像など、パスを予測して補完してくれる拡張機能です。例えば「src=”/image/」と入れると、imageフォルダのパスから候補を探してくれます。

簡易的なローカルサーバーを立ち上げて、リアルタイムプレビューをしてくれる拡張機能です。
インストールしたら、プレビューしたいサイトをファイルではなくフォルダ指定で開き、右下に表示される『Go Live』というボタンをクリックするとプレビューが開始されます。

Sassをリアルタイムでコンパイルしてくれる拡張機能です。
インストールしたら、下に表示される『Watch Sass』というボタンをクリックすると『Watching…』という表示に変わり監視してくれます。

Atomのときは設定が大変だったのにワンクリックでできたのはうれしい。

VScodeのインストールと簡単な初期設定についてまとめました。Atomよりも拡張機能の扱いが簡単で、画面も使いやすいのでさっそく活躍してくれています。参考までにどうぞ。