VSCodeで入れてみて良かった拡張機能まとめ

2021年12月15日水曜日

エンジニアO ブログ

 

どうも、こんにちは
エンジニアOです。

今年も残すところ3週間を切りました。
皆さんやり残したことなどはありませんか。

私は毎年12月になると
「これやっておけばよかったなぁ、あれやっておけばよかったなぁ」などと
自責の念に駆られております。。。

また来年色々目標を決めて前向きに頑張っていきましょう(カラ元気↑↑)



さて今回は私が常日頃利用しているコードエディターの
「Visual Studio Code」こと「VSCode」のおすすす拡張機能を紹介していきたいと思います。



◆Japanese Language Pack for Visual Studio Code


VSCodeは基本的にメニューなどが英語で表記されています。
こちらの「Japanese Language Pack for Visual Studio Code」の拡張機能を入れることにより英語表記から日本語表記に変更することができます。
私はあまり英語が得意ではないのでとても重宝しています。

インストールサイト:Japanese Language Pack for Visual Studio Code


◆indent-rainbow


コードを書いているとインデントか半角かわからなくなったり、
コードの最後の部分にスペースが隠れていたりなど、困ったことが多々ありました。
そんなとき「indent-rainbow」の拡張機能を入れたら、あら不思議と言わんばかりに
インデントか半角かわからなかったところや隠れていたスペースが一目瞭然に見分けることができるようになりました。

インストールサイト:indent-rainbow


◆Zenkaku


コード書いていてエラーが表示されるときにどこが問題なのかわからない時があります。
探してみると途中に全角スペースが混ざっているときがあります。
一目ではわからないため、探すのに苦労します。
そんな時に「Zenkaku」という拡張機能は全角スペースを可視化してくれます。
これで、全角スペースが途中で入っていても一目で見つけることができます。

インストールサイト:Zenkaku


◆CSS Peek


htmlファイルで適用しているcssを編集しようとしする際に、
毎回cssファイルを開いて、対象のcssを探すことがあると思います。
cssファイルが多くなってくるとどれかわからなくなってしまいます。
CSS Peek」はhtmlファイルから簡単に参照しているcssを探すことができます。
ファイルや対象のcssを探す手間が省けてとても便利です。

インストールサイト:CSS Peek


◆Live Server


htmlファイルを編集して、ブラウザ上で確認する際に少し手間がかかると思っている人もいると思います。
Live Server」は簡易的にローカルサーバーを立ち上げて、編集したhtmlファイルをブラウザで確認することができます。さらに、Live Serverでローカルサーバーを立ち上げた状態でhtmlファイルを編集すると自動更新されて、編集したところが反映されます。
ブラウザで確認するときのちょっとした手間を省けて便利です。

インストールサイト:Live Server


私が特に愛用しているVSCodeの拡張機能を紹介させていただきました。
今回紹介したVSCodeの拡張機能はほんの一部です、探せばたくさん出てきます。
自分のスタイルに合った拡張機能を探してぜひ試してみてください!