こんにちは。ウェブ制作会社で働くやなぎはらめいです。
ウェブ制作会社で働くウェブデザイナー・コーダー・ウェブエンジニアさん向けに便利なプラグインを紹介します。
私が普段から使用していて特に便利だなと思うものを載せていきます。
Auto Rename Tag
このプラグインは自動で開始タグと閉じタグを合わせてくれます。
例えば、開始タグを変更したら終了タグも自動で変更してくれます。
つまらないミスが減ったり、作業時間の短縮につながるのでぜひ入れておきたいプラグインです。
Highlight Matching Tag
セットになっている開始タグと終了タグをハイライトしてくれるプラグインです。
同じタグが連続であると、どれとどれがペアなのか分かりづらいですからね。ハイライトしてくれると分かりやすくかなり楽になります。
indent-rainbow
インデントの深さが分かるように色が付くプラグインです。
好みに合わせて色を変更することができるようです。ちなみに私はデフォルトで使用しています。十分わかりやすいので。
CSS Tree validator
cssの文法エラーを発見してくれるプラグインです。
間違った記述をするとVScodeの下部にエラー箇所が表示されます。
どこがおかしいのかすぐに分かるので作業効率が上がるのは間違いないです。
W3Cに準拠しているので、最も正しく判断できると思われます。
Live Sass Compiler
Sassをコンパイルしてくれるプラグインです。
特に設定などは不要で簡単に使用することができます。
画面下部に「watch」のマークが出るのでそれをクリックするとコンパイルできるようになります。
Gulpなどの環境がある人は不要かもしれませんが、簡単にコンパイルできる環境を用意することができるので知っていてもよいかもしれません。
また初めてSassを使う人なども入れてみてもよいかもしれませんね。
このプラグインをインストールすると「Live Server」も同時にインストールされます。
Live Serverは次の項目で紹介しています。
Live Server
ファイルの更新を検知して自動でブラウザを更新してくれます。
例えばhtmlファイルやcssファイルを書き換えて保存したときにブラウザの画面が自動でリロードされます。画面をわざわざ更新しなくてよいですし、開発のスピードがぐっと上がりますね。
ワークスペースのルートを元に仮想サーバーを立ち上げています。
前述のLive Sass Compilerと同時にインストールされます。
おわり
いかがだったでしょうか。
以上がウェブ制作者であるウェブデザイナー・コーダー・ウェブエンジニアさんがVScodeを使用していくうえで必須だと思うプラグインの紹介でした。