見出し画像

VSコードに入れておきたい拡張機能7選ーHTML&CSS編ー

結論から行きます

Auto Rename Tag
Bracket Pair Colorizer 2
Code Spell Checker
Japanese Language Pack for Visual Studio Code
Live Server
Path Intellisense
Prettier - Code formatter

です

一つ一ついきましょう

Auto Rename Tag

HTMLでタグの名前を変えると自動で綴じタグの名前も変えてくれます

VSコードはEmmet記法がデフォルト入ってるのでそこまで重要ではないんだけど
コード修正の時に役立ちます

Bracket Pair Colorizer 2

予約語や対応するカッコを色付けしてくれます
あると無いとではコードの見易さが雲泥の差です
プログラミングをするなら絶対入れましょう

Code Spell Checker

その名の通りコードのスペルが間違ってると
波下線で教えてくれます
初心者のエラーの8割はタイポだと思ってるので
入れた方がいいです

Japanese Language Pack for Visual Studio Code


これは単純に日本人なので
英語でも大丈夫と言う人には不要です

Live Server

ローカルにサーバーが立ち上がります
HTML&CSSを書き換えるとリアルタイムでリライトしてくれます
いちいち更新ボタンを押さなくてもいいので便利です
たまにエラー起こします

画像1

Path Intellisense

hrefなどの参照パスの候補を表示してくれます
これもタイポが防げるので入れたほうがいいでしょう

Prettier - Code formatter

コードのフォーマットを整えてくれます
インデントの幅やコロンの自動補正など
共同開発で同じフォーマットの書き方にしたい時に
便利ですが、個人開発でも綺麗な見た目になるので便利です

最後にーインストール方法ー

インストールは↑⌘Xで検索してインストールボタン押すだけです
※Windowsはshift+ALT+Xかな

難しいことは無いので大丈夫です
気に入らなかったら同じ操作でアンインストールボタンを押すだけです

フォローしてください
このアカウントはもちろん
twitter:えんと@HTML&css 勉強中 
の方もフォローして貰えればうれしいです

この記事が気に入ったらサポートをしてみませんか?