Blog

ブログ

ウェブ制作用のテキストエディタをVisual Studio Codeに乗り換えた話

前田 大地

HTMLコーディング用のテキストエディタは、これまで「Sublime Text」を使用してきました。が、ここにきて「Visual Studio Code(VSCode)」へ乗り換えることにしました。ので、その経緯と所感をまとめたいと思います。

VSCodeの主な用途

私の場合は、HTML、CSS、Javascript、PHPの編集が主な用途です。

元々、Sublime Textをメインで使っていました

Sublime Textは、柔軟なカスタマイズができるテキストエディタです。私は、主にウェブサイトの制作のためSublime Textを使用していました。
全体的には使いやすく、動作もキビキビ、自分好みに設定していることもあり、通常はコレといった不満点はありません。しいて挙げるとすれば、Shift_JISに非対応であることでしょうか。Shift_JISを編集するためのパッケージは存在しますが、どうしても信用できないので別のエディタで代用していました。

AtomもBracketsもあるというけれど…

テキストエディタは、ずっと昔から何か良いものがないかと試行錯誤しています。ですが、Sublime Textの軽快さに慣れてしまうと、なかなか別のエディタに乗り換えられません。よくSublime Textと並んで紹介されるAtomやBracketsは、機能面ではSublime Textと同じように使えますが、ちょっとしたモタつきがストレスになり、長続きしませんでした。
で、ですよ。Visual Studio Codeの登場です。

Visual Studio Codeの良いトコロ

Visual StudioのMac版がリリースされたこともあり、ああそう言えばVisual Studio Codeは試したことないなぁと、いつもの気まぐれで使い始めてみたら想像以上でした。以下が、嬉しかった点です。

動作が早い

マシン性能にもよるかと思いますが、私のiMacでは動作がキビキビしていて非常に快適。体感速度はSublime Textとほとんど変わりません。

最初から日本語

インストールした状態で日本語。よくある、一部のメニューが翻訳されていない、なんてこともありません。

わりと自由に設定できる

Sublime Textからの移行もスムーズでした。好みは別れると思いますが、標準で組み込まれている機能が多いです。設定ファイルを編集するだけで自分好みの環境が作れます。

Shift-JISファイルも開ける

これでようやく別のエディタと使い分ける面倒さから開放されます。

ターミナルが組み込まれている

超便利。Sublime Textでも、開いているページをカレントディレクトリにしてターミナルを起動させるパッケージがあります。が、Visual Studio Codeでは、最初からエディタ上にターミナルが組み込まれています。

Emmetも標準で

私はウェブ制作用途なのでまあまあ嬉しいですけど、使わない人には迷惑ですね。

タスクランナーとの相性もよい

私はメインでgulpを使っていますが、エディタ上にあるターミナルで直接コマンドを打ち込んでも良し、ショートカットキーであらかじめ設定しておいたタスクを実行しても良し、と、快適に使えています。

エラーと警告

リアルタイムで、構文のエラーなどをチェックしてくれます。IDEっぽい。

気になった点

画面を2分割して、HTMLファイルとCSSファイルを同時に編集していますが、極稀に不安定になります。不安定になる原因は不明ですが、一旦、VSCodeを終了して、もう一度立ち上げたときに前回の状態のまま復帰すると発生している気がします。これまで通算で2回、不安定になりました。うーん、謎ですね。

移行した感想

インストールしたそのままの状態でも、わりと色々な機能が入っていて、すぐにでも使い始められます。テキストエディタとIDEの中間という感じで、なおかつ「軽快」だから普段使いにちょうどいい。使用して2週間、DockからついにSublime Textが消えました。エディタ選びで迷っている方は、ぜひ使ってみてください。

Visual Studio Codeのダウンロードはこちら

Web Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

Blog top