Programming

【プログラミング】テキストエディタをVisual Studio Codeにした理由

  /
テキストエディタをVSCodeにしてみた
プログラミングの勉強を始めたよ。コードを書くためのテキストエディタは何を使うのがいいのかな？
Visual Studio Codeやatomを使っている人が多いみたいだけれど、何か違いがあるのかな？

こんな疑問をお持ちでしょうか？

この記事の内容
  • atomからVisual Stuio Codeに変えた理由
  • インストールしておくと良いプラグインはどんな機能？

プログラミングをするなら必須なツールがテキストエディタ。
私はatomを使っていたのですが、とあるキッカケでVisual Studio Codeというエディタに変更しました。その理由をご紹介します。

どちらのエディタにも機能を拡張するプラグインがたくさんありますが、
今回は私がインストールした拡張機能についても、どんな機能なのかが分かるように説明していきます。

テキストエディタをVisual Studio Codeにした理由

プログラミング学習を始めた際、わたしはドットインストールの動画を見ながら練習をしていました。
ドットインストールがatomを使っているので、私もatomをインストール。

ではなぜ、Visual Studio Codeを新たにインストールしたのか？
その理由は3点です。

  • プログラミング学習のコミュニティでおすすめされた
  • 拡張機能などでわからないことがあったら質問しやすい
  • atomの拡張機能調べるのがめんどくさかった（笑）

それぞれもう少し詳しく説明します。

プログラミング学習のコミュニティでおすすめされた

私は初心者向けのプログラミング学習のコミュニティに参加しています。

— ショーヘー@バンコク🇹🇭 (@showheyohtaki) 2019年1月13

プログラミングを仕事にタイで生活しているショーへーさん（@showheyohtaki） の一言で始まった、
『プログラミング初心者が30日のトライアルを経て5万円稼げるスキルを身につける』という素晴らしい企画。

2019年1月7日から30DAYSトライアルが始まりました。
内容は、Progateというオンラインプログラミング学習サイトを利用して勉強し、徐々にステップアップ。

そしてトライアルDAY8の課題がこちら。

ショーへーさんからオススメされたのが Visual Studio Code だったんですね。
拡張機能も教えていただきましたので、これは乗り換えるしかないな！と思ったわけです。

エディタの使い方や拡張機能などでわからないことがあったら質問しやすい

このコミュニティ、実はたった1日でおよそ1000人の参加者が集まったんです。本当にすごい。

そこでオススメされたということは、参加者の多くの人がVisual Studio Codeを使ってコーディングしていくということですね。
中には実際にプログラミングをお仕事になさっている方もいますので、
分からないことがあったら質問、共有しやすい。

これってかなりい環境ですよね。
ひとりぼっちで勉強していると、わからないことを調べても全然答えが出てこない…ってことが良くあります。

初めてのエディタ、わからないことは（もちろん自分で調べてみた上で）誰かに質問できるというメリットから、
Visual Studio Codeを使ってみようと思いました。

atomを使っていたけれど、拡張機能調べるのがめんどくさかった

そしてこれは先程のお話の延長ですが、
atomにももちろん便利な点や拡張機能がたくさんあるはずなんです。

ですが正直、入れておいたほうが良い拡張機能を自分で探すのがおっくうだったという…。

Visual Studio Codeは、標準でEmmetが使えるというのも魅力的でしたね。
これも教えていただけなければ分からなかったでしょう。
正直これが無かったらatomを使い続けていたと思います。

Emmetとは、コーディングを爆速にしてくれる機能のこと。
ショートカットキーみたいなイメージです。
プログラミングをする人には無くてはならない存在です。

atomは拡張機能としてインストールしなければいけなかったし、設定もいくつかしなければいけないようで。
その手間が省けるということで、Visual Studio Codeを使うことに決めました。

Visual Studio Codeの便利な拡張機能 教えてもらったよ

先程から出てくる『拡張機能』という言葉。（プラグインと呼んだりもします）

これは何かと言うと、ドラクエで言うならば武器や防具を装備して主人公がどんどん強くなる、みたいな感じです。
要は、拡張機能をVisual Studio Codeにインストールすれば、もっと使い勝手が良くなるということです。

30DAYSトライアルのDAY8の課題、『エディタをインストールしよう』では
Visual Studio Codeに装備すると良いオススメの拡張機能も教えていただきました。

それぞれどんな機能なのかを調べて、実際に使ってみたので参考にしてください。

Auto Rename Tag

直訳すると「自動 タグの名前つけ直し」といったところでしょう。


htmlの開始タグを修正したときに、自動的に終了タグも直してくれる便利機能です。

「あっ、ここで使うのはこのタグじゃなかった！」
という時にとっても便利。

プログラミング学習を始めてから、
開始タグと終了タグ、両方修正するのって結構めんどうだなぁって思ってました。
こんな便利な機能があるなんて、とっても助かります。

CSSTree validator

こちらも直訳すると「CSSツリーの検証」。
つまりCSSに変なところがあったら教えてくれる、という機能でした。

[CSSTree]unknown property: ‘bacground’とありますね。
これのおかげでスペルミスしていることに気づけます。正しくは background ですよね。

IntelliSense for CSS class names in HTML

こちらはマイクロソフトによる自動補完システム。
divタグなどにつけるclassの名前の候補を予測して提示してくれるようです。

これもキャプチャを取りたかったのですが、まだコードの記述歴が浅いせいか
候補たちは出てきてくれませんでした(^^;)

Japanese Language Pack for Visual Studio Code

読んで時のごとく、日本語表記にしてくれる機能ですね。
でも英語に慣れるって意味で、あえてインストールしなくてもいいなと思いました。

私個人の意見ですが、プログラミングは英単語をたくさん使いますので、
日本語訳された単語に慣れてしまうと英語に抵抗が出てきちゃいそうで。

HTMLHint

HTMLを書いていて、コードに何か細かいミスがあったら教えてくれる機能です。
どんなミスに気づいてくれるかは、こちらの記事が参考になりました。
JenkinsとHTMLHintを使用して潜在的な構文エラーに気づいていく

実際に私もやってみましたので御覧ください。

href=” ” のところを href=’ ‘ にしてみたところ、カーソルを合わせたら
『ダブルクォートで囲ってね』と教えてくれました。優秀。

zenkaku

スペースが全角になっちゃってるのを教えてくれる機能です。
スペースキーでの空白が、全角だった場合にグレーの四角で教えてくれます。

zenkakuで全角スペースが見抜ける

ただこれ、IMEのプロパティで「スペースは常に半角」という設定をしておけば良いのでは…？
と思いました。

IMEは日本語入力を助けてくれるWindowsのプログラムのこと。

IMEでスペースは半角に設定すればよい
デスクトップの右端にある『あ』を右クリック
↓
プロパティ
↓
一般
↓
スペースの入力を半角に変更
↓
適用・OK

これでスペースキーは常に半角になるように設定できます。
※Macの方はごめんなさいわからないです。。

まとめ｜Visual Studio Code ならみんな使ってて安心だね

まとめです。
私がatomからVisual Studio Codeに乗り換えたのは、
30DAYトライアルに参加している多くの方が使っていると思ったからです。

実際にインストールしてみて、拡張機能も入れて触ってみると使い勝手がだんだんわかってきましたよ。
英語表記ですが特に不自由は感じません。
エディタ自体の操作性はatomと大差は無いように感じます。

が、Emmetが標準で使える、ということで早速試してみたら超感動しました。
これで爆速コーディングできるようになりますね！

Visual Studio Codeにして良かったことはこちら。

  • 現役プログラマーさんも使ってて安心
  • Emmetがすぐ使えるから面倒な設定不要
  • 拡張機能もいくつか入れておけば爆速コーディングできる

さっそくVisual Studio Codeと拡張機能、使ってみてください！

30DAYSトライアルは今からでも参加できますよ！

この記事もいかが？