Macに変えたらAtomがすぐ落ちるのでVisual Studio Codeに変えてみた

Visual Studio Code イメージ
最新のiMacとMacbookProを導入したはずなのに、MacだとテキストエディタのAtomがすぐ落ちる。
WindowsとLinuxでは使えていたのだが。

このおかげで、うちの専務はご機嫌ななめだ・・・

これは何とかしなければならない。

そこで、すぐに代わりのエディタを探すこととなった。

結局のところ最適なWebオーサリングツールは?

ウェブ制作業務でずっとExpressions Web4を使っていたこともあり、うちの専務はWebオーサリングツールのWYSIWYG編集画面がないと仕事にならない。Macに移行するにあたり、Expressions Web4に近いものとして、少し前からテキストエディタのAtomを導入して様子を見ていた。

AtomはWindows, Mac, Linuxいずれでも動作し、atom-html-previewというプラグインを入れておけば、分割した画面の片方でhtml、もう片方でブラウザプレビューが表示できる、WYSIWYG編集画面に近いプラグインだ。ただし、あくまでプレビュー画面のためそこで編集できるわけではない。

同様のエディタにBracketsというものがあり、こちらにもライブ・プレビューというプラグインがある。しかし、Bracketsでは同じワークスペース上に表示出来ず、別途ブラウザを立ち上げて表示するというもの。これではWYSIWYG編集画面に期待している専務の御眼鏡にかなわない。

やはり、現状うちの業務に応えられるのはAtomだという結論に至った。

もちろん、ベタ打ち派ならWindowsのTerapad(MacではCotEditorなど)のように、シンプルなテキストエディタが良いという人もいるだろう。うちの場合、ウェブ制作が中心のhtmlが多く、エディタ画面で作成しながらも、やはりアップロード後の体裁などを確認するプレビュー機能は欠かせない。

【関連記事】

Webオーサリングツールに代わる強力テキストエディタ「Brackets」と「Atom」

2020年1月にはサポートが終了してしまうWindows7。現在会社で使用しているメインのPCはWindows7のため、早々に対策を立てねばならない。2019年中に完全にWindowsから脱却してLinuxに移行したいのだが、いくつか懸案がある。そのうちのひとつが、会社のウェブ制作を支えるWebオーサリングツールの問題だ。

MicrosoftのオープンソースVisual Studio Code

Windows、Linuxでは問題なく使えていたAtomだったが、冒頭で触れた通りMac環境に変えてからというもの、一日に何度も落ちては立ち上げることを繰り返さねばならず、まるで使いものにならない。あのGithubで開発されたものだから、今後のアップデートに期待できるのかも知れないが、現状はなにも更新されていない。

「さらに他のエディタを探すか...」

とググったところ、ネット上の皆さんはどうやらAtomからVisual Studio Codeというものに変えている人が多いようだった。ならば試してみる価値はあると思い、さっそく詳しく書いている人のブログを参考にサイトを訪れてみた。
Visual Studio Code - コード エディター | Microsoft Azure
しかし…

あれほどすったもんだして、Windowsから脱却しMacやLinuxへ移行したというのに、なんとこのVisual Studio CodeはMicrosoft社のオープンソースだったのだ。頭の中を嫌なことがよぎる。

「もしかしたら、Office365のように何かMicrosoftのIDを登録しなくてはならないのか?」
「オープンソースと言いながら、Microsoftの策略にハマってしまうのでは…?」
(筆者の勝手な妄想のためお許しを)

だが、ウィキペディアによればGithubにソースコードが公開されている、れっきとしたオープンソースに間違いはないようだ。

Microsoft製という点は合点がいかないものの、とりあえず手元のMacbookProにインストールしてみる。インストールは特に難しいわけではない。
トップページの「今すぐ無料でダウンロードする」から、各OSごとのダウンロードボタンをクリックしてインストーラをダウンロードする。その後はインストーラをダブルクリックすればOKだ。

ちなみに、Linuxでは最新バージョンは64bitのみの対応なので、32bitの場合は公式サイトのUpdateタブからMay 2019まで遡り、バージョン1.35であればインストールが可能だ(現時点の最新版は1.43)。しかし、インストール後はたびたび更新を勧めてくる鬱陶しさがあるので、やはりLinuxではAtomを使う方が良いようだ。




インストール後に設定すべきこと

インストール後に立ち上げた最初の感想は、

「ワークスペースはほとんどAtomと変わらないな…」

ということ。最初から画面右側にMinimapがあり、わざわざ拡張機能から選んでインストールする必要がない。また、デフォルトでEmmetがインストール済みだ。

Atomにおけるパッケージにあたるものは、Visual Studio Codeでは拡張機能だ。画面左側のブロックのようなマークをクリックすると、そこからいろいろな拡張機能を探すことができる。
とりあえず必要な拡張機能を入れてみた。これだけ入れておけば、専務も満足のことだろう。
  • Japanese Language Pack for Visual Studio Code
    日本語化拡張機能・基本中の基本
  • Live Server Preview
    ワークスペース内にPreviewを表示
  • Live Server
    ブラウザを立ち上げてPreviewを表示
  • Auto Close Tag
    タグの閉じ忘れ防止
  • Auto Rename Tag
    タグを書き始めたら自動で閉じタグを書いてくれる。書き換える時に便利
  • CSSTree validator
    名前通りCSSチェック
  • Highlight Matching Tag
    閉じたぐをハイライトしてくれて見やすい
  • HTMLHint
    カスタマイズ可能なルールに基づいて警告を出してくれる
  • IntelliSense for CSS class names in HTML
    ワークスペース内のクラス名を入力補完してくれる
  • W3C Validation
    文字通りW3Cに基づいて文法チェック
  • zenkaku
    全角スペースを可視化してくれる
このうち、W3C ValidationはJRE(Java Runtime Environment)が必要なため、PCに入っていない場合はインストール中に追加ダウンロードの要求が出るので、その通りにする。

その他どんな拡張機能があるかは、Visual Studio Marketplaceがあるので、そこで探すことができる。

また、拡張機能インストールの他に設定しておくことがある。

初期設定では、タグにカーソルを乗せると英文でタグの説明が現れる。至る所でこの説明が現れて鬱陶しいので、これを消すことにした。
基本設定→設定と開き、検索窓に「json」と入力すると以下画面となる。

Visual Studio Code 設定画面

ここで「settings.jsonで編集」をクリック。すると、今まで設定したことがjsonで表示されるので、ここに
「"editor.hover.enabled": false」
を書き加えて保存。これで鬱陶しい説明は出なくなった。

使用してみてわかること

さて、実際に使用してみるとMac上で問題なく動作し、Atomのようにすぐに落ちるということがない。上記拡張機能を最初にインストールしておいたおかけで、html文書をサクサク書くことができる。

まだ使い始めて日が浅いのでわからないことが多いが、現時点で難を言えば、立ち上げ時にワークスペース内に存在するCSSの全クラスを読み込むため、多少時間がかかることくらいだろうか。手元のMacbookProがこの時かなり唸ることになる。
それ以外はMicrosoft製ということを忘れてしまうくらい、使い勝手が良い。

Wordpressのようにローカル環境で編集することが多い人に、Visual Studio Codeはとても便利らしい。筆者もブログの下書きはBlogger画面で直接書くことはなく、テキストエディタを使用しているので、このようなエディタはありがたい。

コメント