コーディング作業などで使用するテキストエディタについて、ここ数年はAtomを使っていましたが、このたびVisual Studio Codeに変えました。
今のところ快適に使えています。
Atomを使っていた背景
AtomはGitHub製のオープンソースのテキストエディタです。わたしは4〜5年ほど前からAtomを使っていました。
最大の魅力はカスタマイズ性の高さ
Atomは拡張機能であるPackagesを追加することによって、使い勝手を自分好みにカスタマイズすることができます。
たとえばコーディングを補完してくれるEmmetを追加したり、minimapでコード全体を見渡せるようにしたり、コード上にcolor-pickerを追加したり… 当初は自分の思い通りのテキストエディタをカスタマイズできる点に魅力に感じて、Atomを使い始めました。
自由度の高さは諸刃の剣にもなる
Atomはカスタマイズ性の高さが利点ですが、その反面、自分でPackagesをインストールしないと使いにくいテキストエディタでもあります。使い続けているとPackagesのアップデートなどでエラーが起きることもあり、メンテナンスの手間が正直面倒くさいなあ…と思うようになりました。
HTML/CSS/jsのコーディングが主な自分にとっては、Atomは高機能すぎたのかもしれません。
動作が重い
Atomの評価としてよく聞く点ではありますが…とにかく、動作が重いです！
起動にも時間がかかりますし、作業中に固まってフリーズ→強制終了して再起動することも珍しくありません。
使っているうちに慣れてしまっていましたが、地味〜にストレスになります。
Visual Studio Code（以下VS Code）に乗り換えた理由
Visual Studio CodeはMicrosoft製のテキストエディタです。Atomと同様、オープンソースのため無料で使えます。
乗り換えた理由を端的に言うと、Atomを使っていて問題に感じていた箇所がすべてクリアされていると感じたためです。
詳しくは次のとおり。
デフォルトの機能で十分使え、カスタマイズの必要性が低い
VS CodeはAtomのようにPackagesをダウンロードしなくても、一通りHTML/CSS/jsのコーディングに必要な機能が備わっています。
コーディング作業に必須のEmmetも入っており、入力補完もあり、デフォルトでminimapの機能もあり…
環境設定が億劫でなかなかエディタの乗り換えに至りませんでしたが、VS Codeはインストール後すぐに作業に入ることができるので、評判の良さを聞いて「とりあえず試してみよう」と使い始めるにはちょうど良いテキストエディタでした。
その他、次のような機能が標準搭載されています。
- 作成したコードをデバッグできる
- 画面内でターミナルを起動できる
- Gitの連携機能があり、GitHubに直接Push可能
デフォルトにない機能を求める場合は、専用のマーケットプレイスから拡張機能をインストールして使用することもできます。わたしはとりあえず日本語化に関する拡張機能を追加しましたが、それ以外は特に追加しなくても、問題なく使えています。
とはいえ、この記事を書くためにVS Codeの拡張機能を調べていたら便利そうなものもあったので、今後追加するかもしれません。
ワークスペース管理が楽
AtomでいうところのProjectにあたる「ワークスペース」という機能があります。複数の作業ディレクトリを一覧にし、各ディレクトリ内を行き来しやすくできる機能です。
Atomの場合、Projectを保存するにはProject ManagerというPackagesをインストールして、そのメニューから保存や編集をおこなう必要がありました。
それでも十分使えてはいましたが、VS Codeはデフォルトの機能でワークスペースの管理ができます。
やりかたは簡単で、新規ウィンドウを開いて作業したいディレクトリを追加し、メニューからワークスペースを保存してしまえばOK。ワークスペースの表示・切り替えも、メニューからできます。
ディレクトリを横断して更新作業をおこなうことが多いので、とっても楽で便利です…
とにかく軽い！
Atomと比較にならないほど動作が軽く、作業中に止まる…といったことは起きていません。
インターフェースが見やすい
Atomは画面がシンプルで、基本的に上部メニューから項目を選択して操作していました。
VS Codeはサイドナビに主要な機能の操作アイコンがあったり、スタート時のメニューからワークスペースやファイルをワンクリックで開けたりと、直感的に操作方法がわかります。
当たり前のことかもしれませんが、とても使いやすく感じます。
VS Codeのインストールと使い方
サイトからダウンロードしてインストールしましょう。
ダウンロード方法や細かな使い方は、次の記事がたいへんわかりやすかったです。
【ゼロから！】Visual Studio Codeのインストールと使い方
現在、最新バージョンでは日本語化するときに拡張機能のインストールが必要ですので、その手順を念のために書いておきます。
日本語化の方法
1.拡張機能のJapanese Language Packをインストールする
メニューからCode>Preferences（設定）>Extensions（拡張機能）を選択します。（Macの場合）
表示されたMarketplaceで”Japanese Language”と検索し、Japanese Language Packをインストールします。
2.言語設定を日本語に変更する
メニューからView>Command Paleteを選択します。
表示された検索窓で”configure display language”と検索し（この文字列のうち一部の単語でもOK）、表示されたconfigure display languageを選択。
言語設定のファイルが開きますので、そのコードを次のように変更します。
具体的には、localeの値をjaに変更しています。
// Defines VS Code's display language.
// See https://go.microsoft.com/fwlink/?LinkId=761051 for a list of supported languages.
"locale": "ja" // Changes will not take effect until VS Code has been restarted.指定を変更したら保存し、再起動すれば日本語のメニューに変わっています。
まとめ
軽量で使いやすいテキストエディタ、VS Code。設定も簡単なので、ぜひ使ってみてください。
