Web開発が捗る無料のテキストエディタ、Visual Studio Codeのインストールする方法

WebエンジニアがWeb開発をするにあたって必要になるテキストエディタですが、どれを使おうか迷うこともあるでしょう。
無料のテキストエディタは数多くあり、有名どころで行くとSublime TextやAtomなどがあります。

 
ここでは無料で人気のあるMicrosoft製のテキストエディタ「Visual Studio Code」をご紹介します。
Windows・Mac・Linuxと多くのOSで利用することができます。
初心者の方でも使いやすく、またWebエンジニアの方はよく使うことがあるMacのターミナルやWindowsのコマンドプロンプトによるコマンド操作も手軽に操作できるというかなり優れたテキストエディタです。
もちろん、Sublime TextやAtomでもパッケージをインストールすればいけると思いますが、Visual Studio Codeではデフォルトでコマンド操作も一緒にできるようになっています。
これは手間が省けて嬉しいです。

 
それではVisual Studio Codeのインストールからちょっと便利なコマンド操作の機能を見ていきましょう。
macOSで説明していきます。

 

Visual Studio Codeのインストール

Visual Studio Codeのオフィシャルサイトからダウンロードしてきます。

Visual Studio Codeをオフィシャルサイトからダウンロード

 
ダウンロードしたZIPファイルを展開(解凍)します。

ダウンロードフォルダのVisual Studio Codeの圧縮ファイルを展開

 
展開(解凍)したらそのままダウンロードフォルダに置いておくのもなくしてしまうとあれなので、しっかり管理できる場所に移動させます。
アプリケーションフォルダへ移動させましょう。

Visual Studio Codeのアプリケーションを移動

 
これでインストールの完了です。
あとはVisual Studio Codeのアプリケーションをダブルクリックして起動させます。

 

Visual Studio Codeの簡単な使い方

Visual Studio Codeを起動させたら一番最初にWelcome画面になります。
起動時にWelcome画面が毎回出るので、とくに必要ない方は「Show welcome page on startup」のチェックを外しておきましょう。

Visual Studio Codeの簡単な使い方01

 
何もファイルを開いていない時はフォルダを開いたり新規でファイルを作成するなどを行うためのショートカットキーが表示されていて教えてくれます。
エディタにディレクトリをセットしたりファイルを開く場合はフォルダからドラッグ&ドロップで持ってきたり、また上部メニューバーのFileからNew FileAdd Folder to Workspaceを選択して新規ファイルやディレクトリのセットを行います。

Visual Studio Codeの簡単な使い方02

 
エディタの左側のアイコンからいろいろ操作が可能で、一番上のアイコンでEXPLORERの表示・非表示を切り換えれます。

 
そしてWebエンジニアが欲しかったコマンド操作機能ですが、上部メニューの「Terminal」からNew Terminalを選択して起動させます。
また先ほどファイルを何も開いていない画面の時に表示されていたショートカットキーでも起動させることができます。

Macの場合は、
JISキーボードは「control + shift + @」
USキーボードは「control + `」
で起動できます。

Visual Studio CodeでTerminalを使う01

 
そしてもう少し面白いのが、Split Terminalのアイコンからターミナルを分割できるところです。
例えばTomcatでWebアプリケーション開発を行う時、片方でTomcatの起動からJavaファイルのコンパイルやいろいろ操作をして、もう片方ではデータベースを操作するといった感じでVisual Studio Codeのエディタだけであれもこれもいろいろ出来ちゃうんですね。

Visual Studio CodeのTerminalを分割

 
沢山あるテキストエディタの中で無料でここまで出来るのは大変ありがたいですね。

 

コードも書くしコマンド操作もするという方はMicrosoft製のVisual Studio Codeを使ってみてはいかがでしょうか。
意外と便利で使いやすくてやめられなくなるかもしれません。