VS Codeで入れとくと便利なプラグインとか設定とか-フロントエンド向け

#はじめに

フロントエンドエンジニアよりのWEBデザイナーとして、VS Codeを約2年ほど使ってみて入れてて良かったなぁ　便利だなぁと思ったプラグインを紹介いたします。

・環境
使い始めたときはWindowsで使用していましたが、今はMacです。
大体どちらでも使用感は変わらない気がします。

・対象
VS Codeを使ってみたいコーダー、フロントエンドエンジニア向け。

##VS Codeってなに？

VSCode（Visual Studio Code）はMicrosoft社製のテキストエディタです。
無料で使えて、プラグイン（拡張機能）も豊富なのでとても便利です。
自分は使いはじめてすぐに惚れ込みましたw

##Japanese Language Pack for VS Code

日本語化プラグイン
英語が残念な私にとっては必須です。。。

##vscode-icons

表示あれるアイコンを変更できるプラグインです。

##Bracket Pair Colorizer

{や（などの括弧をわかりやすく色付けしてくれるプラグインです。
対応する括弧がどこか一目瞭然となるため、jsを書く時などに便利です。

##Indent-Rainbow

インデントを階層ごとに虹色に色分けしてくれるプラグインです。
好みは分かれそうw

##vscode-htmltagwrap

ドラッグして選択した文字列をタグで囲むことができるプラグインです。

使い方は
ドラッグして文字列を選択して　option　＋　W
これで前後を　

で囲むことができる。
デフォはpタグですが、そのままの状態で編集すれば、別の要素に変えることができます。
かなり昔DWでコーディングしてた時に重宝してた機能で、VS Codeでも同じことできないかなぁ、、、なんて探してみたら見つかりました！

##Color Highlight

カラーコードを実際の色で可視化してくれるプラグインです。

##Partial Diff

ドラッグして選択した部分の差分を簡単に確認できるプラグインです。

##VS Color Picker

その名の通りカラーピッカーを表示させるプラグインです。

##Whitespace+

空白文字を可視化してくれるプラグインです。
併せて

zenkaku

も使用することで更に余計な空白を見つけやすくなります。
全角空白が原因でエラー・・・なんてことが減ります！

更に！私は
###Trailing Spaces
も併せて使っていたりします。
こちらは行末の無駄な空白を可視化してくれます。

##テキスト校正くん

###番外編
日本語の文章をチェックしてくれるプラグインです。
txtファイル、mdファイルなどを開くと自動で文章のチェックをしてくれます。

##設定

###自動でフォーマット
以前はPrettier や Beautify　といったプラグインを使用していましたが、
現在はVS Codeにデフォで設定があるのでそちらを使用しています。
setting.jsonの中にある

"editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,

この項目を全てtrueにすると
上から
ソースをペーストした時に自動でソースフォーマットを適用
ファイルを保存する時に自動でソースフォーマットを適用
入力した時に自動でソースフォーマットを適用
となります。

##まとめ

Qiita初投稿となります。
自分への備忘録も兼ねて、エディタの便利機能をまとめてみました。
ここに紹介したプラグイン以外にも使用しているプラグインはあるのですが、今回は万人が便利に感じるであろう機能に絞ってみました。
これからVS Codeを使ってみよう！という方や、前から使ってるけどこのプラグインは知らなかったという人に届けば嬉しいです。