エディタにこだわるべき理由

エンジニアにとって、テキストエディタは非常に重要なソフトウェアです。

その理由は、JavaやJavaScript、Python、HTMLなど様々な言語をコーディングする際に使うからといえるでしょう。

統合開発環境（IDE）にエディタ機能が備え付けられている場合も少なくありませんが、ソースコードを記述することに特化しているのが「エディタ」。

コーディングに役に立つ機能や使い勝手、UI、動作の軽快さなどといったメリットがあります。

これにより統合開発環境ではなく特定のエディタを愛用しているエンジニアの方も少なくありません。

また、エディタによってはプラグインなどを追加して機能を拡張して自分好みにカスタマイズできるものも。

自分の使いやすいように細かい部分までこだわり自分だけのエディタを作り出すことも可能です。


Microsoft製の「Visual Studio Code」に注目

今回の記事では、Microsoftが開発・リリースしているエディタ「Visual Studio Code」に注目していきます。

「VSCode（ブイエスコード）」とも呼ばれるエディタですが、一体どのような機能や特徴を持っているのでしょうか。

この記事ではVSCodeの基本的な使い方や機能を、初心者の方向けに解説していきます。

また、VSCodeのダウンロード・インストールの流れはもちろん、初期設定についてもチェック。

現役のエンジニアからも根強い人気・支持を得ている、VSCodeについて知識を深めていきましょう。


Visual Studio Codeが対応している言語

Visual Studio Codeは、多くの言語に対応しています。

  1. C
  2. C++
  3. C#
  4. Java
  5. JavaScript
  6. Python
  7. Ruby
  8. HTML
  9. …etc

上記は対応言語の一部で、他にも数多くのプログラミング言語などに対応しています。

VSCodeだけで様々な言語を扱えるので、言語に応じてわざわざエディタなどを切り替えたりする必要がなく便利です。


Visual Studio Codeのインストール手順

それでは早速、Visual Studio Codeをパソコンに導入していきましょう。

まずはダウンロードからです。


VSCodeインストーラは公式サイトからダウンロード

VSCodeのインストーラは、公式サイトからダウンロードすることが可能です。

こちらのリンクからインストーラをダウンロードしましょう。

Visual Studio Code 公式サイト

「今すぐ無料でダウンロードする」というボタンが設置されているので、そのボタンをクリックすればダウンロードページへ移動することができます。

ダウンロードページではWindows、Linux、macOSとOSごとにインストーラを選択できるようになっています。

使用しているパソコンのOSに応じて、適切なインストーラをダウンロードしましょう。

Windowsの場合「User Installer」、「System Installer」、「.zip」と3つの選択肢があります。


.zipをダウンロードする場合の注意点

ちなみに「.zip」を選択した場合自動でアップデートが行われません。

再度.zipをダウンロードして、手動でアップデートを行う必要があるので注意してください。

ただし、ダウンロードしたzipファイルを解凍（展開）するだけですぐにVisual Studio Codeが使用できるようになるというメリットもあります。

今回はUser Installerを前提にして解説していくのでご了承ください。

ダウンロードが完了するまで、少し待ちます。


実際にインストールを行う

インストーラがダウンロードできたら、いよいよパソコンへVisual Studio Codeをインストールです。

ダウンロードしたインストーラをダブルクリックしましょう。

「Microsoft Visual Studio Code (User) セットアップ 」が立ち上がるので、使用許諾契約書を確認し、同意します。

その後インストール先を選択できます。

基本はデフォルトで問題ありませんが、必要に応じて適宜変更してください。

続けてプログラムグループの選択画面が出てきます。

作成してもしなくても問題ないので、必要や好みに応じて変更しましょう。

その後表示される追加タスク選択でも、必要に応じてチェックを入れていきます。

ただし、「PATHへの追加」は必ずチェックを入れるようにしましょう。

また、他の項目もチェックを入れておくと便利なので「絶対にいらない」と思わない限りはチェックすることを推奨します。

追加タスクを設定し終えると、ついにインストールがスタート。

インストールボタンをクリックし、完了するのを待ちましょう。

これで、Visual Studio Codeのインストールが完了しました。


Visual Studio Codeの初期設定

さて、Visual Studio Codeのインストールが完了したら、初期設定をしていきましょう。

ただしVSCodeは特段設定を変更せずにそのままでも十分に使いやすいエディタです。

そのため、分からないまま無理に設定を弄ったり、よく分からないという方はひとまず設定を変更しないのも選択肢の1つといえるでしょう。


設定画面を開く

では、設定画面を開いてみましょう。

ファイルから「基本設定」、「設定」を選択すれば設定画面を開くことが可能です。

非常に設定項目が多いので、どれをどう設定すればいいのかなど若干困惑する可能性も考えられます。


フォントの設定

フォントサイズを変更したい場合、検索画面に「font」と打ち込みましょう。

フォントサイズの項目が表示されるので、大きさを変更できます。

フォントファミリーについても「fontfamilly」と入力すれば設定が表示されるので、好みのものに変更できます。

既にパソコン内にインストールされているフォントから選ぶので、必要に応じて新しくダウンロードしてもいいかもしれません。

ネット上では様々なプログラマー向けフォントなどが無料で公開されているので、探してみてもいいでしょう。


改行について

Windowsだけで開発を行う場合は変更する必要はありませんが、MacやLinux環境でも同一ファイルを扱う場合は改行コードを変更しましょう。

というのも、WindowsとMac・Linuxの改行コードが異なるからです。

改行コードの設定を変更せずにそのまま開くと、レイアウトが崩れてしまいます。

そのため、設定で改行コードを予め変更しておきましょう。

先ほど同様検索ボックスに「改行」もしくは「eol」と記入して検索してください。

すると「Files:Eol」という項目が表示されます。

デフォルトではautoになっているので「\n」に変更しましょう。

「\n」がMacおよびLinuxの改行コード「LF」になります。


既に作成済みファイルの改行コードを変更したい場合

上記改行コードの設定を行う以前に作成・保存したファイルでも、後から改行コードを変更可能です。

ウィンドウ右下に「CRLF」など改行コードが表示されているので、その部分をクリックして、改行コードを選択・変更できます。

この設定変更は、当該ファイルにのみ適用されるということも頭に入れておきましょう。


拡張機能について

Visual Studio Codeには、拡張機能を追加することも可能です。


拡張機能ペインの表示

拡張機能をインストールするには「表示」から「拡張機能」を選択してください。

拡張機能ペインが表示されるので、この画面で拡張機能のインストールを行なったり、管理を行います。

おすすめの拡張機能を表示させることなどもできるので、上手く活用していきましょう。

VSCodeには様々な拡張機能がありますが、今回は特に便利なものを少しだけピックアップしておきます。


Auto Rename Tag

Auto Rename Tagは、HTMLのタグを一括で書き換えることができる拡張機能です。

既に存在しているタグの、開始タグか閉じタグのどちらかを変更すれば、もう片方も自動で書き換わってくれます。


GitLens

GitLensは、コミット単位でファイル比較などができます。

Gitを利用されているエンジニアの方はぜひとも導入してみましょう。


Japanese Language Pack

Visual Studio Codeはデフォルトでは英語です。

もちろん英語のままでも使用には問題ありませんが、やはり母国語である日本語の方が使いやすいのは紛れもない事実。

日本語でVSCodeを使用したいという方は「Japanese Language Pack」を導入してみましょう。

UIなど日本語で使用できます。


VSCodeの使い方

さて、VSCodeはあくまで「エディタ」です。

そのため、使い方は特に複雑ではありません。

基本的に直感で使うことができるでしょう。

メイン画面で開発言語を打ち込み、コーディングをしていくというのが主な使い方になります。

拡張機能を導入するとそれぞれの使い方を把握しないといけませんが、デフォルトではさほど難しい操作手順はありません。

基本的なフォルダーの開き方などは、左に表示されている「アクティビティバー」と呼ばれるメニュー内にある一番上のアイコンをクリックしましょう。

起動状態では何も表示されていないはずなので、サイドバーに表示される「フォルダーを開く」ボタンをクリックしてください。

これで、フォルダーを開くことができます。

新しくファイルを作成する際などもVSCodeだけでできるので、非常に便利です。


VSCodeの持つ機能

VSCodeは拡張機能を導入せずとも、デフォルトで十分に便利な機能を有しています。


インテリセンスでコーディングの効率をUP

Visual Studio Codeは、強力な補完機能を有しています。

VSCodeで何かコードを記述していると、途中で補完候補を上げてくれることに気がつくでしょう。

選択してTabを押せば、その候補を即座に入力可能です。

使いこなせば、開発・コーディング効率が間違いなく上昇するでしょう。


Emmetで効率を格段に上昇させる

VSCodeは、デフォルトでEmmetを搭載しています。

EmmetとはHTMLタグなどを少ない記述で補完入力できるという機能で、開きタグ・閉じタグを一瞬で作ることができます。

これもコーディングの効率や速度を格段に上昇できるので、ぜひとも有効活用したい機能です。

Emmetは、他のエディタでは拡張機能・プラグインとして後から追加しなければならない場合も少なくありません。

それがインストール時点で最初から使えるというのは、VSCodeの非常に大きなメリットだといえるでしょう。


VSCodeを使いこなすことで開発の効率を格段に上げられる

今回様々な観点から解説を進めてきたVisual Studio Codeには、非常に数多くの機能や設定項目が存在しています。

拡張機能も豊富にリリースされているため、自分好みのものをインストールしてカスタマイズすることも可能です。

VSCodeを使いこなすことで、間違いなく開発・プログラミング・コーディングの効率を上昇させることができるでしょう。

今回の記事で紹介したもの以外にも、数多くの便利機能・拡張機能・設定項目が存在しています。

特に設定に関しては非常に奥が深く、テキストベースで細かい部分までカスタマイズを行うことがかのうです。

ぜひ、VSCodeについて更に深い部分まで調査してみてください。


エンジニアにとってエディタは「相棒」である

今回は「Visual Studio Code」というエディタにフォーカスを当てて注目してきましたが、他にもエディタは数多く存在しています。

コードを書く機会の多いエンジニアにとって、エディタは自分の仕事をする上での相棒と呼べるほど身近なもの。

VSCodeはもちろん、様々なエディタを試してみましょう。

自分の手に馴染む使いやすいエディタを見つけられれば、開発へのモチベーションも高まります。

エンジニアとして開発に対する高い意識を維持するためにも、決してエディタを軽視しないようにしましょう。

拡張機能なども含め自分の使いやすいエディタを見つけてみてはいかがでしょうか。