HTML/CSS システムエンジニアになる ツール

VS Codeの便利な拡張機能5選!

こんにちは、こちょすです。

VS Codeのインストールをした後は、自分好みの開発環境を整えていきましょう!

 

今回はどのような言語で開発する方でも、共通してこれはいれておくと便利!という厳選した拡張機能を5つご紹介します!

 

まだインストールができていないよという方は、以下の記事を見てインストールしてみてくださいね!

VS Codeをインストールしてみよう!

続きを見る

 

こんな方におすすめ

  • VSCodeのインストールはしたけど使いこなせていない
  • VSCodeの拡張機能を使って効率的に開発したい
  • 拡張機能の設定方法がわからない

 

変数や関数が見やすくなる拡張機能 Material Theme

コーディングをしている時、メモ帳のように変数や関数の色が同じだと、見にくくて効率が悪いですよね!

 

そんなときコーディングの作業が捗るコードがはっきりと見やすくなる拡張機能がMaterialThemeです!

では早速いれて見ましょう!

 

まずは左の拡張機能のアイコン(ルービックキューブみたいなやつ)を押します。

 

 

この検索窓に、「Material Theme」と打って検索します。

これをインストール!

 

すると、どのテーマにするかを聞かれます。

僕はダークな背景に変数とかは明るくわかりやすいのが好きなので、「Darker High Contrast」にしてみましょう!

「set color theme」にてあとから変更も可能です。

 

ではファイルを開いて見ましょう!

 

こんな感じで見やすくなりましたね!

 

 

ファイルの種類が一目で分かる拡張機能 Material Icon Theme

Web制作や、アプリ開発をしていると、何十ものファイルを開いて行ったり来たりしながら開発をしている人が大半だと思います。

 

僕もいつもそうやって開発しています。そんなとき、ぱっと見でファイルの種類が分かると効率よく開発ができます

それを叶えてくれるのがMaterial Icon Themeです。

 

さきほど同様拡張機能の検索から、「Material Icon Theme」と調べてみましょう。

 

 

installをクリックすると、プルダウンでMaterial Icon Themeが選択できるようになるので、これをクリック!

 

 

ではどんな感じで見えるのか確認してみましょう!

 

 

カッコのペアが色で分かる拡張機能 Bracket Pair Colorizer 2

コーディングしていると、if文やfor文が複雑になってきて、カッコの閉じ忘れが多発したりしますよね。

 

そんなときにこの拡張機能をいれておくと、ペアになっているカッコが色で一目で分かるので便利です!

ちなみにこの拡張機能には「Bracket Pair Colorizer」という1もあるのですが、今回入れるのは2のほうなのでお間違いなく!

 

ではいつもどおり検索してinstallしましょう!

 

 

ではみてみましょう!

 

こんな感じで、オレンジや赤などでペアが一目で分かるようになります!

 

インデントに色が付く拡張機能 indent-rainbow

htmlや、他の言語でも、見やすく書くためにはインデント(タブで段落を下げること)はとても重要ですよね!

 

ぼくはPythonを使っているので、インデントは人一倍意識をする必要があります。

 

というわけでこの拡張機能をいれています!

 

 

では見て見ましょう!

こんな感じですね!

 

キャプチャだと見にくい気がしますが、実際にエディタで見るととてもわかりやすいのでおすすめです!

 

開始タグと閉じタグを同時に編集できる拡張機能 Auto Rename Tag

htmlを編集していると、「あー、、、ここのタグを別のタグに変えたいな」ということってありますよね。そういうとき、例えば

<div>

~~~~~~

</div>

となっていたとき、開始タグと閉じタグをそれぞれ編集するのって面倒だったり、閉じタグを編集し忘れてしまうとかってあるあるですよね。

 

そんなときにこの拡張機能を入れると、開始タグと閉じタグを同時に編集してくれるので、修正ミスが少なく、かつ修正作業を半分にすることができます!

 

ではいれていきましょう!

 

 

いかがでしたでしょうか?VS Codeには他にも数え切れないほどの便利な拡張機能があるので、自分にあった機能を見つけて色々試して見てくださいね!

 

VSCodeは本当にいろいろな便利機能を備えています。

今回紹介した拡張機能だけでなく、Gitとの連携や、スニペットなども含めてVSCodeを使いこなしたい!という人は「Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック」という本がまとまっていてお勧めです!


 

 

次回はPythonのエラーチェックがVS codeで簡単にできるようになる方法をご紹介します!
エラーチェックに時間がかかる(>_<)という方、必見です!

👇  👇  👇

VS CodeでPythonのエラーチェックをするには?

続きを見る

グラマラスパッツ

-HTML/CSS, システムエンジニアになる, ツール

© 2020 これブロ