そもそも…
という方には以下の記事でテキストエディタの比較・紹介を行っているので、ご覧ください。
テキストエディタは VSCode がおすすめ！
前置きとして、VSCode を使ったことが無い方へ向けて簡単に VSCode のおすすめポイントを紹介します。
1. とにかく軽い
VSCode をクリックしてして実行していただければすぐに実感できます。まず起動が速いです。
また、ファイルを開くなどの動作でもストレスを感じることがありません。
2. マイクロソフト社公式
VSCode はマイクロソフト社公式のソフトです。アップデートが頻繁に行われていて、サポートが手厚いので安心して使うことができます。
3. 拡張機能が多い
後で詳しく話しますが、追加で便利な機能をたくさん入れることができます。
オリジナルのテキストエディターにすることができます！
まずは VSCode をインストール
既に VScode をインストールしていて、使える状態になっている方は読み飛ばしてください。
インストーラーはマイクロソフトの公式ページから無料でダウンロードできます。
公式ページへアクセスして、
をクリックするだけ！
ダウンロードをしたファイルを実行します。設定は基本的にはすべてデフォルトのまま「次へ」を連打でOKです。
インストールが完了したら早速起動しましょう！
その１ 拡張機能を使いこなそう
VSCodeがインストールできたら起動しましょう。
起動すると英語がずらり‥
拡張機能とは
VSCode は起動が早く、動作も軽いのが特徴です。ですが、インストールしたばかりの状態だと、もの足りないことがあります。
そこで、拡張機能というものがあります。拡張機能とは、便利にしてくれるツールみたいなものです。
マイクロソフト社公式が提供しているものもあれば、個人で作ることもできます。
日本語化パックをインストール
それではまず初めの一歩として、VSCode を日本語化しましょう。
英語の方が良いという方はそのままでよいですが、やっぱり見慣れている日本語の方が安心しますよね。
画面左のメニューから「拡張機能」をクリックします。そして「japanese」と入力をして検索をします。一番上に出てくる「Japanese Language Pack for VS Code」のインストールボタンをクリックしてインストールをします。
完了したら再起動してください。見慣れた日本語に切り替わっているはずです。
おすすめの拡張機能４つ
拡張機能はとてもたくさんあります。なんでもかんでもインストールすれば良いわけではありません。せっかく軽い VSCode が拡張機能によって重くなってしまう場合もあります。
例えば、Webサイトを作りたいとき、HTMLやCSSといった言語向けの拡張機能をインストールしますし、
アプリケーションを作りたいとき、Javaなどの言語向けの拡張機能をインストールしたりと、
時と場合によってインストールや、アンインストールをして、拡張機能を整理することが大事です。
さて、少し話がそれましたが、ここではだいたい何をするにも役に立つであろう、ずっとインストールしたままでも良いおすすの拡張機能を４つ紹介します。
インストール方法は日本語化パックをインストールしたときと同じです。
VSCode Great Icons
まずは見た目から！フォルダやファイルをカッコよくしてくれる拡張機能です。設定方法は、
ファイル(F) → 基本設定 → ファイルアイコンのテーマ
から行えます。
dark-plus-synta
こちらも見た目から！ダーク系の配色テーマです。デフォルトでもダークテーマは入っていますが、コードの配色が少し違います。お好みの配色テーマにしましょう！設定方法は、
ファイル(F) → 基本設定 → 配色テーマ
から行えます。
ちなみに、ダーク系の配色テーマの方が目が疲れにくいです。いかにもプログラミングって感じもしますよね！
Trailing Spaces
スペースをわかりやすく表示してくれる拡張機能です。例えば、コードの行の最後にスペースが入っていたり、インデント（コードの開始位置の字下げ）がずれていて見にくかったりと、
不要なスペースを無くすための拡張機能です。
Git History
こちらはやや一般向けではないかもしれませんが、Git を使用している人であればとても便利な拡張機能です。Git のコミット履歴、ブランチ分岐など、視覚的に表示してくれます。VSCode はデフォルトの Git のサポートが手厚いからこそインストールしておきたい拡張機能です。
バージョン管理システムのことです。ファイルがのどこが変更されたかを管理できるシステムで、複数人で開発を進めるときにはとても役に立ちます。個人でも使うことができます。
その２ ショートカットキーを使いこなそう
パソコンにおいて、ショートカットキーを使うことは何事においても効率的です。マウスは便利ですが、キーボード上で物事が操作できる方が確実に仕事が速くなります。
VSCode においてもそうです。まず初めに、覚えていただきたいショートカットキーがあります。
Ctrlキーを押しながら K と S
です。Keyboard Shortcut です。覚えやすいですよね。その名の通り、ショートカットキー一覧を表示してくれます。
ここを見れば、ショートカットキーがわからなくても調べることができます。例えば、「エクスプローラ」と検索すれば、エクスプローラを表示するショートカットキー (Ctrl + Shift + E) が出てきます。
覚えておきたいショートカットキー９つ
Ctrl + Shift + E
エクスプローラを表示します。
Ctrl + Shift + F
開いているフォルダ内のファイルから指定の文字を検索してくれます。
Ctrl + F は開いているファイル内での検索です。
Ctrl + Shift + D
デバッグモードに切り替わります。
Ctrl + Shift + X
拡張機能一覧を表示します。
Ctrl + Shift + P
コマンドを表示します。
Ctrl + , (カンマ)
設定画面が表示されます。
Ctrl + P
ファイルを検索できます。
Ctrl + F
開いているファイル内で文字を検索できます。
Ctrl + H
開いているファイル内で文字を検索し、置換ができます。
自由にカスタマイズ (応用)
実はショートカットキー一覧 (Ctlr + K, S) からショートカットキーを自由にカスタマイズできます。キーを自由に割り当てることができるということです。
例えば、別のテキストエディタ (Atom, Eclipse, IntelliJ などなど) で割り当てられているショートカットキーが違くて混乱する！という方は、別のキーへ自由に割り当てを変更することができます。
やり方は簡単です。ショートカットキー一覧で変更したい項目をダブルクリックして、新たに割り当てるショートカットキーを入力して Enter を押すだけです。
自分好みの VSCode にしていくことができます！
その３ 設定ファイルを使いこなそう
その１で拡張機能をインストールして、さらに便利に！とお伝えしましたが、そもそもの機能の設定をいじることで便利になることもあります。
また、VSCode の設定はとても扱いやすいです。
設定方法
ショートカットキーの紹介で触れましたが、Ctrl + , (カンマ) で設定画面を開いてください。設定項目がずらっとでてきました。
ここで VSCode の設定をいじることができます。
特に、「テキストエディター」の設定項目は VSCode を使う上で結構重要な設定項目が並んでいます
いろいろいじって試してみましょう。
カーソル
カーソルについて設定ができます。文字入力待機中の動き (点滅したり) や、滑らかな移動、カーソルのスタイルなどが変更できます。
フォント
テキストエディターは文字ばかりになります。できるだけ見やすいフォントがいいですよね。
フォントとは、例えば教科書で使われるような楷書体や、少しくずれた丸目のポップ体などのことです。
フォントの種類、大きさ、太さなど自由に変更することができます。
ミニマップ
プログラムコードが長くなるとスクロールする量が増えて、何がどこに書いてあるかわかりにくくなります。
ミニマップとは、そんなコードを縮小して全体を表示してくれます。
ミニマップを表示するかどうか、大きさ、表示位置などを変更することができます。
縮小するのでコードが小さくなり、読むことはできませんが、おおざっぱにコードの位置を把握する際には最適です。
設定について (応用)
応用編では、わかににくい部分もあるかと思います。実施に操作しながら読んでいただければと思います。
再度 Ctrl + , (カンマ) で設定画面を開いてください。(何回も使えば覚えちゃいます！)
何かテキトーに設定を変更してみてください。
例えば、「フォント」と検索をして、フォントサイズを 14 から 15 にしてみてください。
そして、Ctrl + Shift + P で「基本設定: 設定 (JSON) を開く」を選択してください。開かれた settings.json というファイルは次のようになっているはずです。
“editor.fontSize”: 15
}
settings.json ファイルでは設定がコードで記述できます。
設定画面での操作と、settings.json に書かれることは連動します。
json ファイルとは、データ定義言語です。パソコンに決まり事を教えてあげるためのファイルというイメージです。
もう一度コードを見てみましょう。よく見てみると fontSize と書かれています。これはフォントサイズのことです。
これが 15 となっているので、このコードの意味は
settings.json のメリットは？
設定は settings.json にコードで書きましょう！と言いたいわけではありません。
設定は Ctrl + , (カンマ) から設定画面で行えば良いです。
何が便利かというと、
別のパソコンや、VSCode を再インストールする際などに、今までの設定を反映しやすい
別の パソコン や、VSCode を再インストールするということは、別の開発環境になるということです。
いつも使い慣れた環境、設定ではなくなってしまいます。
再度設定画面から設定しなおせば良いですが、項目が多いと大変ですし、全く同じにできないかもしれません。
ですが、設定は settings.json に書かれることを知っていれば、このファイルをコピーすれば全く同じ設定の環境がすぐにできるというわけです。
まとめ
いかがでしたでしょうか？ VSCode おすすめの使い方３カ条を振り返ると、
その１ 拡張機能を使いこなそう
その２ ショートカットキーを使いこなそう
その３ 設定ファイルを使いこなそう
でした。少し難しいこともあったかもしれませんが、プログラミングをする上で必ず役に立つはずです。
VSCode は奥が深いです。まだまだいろいろな機能がたくさんあります。
ぜひ今回紹介したことをベースに、自分流のプログラミングスタイルを作ってみてください！
以上です。最後まで読んでいただきありがとうございました。
