なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由

この記事について

この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。

コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。

VSCodeを使うようになったきっかけ

コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCodeをしぶしぶ使うことになりました。

メインのコードエディタをVSCodeに切り替えてしばらくしてから、Bracketsはコミュニティで開発が続いているということを知りました。Bracketsに戻してもいいかな…と思ったのですが、自分の周りでVSCodeを使用している人が多かったこともあり、そのまま今もVSCodeを使っています。

そこでなぜ私がVSCodeのどこが気に入っているのか。ということを少し紹介していこうと思います。

私のお気に入りテーマ

この記事を書くために私が使っているテーマを改めて見ると、コントラストが強すぎない、まぶしすぎないテーマがお気に入りなんだな、ということに気づきました。私のお気に入りであるテーマをライトモードの場合とダークモードの場合で紹介します。

お気に入りのライトモードのテーマ

Quiet Light

お気に入りのダークモードのテーマ

Solarized Dark 

あらかじめ用意されているテーマから選ぶだけではなく、自分でカスタマイズもできるのですが、延々と変える作業をして時間を溶かしてしまいそうなので手を出していません。

よく使う機能

VSCodeにもともとある機能の中で、これは便利！と思った機能を紹介します。

アウトライン

• 文書構造を確認できる

HTMLのコーディングをしていて、文書構造的にこのタグでいいのか。と悩むことがあります。

以前はアウトラインを確認できるWebページや、Google Chromeの拡張機能のHTML5 Outlinerで確認していたのですが、VSCodeに「アウトライン」というものがあることに気づいてからVSCodeの機能で確認しています。

　

• カーソルの移動が簡単

この機能の便利なところは、アウトラインが簡単に確認できるだけではなく、確認したいタグの部分にカーソルを合わせるとソースコードの該当部分にカーソルが移動します。

アウトラインで文書構造を確認して、直したい。と思った時にもすぐに該当箇所に移動できます。

HTMLだけでなく、SCSSやCSSファイルでもクラス名が表示されるので、入れ子になった部分でもアウトラインを見ればすぐに該当部分にカーソルを移動できます。

私が入れている拡張機能を一部紹介

とりあえずこれを入れておけばコーディングしてブラウザで確認できてサーバにアップできる。という基準でリストアップしてみました。

ここでは拡張機能についての設定には触れていません。拡張機能って必要？これを入れると何が便利なんだろう。ということがわかってもらえたらと思います。

Japanese Language Pack for Visual Studio Code

バージョン: 1.87.2024030609
パブリッシャー: Microsoft

VSCodeを日本語化します。まずはこれを入れておけば、英語だらけ…どれが何…の状態から抜け出せます。

Live Preview

バージョン: 0.4.13
パブリッシャー: Microsoft

コーディングしたものをブラウザで確認できます。
CSSで書いたものがちゃんと反映されているか心配で…という場合もこの拡張機能があればブラウザで簡単に確認できます。

ブラウザで表示確認したいファイルを右クリックします。

Live Sass Compiler

バージョン: 6.1.2
パブリッシャー: Glenn Marks

Sass（SCSS）形式で書く場合、CSS形式に変換する。というコンパイルが必要になりますが、Sass（SCSS）のためだけに開発環境を作らないと…ということをしなくても拡張機能を使うことでCSS形式にコンパイルできます。

下部の「Watch Sass」をクリックしたら「Watching…」に変わり、SCSSファイルがコンパイルされ、CSSファイルに変換されます。

Prettier – Code formatter

バージョン: 10.1.0
パブリッシャー: Prettier

タブの数がバラバラになってしまったり、入れ子にしていた部分が変にズレたり、引き継ぎでたくさんの人が作業してインデントがおかしくなってしまったり。ということがなくなります。

SFTP

バージョン: 1.16.3
パブリッシャー: Natizyskunk

コードを書いて、FTPツールを開いて、ファイルをアップロードして…の作業が少しだけラクになります。

今はサーバレス（厳密にいうとレスではないよね…と思いつつ）の場合もありますが、レンタルサーバーにアップロードする。という作業が発生する場合は入れておくと便利です。

ここで挙げているほかにも同機能の拡張機能があるので、使いやすいものを探してもいいかもしれません。

まとめ

VSCodeは拡張機能もどれを使えばいいか迷うほどに豊富で、HTML、CSSのコーディングならブラウザでプレビューも拡張機能を使えば簡単なところがお気に入りです。

メインのコードエディタをBracketsからVSCodeに変えましたが、Bracketsを全く使わなくなったわけではなく、VSCodeで作業中にIllustratorで書き出したSVGファイルのコードをきれいにしたいなど、ちょっと別の作業をしたい時にだけBrackets。と使い分けています。

VSCodeを使い始めた当初はしぶしぶ使っていたのですが、今では違和感を感じることもなく使いやすいです。

さらにVSCodeについて知りたい方へ

Web制作の基礎から学べる「Webコーディングスクール」では、VSCodeのインストールからおすすめの機能拡張や便利な使い方、HTML・CSS・Sass・JavaScriptまで学ぶことができます。
初回体験レッスンは動画と渋谷の教室で開催中です。詳細は以下のページをご覧ください。