「完全初心者：プログラミング・コーディングするのにテキストエディタ何にしようかなぁ？
初心者だからなるべく使いやすいのがいいお_(:3」z)_」
こんな方に向けて「Visual Studio Codeがおすすめ」ということを書いて行きます。
ざっくり目次
- Visual Studio Codeが「初心者に」おすすめな理由
- 番外編：プログラミングが楽しくなる設定 (見た目)
僕自身Atom、Sublime Text3、Visual Studio Code(以下VS Code)全部使いました
結果今はVS Codeに惚れてしまいSublime Text3からVS Codeに乗り換えています
乗り換えたのはつい最近で、プログラミング完全初心者では無いのですが、使い心地最高です^ ^
使っている中で初心者にもかなりオススメできるなぁと感じたので、プログラミングの勉強を始めた後輩にもオススメして実際に使ってもらいました
実際に初心者からみてどうなのかも聞いています
ついでに僕が設定している配色テーマとアイコンテーマも紹介します
では参ります〜〜〜
Visual Studio Codeが「初心者に」おすすめな理由
まず何故僕がVS Codeに乗り換えたというと、Wes BosさんとScottさんのPodcast「Syntax」のエピソード「Why is everyone switching to VS Code?(何故みんなVS Codeに乗り換えているの？)」を聞いたのがキッカケです。
AtomもSublime Text3も素晴らしいテキストエディタで今まで愛用してました。(Atom→Sublimeの順)
WesさんScottさんなどベテランのディベロッパーも惚れてしまうテキストエディタなのですが、初心者にもおすすめだと思ったので理由を以下で紹介します。
初心者にオススメな理由は以下の２つ
- 日本語化する必要無し
- 色々しなくてよい「デフォルトの機能が充実」
ぶっちゃけ最初は、後輩に「MacだしAtomかSublimeText3どっちかでいいよ」と言っており、どちらかでコーディングなりして勉強していると思っていました。
しかし先日後輩にプログラミングの勉強等の相談を受けた際にパソコンをみたのですが、みたことない変なテキストエディタを使っていました。。。
「おぉ、なんこのエディタ？なんでこれ使いようと？」
「AtomもSublimeも日本語化しないといけないし、使い方の記事読んでも設定とか多すぎてなんか無理でした・・・ww」
「あ〜、むむむ、、、なるほど、、、」
最初の最初はここでつまずく、もしくは嫌になることもあるんだなと気づかされました。。。
謎のマイナーなエディタを使っていたので、むしろその方が情報少ないしムズくね？と思いましたが、、、ww
そこでとりあえずVS Codeをオススメして実際に使わせてみました。
すると、、、
「これにします!!イイっすねコレ!!」
こんな感じで超初心者でも簡単に導入できて勉強に集中できるようになりました。
本人曰く、特に良いと感じた点は以下の２つみたいですね
日本語化する必要無し
VS Codeは最初から日本語なので、わざわざ日本語化する必要がありません。
＊環境によって違ったりアップデートした時に英語になることもあるようですが基本的に最初から日本語です。
Atom、Sublime Text3の場合は日本語化する必要があったので後輩はまずそこが嫌だったみたいですね〜
僕自身は今となっては設定をいじったり、拡張機能インストールしたりは当たり前ですが、やっぱり始めたばかりの人にはセットアップが色々あるとちょっと嫌かもしれませんね
今当たり前のことも昔は当たり前じゃなかったし、それを他の人に同じようにするように言うとその人にとっては当たり前じゃなかったり難しかったりするので、人に物を教える時は気をつけないとですねぇ〜
色々しなくてよい「デフォルトの機能が充実」
上と同じことかと思いますが、後輩的にはAtomやSublimeの使い方記事をみながら色々やっていたみたいで、細かい設定がたくさんできるのは良いけど、なんか嫌だったようです。
おそらく記事の情報が古く、同じように反映できなかったりしたのかと思いますが、、、
初心者の本当に最初の最初の人はここでつまずくこともあるみたいですね
VS Codeは日本語化はないですし、PackageControllをインストールしなくてもクリック何回かするだけで簡単に拡張機能や配色テーマなどのインストールができます
Atom、SublimeText3、VS Code全部使いましたが、VS Codeが一番わかりやすいUIかと思うので初心者にはとっかかり易いかと
また細かく設定したい場合もガイドが日本語で細かく書いてあるので、それに沿って作業すれば簡単に設定できます。
あとemmetも最初から入っています
初心者の後輩は色々しなくて良いVS Codeをかなり気に入っていました
以上短めですが、後輩の意見を参考に初心者にオススメな理由の紹介でした
番外編：プログラミングが楽しくなる設定(見た目)
ビフォー(デフォルト)
アフター
正直好みなのですが、僕はこの設定に落ち着いてます。
気になる方のために、使っているテーマと拡張機能を紹介します〜^ ^
使っている配色テーマはWes Bosさんがリリースした「cobalt2」でAtomとSublimeなどでも使えます。
アイコンテーマは「Material Icon Theme」を使っています。
また、CSSの設定も少し変えていますので紹介します〜
配色テーマ「cobalt2」を設定
ここから拡張機能をインストールできます。
ここから「cobalt2」と検索すると一番上に出て来ます。
インストールをクリックして、再読み込みすると反映されます
ここから細かい設定ができます。
「設定」を開くと、「左に既定の設定(赤枠)」・「右側に上書きしたい設定(緑枠)」の欄があります。
cobalt2をインストールするとすでに右側に色々入っているかと思います。
右側でフォントの設定など好みで変えれます
設定できるものは左側の「設定の検索」から簡単に検索できます
＊例：フォントサイズ、行間、書体、、、etc
オプション(任意)でCustom CSSの設定もでき、オススメされていますが、今回は初心者向けの設定なので割愛します
アイコンテーマ「Material Icon Theme」を設定
上と同じところから「Material Icon Theme」と検索
インストールして有効化します
ここからファイルアイコンテーマを変更できます。
これで完了です〜〜
CSSの設定
個人的にCSSを書いている時、色のところをホバーすると出てくるやつ(カラーディテクター)が邪魔だったので解除して、「Color Highlight」をインストールして以下のように表示されるようにしています。
解除方法はまず「基本設定→設定」に行きます。
そして、右側の上書き設定の部分に「“editor.colorDecorators”: false」を追加して終わりです。
＊これでCSSのcolorやbackground-colorで色を指定してもカラーディテクターが出てこなくなります。
でもこのままではHexコードだと何色かわからないので、「Color Highlight」という拡張機能を入れてHexコードでも何色なのかわかるようにしています。
またまた同じ流れで、拡張機能を検索するとこで「Color Highlight」と検索すると四番目くらいに以下のような拡張機能が出てくるかと思います。
これをインストールして有効化して終わりです
反映されない場合は「再読み込み」かVS Codeを再起動してみてください〜
以上Visual Studio Codeを押す記事でした〜
まだ乗り換えて間もないのですが、何かいい設定があれば追記していこうと思います〜〜〜
ではエンジョイ〜〜〜