100記事突破企画 プログラミング

【プログラミング初心者】おすすめVSCODE設定【まずはここから】

投稿日:

こんにちはカレイドです。

 

皆さんはエディター何を使っていますか

 

先に結論からいうとまだ使ったことがない人はVSCODE一択です!

 

私はインターンを2社ほど経験させてもらいましたが、全員VSCODEをもれなく使っていました。

 

似たようなものにAtomというものがありますが、最近ならVSCODEに乗り換えて使っている人も多いので初心者の方はVSCODEを選んでおけば間違いなしでしょう。

 

 

VSCODEとは?

 

まずは一応初心者の方のためにそもそもVSCODEとはなんぞやってところから解説しますね。

 

一言で言えば、あなたのコーディングを楽にしてくれる便利ツールです。

 

例えばそうですね、プログラミングでは英語が当然ですので何か名前をつけたりする時に

habitRecordNumber

みたいな命名をしたりした時にそこらじゅうでこいつを使うってなったら毎回手打ちをしなければならない!

 

初めは打つのが楽しいんですよ。でも少し経つとうおおおおおおおおおおおおおおおおおめんどくせええええええええってなりますw

 

慣れててもめんどくさい作業は減らしたいですよね。

 

そんな時にVSCODEだけに限らずに、こういうツールは勝手に補完といってhabitぐらいまで打つと残りの文字を予測して、これじゃないですか?

って勝手に提案して埋めてくれるのです!

 

うぉおおおおおおおおおおおおおおおおすごい!

 

というわけで紹介はこのぐらいにして実際にすごい機能をみたほうが早いので早速いきましょう

 

VSCODEをインストールしよう

 

https://code.visualstudio.com/

 

まずはこちらのサイトにアクセスをして対応するVSCODEをインストールstable(安定版)をインストールすれば問題ナッシングです

 

 

インストールしたらお次はちょいちょいっと開いてみましょう。

左側にアイコンが並んでいると思いますが、主にここからいろんな操作をしていきますよ。

 

 

この赤いところから始まります。

 

おすすめ拡張機能

 

VSCODE自体をインストールしたら早速、便利にしてくれる拡張機能を一つづつ入れていきましょう。検索欄に紹介しているプラグイン(拡張機能)を叩きこんでインストールすればOKです!

 

おすすめする拡張機能は無料なので迷ったら全部入れてしまえばオッケーです。私が主に使う言語は HTML/CSS/JavaScriptなので他の言語のものについてはご了承ください。

 

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するファイルの場所を../のような感じでやっていくと候補を勝手に出してくれます。毎度毎度ファイルパスを覚えていられないのでこれで場所を遡りながら見つけるのが楽チンです。

 

 

まとめ

 

以上がオススメするプラグインになります。実はこの他にもあるのですが、今回はより初心者向けのものだけに絞ってご紹介をいたしました。

 

とりあえず最低限これを入れておけば動かせるようになります。まずは自分で使ってみて、エディタに慣れてしまいましょう!

  • この記事を書いた人
  • 最新記事

カレイド

1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。 4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。

-100記事突破企画, プログラミング

Copyright © カレイドブログ, 2019~2020 All Rights Reserved