プログラミング

【プログラミング】まだVSCode使ってないの?おすすめエディタ紹介

 

悩む人
悩む人

プログラミングを始めるのに「テキストエディタ」が必要みたいだけど、何を使っていいかわからない。

おすすめのエディタがあれば知りたいな。

ついでに、しておいた方がいい設定があれば知りたい。

 

このような質問に答えたいと思います。

 

結論から言うと、「Visual Studio Code」(以下、VSCode)がおすすめです。

 

理由としては下記の理由があります。

  • カスタマイズなしでも十分使える
  • 拡張機能が豊富
  • マルチカーソルが神

 

ちなみに、この記事を書いている僕は「現役のプログラマー」でして、

下記のように使いやすいエディタを求めて色々使ってきた結果、VSCodeにたどり着きました。

  • Atom
  • SublimeText
  • Bracket
  • DreamWeaver

 

今回は、VSCodeをおすすめする理由と、おすすめの拡張機能についてもさらっと紹介していきますね。

 

VSCodeをおすすめする理由3つ

まずVSCodeはMicrosoftが開発した無料配布されているテキストエディタです。

こちらの公式サイトからダウンロードしてすぐに使えるので、まずはダウンロードしてみてください。

 

主要なプログラミング言語にほぼ対応できているので、コレ一つあれば十分対応が可能だと思っています。

 

もちろん、人によって使いやすいエディタは異なると思いますので、好きな物を使えばオッケーだと思います。

 

僕がたくさんのエディタを使ってきた中で、最も早く、操作性がよかったのがVSCodeでした。

おすすめする主な理由としては、下記の3点。

 

  • カスタマイズなしでも十分使える
  • 拡張機能が豊富
  • マルチカーソルが神

 

深掘りしつつ解説していきます。

 

カスタマイズなしでも十分使える

カスタマイズなしでも、すぐに使えます。

プログラミング初心者でもサクッと使えるので、エディタの設定に時間を取られることなく、その分学習時間に当てることができますね。

 

特にVSCodeの基本機能として、Emmetの機能が標準搭載されており、優秀です。

 

Emmetで爆速コーディング

Emmetは、効率よくコーディングするための記法です。

例えば、下記の動画をみてみてください。

 

 

 

全てをきっちりタイピングしていると、時間がかかります。

ショートカットのような形で入力することで、単純にタイピング量を減らすことができますね。

 

例えば、この動画の例だと

ul>li*5>a

 

コレを入力すると

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

 

このように出力されます。

 

Emmetの記法は便利なチートシートがあるので、手元においておくと便利です!

 

 

拡張機能が豊富

拡張機能が豊富なので、VSCode一つあれば、ほとんどのことができてしまいます。

 

例えば、

VSCodeでGitを使ったり

ローカルサーバーを立ち上げたり、

FTPで本番環境にアップしたり

 

こんなことがVSCode一つで実現することができます。

あれこれアプリを立ち上げるより、一つで完結する方が何かとわかりやすいので、とっても助かりますね。

 

おすすめの拡張機能については、あとでまとめてご紹介します。

 

マルチカーソルが神

僕が一番お勧めする理由が、マルチカーソルです。

マルチカーソルを使いこなさないVSCodeはVSCodeではないと言っても過言ではないくらい、マルチカーソルは好きですw

 

基本的なマルチカーソルの説明はこの記事で解説してますので、興味のある方はご覧ください。

【プログラミング】VSCodeの便利なショートハンド【効率化】プログラミングに必要不可欠なのがテキストエディタ。 僕がおすすめしているのが、VisualStudioCodeと言う無料の...

 

VSCodeおすすめの拡張機能

おすすめと言うか、僕が実際に使用している拡張機能です。

 

結構入ってるように思えますが、かなり厳選してる方だと思います。

一つずつ丁寧に解説していると、朝になりそうなので(今夜中です)要点だけ抑えて解説していきますね。

 

拡張機能を入れる方法について

VSCodeのサイドメニュー、一番下の四角いアイコンをクリックすると、検索バーが出てくるので、そこに拡張機能の名前を入れて検索します。

あとは、出てきた拡張機能をインストールするだけでOKです。

 

 

Japanese Language Pack for Visual Studio Code

 

まずは日本語化するために必要な拡張機能です。

英語ができる人は不要。

 

Bracket Pair Colorizer

Screenshot

開始タグと閉じタグのペアをカラーリングしてくれるプラグイン

コード量が多くなってくると、色分けがすごく助かります。

 

CSS Peek

Symbol Provider

「HTML要素にどんなスタイルがあたっているか」がすぐに確認できるプラグイン

意外と便利です。

 

GitLens

Current Line Blame Current Line Hovers

Gitを使うなら入れておきたい。

カーソルを合わせると、その部分の変更履歴が表示される

 

Highlight Matching Tag

 

HTML要素のタグをハイライト表示してくれる。

閉じタグ忘れを防げるので便利。

 

indent-rainbow

インデント部分がレインボーになる。

インデントを揃えるのにみやすいし、単純にかっこいい。

 

Live Server

 

ローカルサーバーを簡単に立ち上げてくれます。

VSCodeで保存をすると、ブラウザも自動更新されるのでわざわざ更新する必要がないのが助かります。

PHPだと、PHP serverがあります

 

Path Autocomplete

 

画像などのパスを自動補完してくれます。

パス記述がかなり楽になるので必須の拡張機能です。

 

SCSS Formatter

Sassを書くならフォーマッターを入れておけば、綺麗に整形してくれるのでみやすくなります。

自分でインデント整えたりするのもいいですが、拡張機能で整形した方がミスもないし、毎回統一できるので便利です。

 

Trailing Spaces

変な場所に入ってるスペースをチェックして、赤くハイライトしてくれます。

 

 

One Dark Pro(テーマ)

これは番外編で、僕が使ってるテーマす。

完全に気分の問題ですが、僕が好きな色なので使ってます。

 

エディタはとりあえず使ってみる

こんなこと言っちゃあおしまいですが、結局は人それぞれです。

僕が使いやすいからと言って、万人が同意するわけではありません。あくまで参考程度に思っていただければと思います。

 

とはいえ、初心者のうちはどのエディタを使ったとしても旨味は変わらないと思っているので、「見た目のかっこよさ」や「起動の速さ」など、実感しやすいポイントで選んでもいいかと思います。

 

今回は以上です。