Visual Studio Codeのプラグイン

Visual Studio Codeのプラグイン

久々に拡張機能の整理整頓してたので、個人的にはこれは作業効率が上がりそうって思ったのを紹介します。

indent-rainbow

インデントを色付きにしてくれる拡張機能です。
パッと見でインデントの深さが色によって分かりやすくなるぐらいと少し華やかなになる。
普段はこんなカラフルにしてませんが、この機会に虹にしてみました。
プラグインでインストール後、使い方は設定からindent-rainbowを検索しindent-rainbow: Colorsの
setting.jsonでcolorの指定をします。
rgbaで透明にしないとカラフルすぎて目がチカチカするので気をつけて下さい。

//画像と同じカラーコードです

"indentRainbow.colors": [

"rgba(255, 0, 0, 0.2)",
"rgba(255, 165, 0, 0.2)",
"rgba(255, 255, 0, 0.2)",
"rgba(0, 128, 0, 0.2)",
"rgba(0, 255, 255, 0.2)",
"rgba(0, 0, 255, 0.2)",
"rgba(128, 0, 128, 0.2)",

]

Auto Rename Tag

HTMLなどでタグの変更した時、開きタグを変えたまま閉じタグは変え忘れた。
そういったのを解消してくれる拡張機能
開きタグと閉じタグ両方を同時に変えてくれます。
プラグインでインストールし有効化します、設定は特にありません。
これに似たプラグインで『Auto Close Tag』というのもあります、自動で終了タグを追加してくれる拡張機能。

Color Highlight

カラーコードを自動で色付けしてくれる拡張機能です。
指定した色が自動で塗り潰されてすごく分かりやすい
こちらもプラグインでインストールして有効化するだけで設定はありません。

Draw.io Integration

Web上で図を作成できる拡張機能です。
マウス操作でテンプレートを参考に独自に色々作図ができます。
プレゼン用とかで作成する時はこれで決まり
こんな便利なのにもちろん無料です!!。
プラグインでインストールして有効化します、できれば再起動した方が良いかもしれません。

Live Sass Compiler

CSSのコーティングするなら作業効率を上げてくれる拡張機能、Sassファイルを監視してどこのワークスペースにあったとしてもそれを追跡し自動で
コンパイルしてくれます。
使い方は簡単で、プラグインでインストールしたらVS Code内の下部にある『Watch Sass』をクリックすると監視が始まります。
『Watching…』となっていれば大丈夫です。終了したい場合は『Watching…』をもう一度クリックするだけです。
Watch SassをクリックするとすぐにCSSファイルが自動で生成され、Sassファイルを更新する度にCSSファイルも自動でコンパイルされ更新されていきます。

peacock

Visual Studio Codeのウィンドウを複数開いた時
どれがどのワークスペースか分からなくなりますよね
そんな時はpeacockを使えば、VS Codeのウィンドウの枠の部分のみが色分けになって分かりやすくなります。プラグインでインストールしたらWindowsならCTRL + SHIFT + PもしくはF1をmacOSならCOMMAND + SHIFT + Pを押し、コマンドパレートを開きます"peacock"と検索し
"Peacock: Change to a favorite color"を選択したら
好きな色を選んで下さい。

Git Lens

Gitの細かい作業をVS Code上で操作が可能となる
プラグインをインストールすると、サイトバーに『Git Lens』のアイコンが追加され表示されてると思います、そこからリポジトリやファイルなどの履歴から過去のコミットなどを確認する事が可能で、エディタのコードにマウスオーバーすると直前のコミットの変更内容が表示されます。

Visual Studio IntelliCode

こちらはプラグインでインストールして有効化すれば大丈夫です。
自分がよく使うメソッドが候補の所に★付きで上位に出てきます。
地味に良い、あればなんだか良いなぐらいな感じです。対応言語は

Open in browser

HTMLなどを編集したらすぐにブラウザで確認したいですよね、この拡張機能をつかえば一瞬で開けます。
まずは拡張機能の検索欄でOpen in browserと検索して上位に出てるのをインストールします。
そしたらHTMLファイル上で「Alt」+ Bを押せばすぐにローカルでブラウザがたちあがります。
Mac Osは「option」+ Bとなります。

Error Lens

これは便利です、わざわざコンソールを見なくても
エディタ上にエラーメッセージを表示してくれます。
プラグインでインストール後、有効化。

Prettier

自動整形フォーマッターです。ソースコードを保存すると、タブやセミコロンなど色々と自動で整形してくれます。

プラグインでPrettier Code formatterをインストールしますそしたら設定を開いてフォーマッター設定をしなければいけません。検索の所に「save」と入力
「Editor:Format On Save」という欄のチェックボックスにチェックを入れます。

これだけです!!、後は保存した時に自動でフォーマッターしてくれます。HTML・CSS・JavaScript
どの言語でも使えるのでまず間違いなく便利な拡張機能の１つで使用者も多いです。

VS Codeの拡張機能、便利なの沢山ありますがどんどん入れれば良いってわけではなく、これは自分にとって作業が捗りそうと思ったのを入れるだけで良いんです。
もし機会があればVS Codeの便利なショートカットキーも記事として上げるかもしれません。
ショートカットキーの種類も沢山あるので、個人的に覚えてればまず間違いなく使用するものだけを選び紹介致します!!