こんにちは、こちょすです。
前回はVisual Stadio Code（VS Code）のインストールを行いました！
👇👇👇まだインストールができていないよという方は、以下の記事を見てインストールしてみてくださいね！👇👇👇
-
-
【キャプチャ付き！】VS Codeの始め方をたった４STEPでわかりやすく解説！
続きを見る
VS Codeのインストールをした後は、自分好みの開発環境を整えていきましょう！
今回はどのような言語で開発する方でも、共通してこれはいれておくと便利！という厳選した拡張機能を5つご紹介します！
こんな方におすすめ
- VSCodeのインストールはしたけど使いこなせていない
- VSCodeの拡張機能を使って効率的に開発したい
- 拡張機能の設定方法がわからない
それではいってみよう！
目次
Visual Stadio Codeの便利な拡張機能１ 変数や関数が見やすくなる Material Theme
コーディングをしている時、メモ帳のように変数や関数の色が同じだと、見にくくて効率が悪いですよね！
そんなときコーディングの作業が捗る、コードがはっきりと見やすくなる拡張機能がMaterialThemeです！
では早速いれて見ましょう！
まずは左の拡張機能のアイコン（ルービックキューブみたいなやつ）を押します。
この検索窓に、「Material Theme」と打って検索します。
これをインストール！
すると、どのテーマにするかを聞かれます。
僕はダークな背景に変数とかは明るくわかりやすいのが好きなので、「Darker High Contrast」にしてみましょう！
「set color theme」にてあとから変更も可能です。
ではファイルを開いて見ましょう！
こんな感じで見やすくなりましたね！
Visual Stadio Codeの便利な拡張機能２ ファイルの種類が一目で分かる Material Icon Theme
Web制作や、アプリ開発をしていると、何十ものファイルを開いて行ったり来たりしながら開発をしている人が大半だと思います。
僕もいつもそうやって開発しています。そんなとき、ぱっと見でファイルの種類が分かると効率よく開発ができます！
それを叶えてくれるのがMaterial Icon Themeです。
さきほど同様拡張機能の検索から、「Material Icon Theme」と調べてみましょう。
installをクリックすると、プルダウンでMaterial Icon Themeが選択できるようになるので、これをクリック！
ではどんな感じで見えるのか確認してみましょう！
Visual Stadio Codeの便利な拡張機能３ カッコのペアが色で分かる Bracket Pair Colorizer 2
コーディングしていると、if文やfor文が複雑になってきて、カッコの閉じ忘れが多発したりしますよね。
そんなときにこの拡張機能をいれておくと、ペアになっているカッコが色で一目で分かるので便利です！
ちなみにこの拡張機能には「Bracket Pair Colorizer」という１もあるのですが、今回入れるのは２のほうなのでお間違いなく！
ではいつもどおり検索してinstallしましょう！
ではみてみましょう！
こんな感じで、オレンジや赤などでペアが一目で分かるようになります！
Visual Stadio Codeの便利な拡張機能４ インデントに色が付く indent-rainbow
htmlや、他の言語でも、見やすく書くためにはインデント（タブで段落を下げること）はとても重要ですよね！
ぼくはPythonを使っているので、インデントは人一倍意識をする必要があります。
というわけでこの拡張機能をいれています！
では見て見ましょう！
こんな感じですね！
キャプチャだと見にくい気がしますが、実際にエディタで見るととてもわかりやすいのでおすすめです！
Visual Stadio Codeの便利な拡張機能５ 開始/終了タグを同時に編集できる Auto Rename Tag
htmlを編集していると、「あー、、、ここのタグを別のタグに変えたいな」ということってありますよね。そういうとき、例えば
<div>
~~~~~~
</div>
となっていたとき、開始タグと閉じタグをそれぞれ編集するのって面倒だったり、閉じタグを編集し忘れてしまうとかってあるあるですよね。
そんなときにこの拡張機能を入れると、開始タグと閉じタグを同時に編集してくれるので、修正ミスが少なく、かつ修正作業を半分にすることができます！
ではいれていきましょう！
いかがでしたでしょうか？VS Codeには他にも数え切れないほどの便利な拡張機能があるので、自分にあった機能を見つけて色々試して見てくださいね！
VSCodeは本当にいろいろな便利機能を備えています。
今回紹介した拡張機能だけでなく、Gitとの連携や、スニペットなども含めてVSCodeを使いこなしたい！という人は「Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック」という本がまとまっていてお勧めです！
次回はPythonのエラーチェックがVS codeで簡単にできるようになる方法をご紹介します！
👇👇👇エラーチェックに時間がかかる・・・！という方、必見です！👇👇👇
-
-
VS CodeでPythonのエラーチェックをするには？
続きを見る
