こんにちはカレイドです。
皆さんはエディター何を使っていますか？
先に結論からいうとまだ使ったことがない人はVSCODE一択です！
私はインターンを2社ほど経験させてもらいましたが、全員VSCODEをもれなく使っていました。
似たようなものにAtomというものがありますが、最近ならVSCODEに乗り換えて使っている人も多いので初心者の方はVSCODEを選んでおけば間違いなしでしょう。
VSCODEとは？
まずは一応初心者の方のためにそもそもVSCODEとはなんぞやってところから解説しますね。
一言で言えば、あなたのコーディングを楽にしてくれる便利ツールです。
例えば、プログラミングでは英語が当然ですので何か名前をつけたりする時に
habitRecordNumber
みたいな命名をしたりした時にそこらじゅうでこいつを使うってなったら毎回手打ちをしなければならない！
初めは打つのが楽しいんですよ。でも少し経つとうおおおおおおおおおおおおおおおおおめんどくせええええええええってなりますw
慣れててもめんどくさい作業は減らしたいですよね。
また、当然同じ変数名をタイピングするってことは、頭ではわかっていても、タイポ（タイプミス）をすることもあります。
そんな時にVSCODEだけに限らずに、こういうツールは勝手に補完といってhabitぐらいまで打つと残りの文字を予測して、これじゃないですか？
って勝手に提案して埋めてくれるのです！
うぉおおおおおおおおおおおおおおおおすごい！
というわけで紹介はこのぐらいにして実際に機能をみたほうが早いので早速いきましょう
VSCODEをインストールして起動してみよう。
https://code.visualstudio.com/
まずはこちらのサイトにアクセスをして対応するVSCODEをインストールstable(安定版）をインストールすれば問題ナッシングです。
ただ、インストールするOSに応じてプルダウンから適切なOSを選択してダウンロードすることだけお忘れずに
インストールしたらお次はちょいちょいっと開いてみましょう。
左側にアイコンが並んでいると思いますが、主にここからいろんな操作をしていきますよ。
おすすめ拡張機能を導入して、VSCODEを使いやすくしよう！
VSCODEを入れただけだと、最小限の機能しか提供されていませんので拡張機能（Extension)と呼ばれるものをインストールしてVSCODEをカスタマイズしていきましょう！
この赤いところをクリックしてもらうと拡張機能をインストールするページに移動します。
検索窓の中に紹介しているプラグイン（拡張機能）をコピペして検索すれば対応の物が出てくると思うのでインストールしていただければOKです！
おすすめする拡張機能は無料なので迷ったら全部入れてしまえばオッケーです。私が主に使う言語は HTML/CSS/JavaScriptなので他の言語のものについてはご了承ください。(最低限、各言語のものを検索して専用のプラグインを入れた方が良いとは思います。例えばPythonならPythonと検索までに入れると専用のものが上にいくつか並んでいるのでそれをいくつか入れておけばOKです！）
Japanese Language Pack for VSCODE
まず最初のプラグインはコーディングには一切関係ないですが、VSCODEが英語で見辛いよって方のためにちゃんと日本語表示してくれるプラグインが用意されていますのでこちらを入れておきましょう。
Auto Close Tag
さて、ここからが実際に便利にしてくれるプラグインです。
まずAuto Close Tagです。
HTMLなんかで <div>と打った時に</div>を勝手に補完してくれます。
初心者のうちは中身埋めてから閉じタグやればいいやと思ってそのまま放置→エラー吐かれて何個<div>タグがいるかわからなくなるので絶対に入れておくべきプラグインです。
筆者は何度もdivタグの個数を数えてあってるなぁを繰り返していた時代が懐かしいです。皆さんはこのプラグインを使って、そんな懐かしさを感じる必要はないのでサクッと入れてしまいましょう。
Auto Rename Tag
こちらも同様に片一歩のタグの名前を変えたら、もう片側のtagの名前も自動で変えてくれるやつです。
とりあえず入れておけば便利です。
Bracket Pair Colorizer
これはHTML/CSSではあまりお目にかかることは少ないかもしれませんが、そのうち{{{や((((を頻繁に使うようになります。
せっかくなので私のオリジナルアプリManehabiのコードを例に見てみましょう。
すでに括弧に色がついているのでみやすいと思います。このプラグインは終わりと始まりの括弧を色付けして視覚的にみやすくしてくれます。
例えば真ん中の方に
onClick={()=>handleClick(starHabit,unStarHabit)}
と書いてありますが、今皆さんがみている画面と画像の画面全然違いますよね。それぞれの括弧が一つのセクションのようになっていて非常にみやすいです。
Color Highlight
これも同じように色コードを実際の色として目に見えるようにしてくれます。
こんな感じですね。
HTML Snippets
スニペットとは何かというと補完機能です。
私が最初に紹介したVSCODE（コードエディタ）のもっともいいところの一つに同じようなネーミングを打つ必要がないというところです。
正確には途中まで打って勝手にコンピューターが認識。
こちらからこれあと補完してと指示を送ればあとは残りの文字を勝手に埋めてくれます。
もともと備わっているものに加えて特定の単語？というか英語の羅列を打つとあらかじめ決めておいたコードが勝手に出てくるものをスニペットと呼びます。
使ってみるのが一番早いので早速入れてみてください。
そこで a と押してtagを押すとなんと不思議、頼んでもいないのに他のプロパティを勝手に補完してくれましたね。
これがスニペットの力です。HTML系ならbuttonとかでも同じように残りのタグも試してみては？
Indent-rainbow
これは私が先ほどお見せした画像に綺麗に表示されていましたね。
tabでスペースを開けた時に、その個数に応じて綺麗に色がつきます。慣れてくれば必要ないかもしれませんが、
色があって損することはないです。ぜひ入れておきましょう。
IntelliSense for CSS class names in HTML
これはCSSで書いたプロパティを勝手に補完してくれます。
同じclass書くのめんどくさいのでこれ入れて楽をしましょう。
Highlight Matching Tag
さて、どれだけ気をつけてもどうしても知らない間に 見知らぬタグが紛れ込みます。
私はそういう時に はさみうち法を使っているのですが、外側のdivから囲うようにしていきます。その時に上部のdivをクリックすると終わりのdivをハイライトしてくれるのがこのプラグインです。
こうやって日々、無駄なdivは排除されていくのですね。
LiveServer
100％入れておけプラグインです。HTMLをVSCODE上でいじってその変更分をまたリロードしてっていうのはめんどくさいですよね。
こいつが勝手に、変更分を反映して画面に表示してくれます。
使い方はインストールしたら右の方にLiveserverというコマンドが追加されるはずなのでそれをONにすればOKです。
あとはVSCODE上で更新をかければブラウザ側でも更新されます。
Prettier-Code formatter
これはコード整形をしてくれる一番利用されているものですね。
保存時にprettierのコード整形がかかるようにしておきましょう。
左下の歯車から設定を選択して検索にformatと入力するとsava時にフォーマットをするという項目があるのでここをONにしておきましょう。
これで自動的にコードを綺麗にしてくれます。
Material Theme
さてさて、ここからは見た目の改良です。
おまけですので自由にいじってみてくださいね。
同じように左下の歯車から配色設定→material theme palenaight high contrast で私と同じ配色テーマになります。
基本的には目が痛くなるので暗いやつ選んでます。
Material Icon Theme
これは配色ではなくてiconを変えてくれます。そのままよりも絶対変えた方がいいです。見た目は大事！w
ここからはJavaScriptがメインです
ES7 React/Redux/GraphQL/React-Native snippets
Reactを含めたJvascriptのスニペットです。
よく使うものですと clg で console.logとかそんな感じです。
ESLint
構文規約ですね。ルールに違反しているものを教えてくれます。
無法地帯のコードはあとで取り返しがつかなくなるのでキチンと入れておきましょう。
Path Intellisense
importするファイルの場所を../のような感じでやっていくと候補を勝手に出してくれます。毎度毎度ファイルパスを覚えていられないのでこれで場所を遡りながら見つけるのが楽チンです。
まとめ
以上がオススメするプラグインになります。実はこの他にもあるのですが、今回はより初心者向けのものだけに絞ってご紹介をいたしました。
とりあえず最低限これを入れておけば動かせるようになります。まずは自分で使ってみて、エディタに慣れてしまいましょう！
以下の記事で実際の実務でよく使うショートカットをまとめてみたので、慣れてきたらこちらを参考にさらに素早くコーディングをしていきましょう。
-
-
【VSCode】実務ベースのショートカットキーを覚えて効率よくコーディングする
続きを見る
