こんにちは！スタイル・エッジLABOのぱるです。
私はスタイル・エッジLABOでインターンをしております大学4年生です！
初めての記事作成で緊張していますが、どうか最後までお付き合いくださいorz
私はスタイル・エッジLABOでのインターンが開始して一カ月、
Udemyというオンライン講座を受講しながらHTML５とCSS3の勉強をしていました！
全くのプログラミング初心者の私は、
「プログラミングってなんか黒い画面にカラフルな英語が表示されるカッコいいやつ」
というイメージしかもっていなかったため、黒くてカッコいいやつを操作できるのを楽しみにしていました！
しかし...
動画で講師の方がプログラミングのツールとして紹介されたのは「メモ帳」ではないですか！
動揺を隠しきれない私...
ただ、続いて講師の方がおっしゃったのは、「メモ帳でもコードをかけますが、無料のエディタも豊富ですからどうせならエディタを使って書いてみるといいでしょう」とのこと....
エディタとは何！？というレベルだったのですが、先輩社員におススメのエディタを聞いて取り敢えず「エディタ」なるものをダウンロードしました。
エディタのダウンロードが完了し、さっそくエディタを開いた私が思ったことは、「あの黒くてカッコいいやつだ！」です。
勉強に取り掛かるのにはモチベーションが大事ですが、なんかカッコいいやつで勉強できるというだけで開始早々私のテンションは急上昇！
そんな感じで私のプログラミングの勉強が始まりました!
※私がダウンロードしたエディタは” Visual Studio Code ”です。
※私はMicrosoftの回し者ではございません。
拡張機能万歳！
ブログを書くのが初めてなもので、前置きが長くなりすみません....
それでは本題に入っていこうと思います！
私が勉強する中で感じたことは、エディタに拡張機能を追加していくとコードを書くのが非常に楽になるということです。 実際に勉強する際に使用したのは3種類の拡張機能ですが、せっかく拡張機能の尊さに味を占めたので、ブログを書くにあたっていくつか拡張機能を試してみました！
ということで今回は [VSCodeの拡張機能をまとめちゃおう！] というテーマで書いていこうと思います！
拡張機能紹介
まずは、私が勉強中に使用していたエディタのご紹介です！
１、Japanese Language Pack for Visual Studio Code
よほど英語に自信があるぜ！という方以外は入れたほうが無難でしょう。
今回ご紹介する拡張機能の中でも、最もダウンロード数が多かったです。
２、htmltagwrap
→該当のコードをドラッグして" Alt＋W "を入力するだけで自動でPタグで囲まれる拡張機能です！
Pタグが表示されたのちにそのまま任意のタグを入力すると即書き換え可能ですのでタグを入力する
手間を省くのにはぜひとも入れておきたいですね！
３、テキスト校正くん
→なんともかわいらしいネーミングの拡張機能ですね。
読んで字のごとく、入力した文章を構成してくれる拡張機能です！
htmlでは文章をたくさん書くと思いますが、長文を入力していると文章の見直しも大変ですよね....
テキスト校正くんを入れておけば、波線の個所を治すだけでよいので非常に見直しが楽になります！！
他の拡張機能も試してみた！
HTMLとCSSの勉強をする中で拡張機能のすばらしさを知った私は、勉強が一通り落ち着いてから追加でいくつかの拡張機能を試してみました！
１、indent-rainbow
→この拡張機能を入れるとエディタを見ていて楽しくなりますね！
タグが多くなってくると、どのタグとどのタグがセットなのかわかりづらい...なんてこともあるかと
思います。ただ、indent-rainbowがあれば視覚的に色でセットの括りがわかるのでそんなストレスとも
おさらばできますね！
２、Bracket Pair Colorizer 2
→{ } , ( ) , [ ] ,< > などあらゆる種類の括弧のペアを色ごとに分けて表示してくれます！
初心者のミスとしてペアが組めていないということが多かったので非常に重宝します！
最後に
前置きと本題のバランスが悪くなってしまいましたが、最後までお付き合いくださり有難うございました！
超駆け出しシステムエンジニアの呟きとして読んでいただけたなら嬉しいです！
次にブログを書く際には成長を感じられるように、駆け出しシステムエンジニアとして頑張っていこうと思います！
☆スタイル・エッジLABOでは、一緒に働く仲間を募集しています☆
もし興味を持っていただけましたら、ぜひ採用サイト↓も覗いてみてください！
