はじめに

当記事は勉強を開始したばかりの初学者向けです。
VScodeを使ってweb制作をしています。便利だと感じた拡張機能の紹介です。

拡張機能名はリンクになっています

目次

1. Japanese Language Pack for Visual Studio Code

vscodeを日本語で使うための拡張機能。

英語が苦手な方は絶対入れるべき!!
　　　　

2. Zenkaku

エラーの原因になる全角文字を教えてくれる。

灰色になってるやつ!!

導入したら常時ONになるように設定しよう

デフォルトではvscodeを開くたびにONに切り替える必要がある。

常にONになるように設定する。

3. Live Server

HTML/CSS/JavaScriptの記述をリアルタイムでブラウザに反映。

都度更新ボタンを押す必要がない!!

4. Live Sass Compiler

sassのcssへのコンパイルを自動で行う。

デフォルトだとコンパイルされたcssファイルはコンパイル元と同じフォルダに入る

コンパイルしたcssファイルはcssフォルダに入れたい

5. htmltagwrap

**html**タグをラップできる。

範囲を選択してoption + Wでラップ。

6. Bracket Pair Colorizer

対応するかっこの色を変える。

縦棒選で範囲を教えてくれる。

直感的にタグの始まりと終わりがわかります!!

7. Code Spell Checker

単語のスペルミスを教えてくれる。

8. HTML CSS Support

htmlを書く際にcssで利用中のclassが候補として出るようになる。

これならスペルミスも減りますね。

9. WordPress Snippet

最初の数文字入力するだけでwordpressのテンプレートタグを候補に表示。

wordpressを使うなら絶対入れておくべき!!

VScodeは拡張機能でより快適に扱えるようになります。
紹介した9選の中から気になったものを試してください!!

10選じゃないの？と思いました？

実は同じ拡張機能を2回紹介していたので一つ消しました・・・
でもタイトルはキリが良いから10選!!