VS Code使っててプラグインとかいろいろ入れてるけど何がどんなプラグインか忘れてあとあと大変になりそうなのでまとめておく。
基本HTMLとCSS、JavaScript、たまにWordPressのPHPくらいを書いてるコーダーです。
闇雲にたくさんインストールすると動作が重くなる可能性があるから基本的には必要なものだけ入れる。
使用中のプラグイン
Auto Close Tag
自動でHTMLとXMLの終了タグを追加してくれる拡張機能。
終了タグの書き忘れや、ネストが深くなって終了タグ書くところ間違えた！とかをある程度防げる。修正する時とかとても助かる。
あと他人のコードを確認する時も。未経験入社の人のフィードバックするときに大変助かった。
Auto Rename Tag
Auto Close Tagとセットで使いたい。ペアになっている HTML/XML タグの名前を自動的に変更してくれる。
あとからこのタグやっぱこれにしようとか、そういうのにとても助かる。修正の時に大変助かる。
Auto Close Tag入れるんだったらこれも入れよう。
Highlight Matching Tag
一致する終了タグをハイライトしてくれる。ネストが深くなった時助かる。
Color Highlight
カラーコードの色を、その色に可視化してくれる。入れなくても良いけど、ブラウザ確認する前になんとなく把握できるし、カラー指定しているところがわかりやすくなる。
Easy Sass
SASS/SCSSをコンパイルしてくれる。でもこれは別のにするかも。
EvilInspector
全角スペースを可視化してくれる。わかりやすい！
なぜ書いたコードが反映されてないの？エラーになってるの？って時に助かる。これなしで全角スペースを探し出すのはしんどいので入れよう。
これは自分がコードを書いているとき、というより新人さんやお客さんが自分で書いたコードがうまく反映されないんです～って時に役立った。
Image preview
画像ソースを可視化してくれる。
無くてもすごく困らないわけじゃないけど、助かるときがある。なのでやっぱり入れとくと良い。
SVG Viewer
SVGを可視化してくれる。あんまり使ってない。というか振り返るまで入れてることすら忘れていて使ったことがない。
indent-rainbow
インデントごとに背景色を変えてくれる。
ネストが深くなってくると大変助かる。
IntelliSense for CSS class names in HTML
class名を補完してくれる。助かる！
Japanese Language Pack for Visual Studio Code
UIを日本語にしてくれる。なくても良いけど、VS Code使い始めの時はあると助かるかも？なくてもあんまり問題ない。
Live Server
ローカルサーバーをVSCodeで起動してくれる。
最近はデュアルモニターになってあんまり使ってない。
vscode-icons
ファイルやフォルダにアイコンをつけてくれる。
無くても困らないけど、わかりやすくなる。あと画面が楽しい。
テキスト校正くん
その名の通りでテキストを校正してくれる。
便利かと思って入れてみたけど、そんなにメリットなかった。お堅い文章を書くとかそういった場面じゃないと使い道がない。わざとその言い回しにしてる部分も校正の赤線が入るので邪魔かも。
お堅いサイトを作成してる人は良いかも。
Prettier – Code formatter
コードを整形（フォーマット）できる拡張機能。便利そうだから今入れた。
使い方はこちらのサイトを参考にする。
htmltagwrap
選択している箇所を、新たなタグで囲んでくれる。便利そうだから今入れた。
任意の箇所を選択してalt + wで実行。すると、その箇所を<p>タグで囲んでくれる。
囲んだ後はpタグが選択されてる状態だからそのまま他のタグに入力しなおせば良い。
検討中のプラグイン
Trailing Spaces
コード上の行末の半角スペースを可視化してくれる。なくても良いけど、あっても良いな。
コメント