趣味

これは入れとけ!!現役コンサルタントが使ってる VScode(Visual Studio Code)おすすめ拡張機能(プラグイン)10選

このページでは、現役のSE達が使ってる開発が捗るVScode拡張機能を10個紹介します。
拡張機能を使っているか否かで開発効率は全然違います。生産性が上がれば給料も上がります!
もしくは効率よく開発し空いた時間を趣味の時間に使うも良いでしょう。

1 . 拡張機能とは?

拡張機能とは、ドラクエでいう装備のようなものです。拡張機能を入れてくことで、開発する上で欠かすことの出来ない便利な機能が使えます。間違いなく開発効率が上がります。インストールするだけです。
装備を整えないでダンジョンに潜り込みますか?潜り込みませんよね。
装備を自分の好みに整えることで、おしゃれですし、何より敵を早く倒せます。

縦に並んだ一番左のアイコンの、上から4番目の正方形が集まったアイコンを選択すると検索バーが出てきます。

拡張機能

2 . おすすめ拡張機能

① Material Icon Theme

アイコンが見やすくなる拡張機能。デフォルトでもいいですけど、こっちの方が圧倒的に見やすいです。

② Japanese Language Pack for Visual Studio Code

日本語になります。英語の方がかっこいい!と思うかもしれませんが、素直に入れておくといいでしょう。

③ Prettier

コードをフォーマット(整形)してくれます。コードを綺麗な状態に保つためにも入れておきましょう。

④ Bracket Pair Colorizer 2

対応する括弧を色分けして表示してくれます。圧倒的に見やすくなります。

括弧色分け

⑤ indent-rainbow

インデントを虹色にしてくれます。あった方が見やすいです。あると無意識的に目が楽です。
④で紹介している写真と比較してみるとわかると思います。

虹色

⑥ Auto Rename Tag

ペアになっているHTML/XMLタグの名前を自動的に変更してくれます。終了タグを勝手に変えてくれるので手間が減ります。また、divが増えてしまった際に、終了タグのどのdivだっけ?とならないので便利です。

⑦ CSS Peek

HTMLのidやclassへ定義ジャンプしたり、HTMLファイル上でCSSスタイルを確認できるようになります。時短になります。

⑧ Todo Tree

コメントでTO DO を入れておくと、木のアイコンからどのファイルでTO DO を書いているか管理できます。
ソースの消し忘れなどを防ぐことができます。

TODO

⑨ Output Colorrizer

出力結果を色付けしてくれます。単色に比べて圧倒的に見やすいです。

⑩ Code Spell Checker

スペルを間違えているときに教えてくれます。スペルなんだっけって検索する手間が減ります。

-趣味
-