こんにちは！ちづみ(＠098ra0209)です。現在フリーランスでwebデザイナーとして活動しています。
コーディング時にはVScodeというを使っているのですが、今回はhtml,cssコーディングが捗るおすすめのプラグインと設定を紹介していきます。
プラグインの入れ方
VScodeにはプラグインという、VScodeの機能を拡張したりパワーアップできる機能があります。
入れ方は左側にあるブロックのようなものをクリック→検索窓にプラグイン名を打ち込むとそのプラグインが出てくるのでそれをインストールします。
初めに知っておく、やっておくべきこと
日本語対応にする
XScodeは基本英語表記のUIなので、使いづらい場合はまず日本語表記に変えましょう。
変え方はプラグインのJapanese Language Pack for Visual Studio Codeを使います。
Japanese Language Pack for Visual Studio Codeとプラグインの検索窓に打っていただき、インストールします。すると日本語のUIになると思います！
自動で保存されるように設定する
これはプラグインではなくVScodeの設定からやっておきます。コードを自動で保存してくれるように自動保存の設定をしておくことでいちいち保存する手間が省けます。
方法は左下の歯車のボタンをクリック→設定を選択します。
Files:AutoSaveをafterDelayに変えます。その下は1000に指定すればいいと思います。
これで自動保存が可能になります。
ショートカットキー
行の移動やコピーなど、ショートカットキーを覚えると作業効率がぐんと上がります！
Quitaのこちらの記事がわかりやすいのでぜひ参照してみてください。( ´ ▽ ` )
[blogcard url=”https://qiita.com/naru0504/items/99495c4482cd158ddca8″]
Emmet
Emmetは主にhtml、cssを効率よく早く記述することができます。
Emmetは初めからVScodeに搭載されているので導入の手間もありません。
例えば、htmlで、!と打つだけでmetaタグ等の、htmlの書き始めに必要な情報を一瞬で書いてくれます！
cssであれば、例えばbackground-colorを打ちたい時に、bgcと書けば一瞬でbackground-colorに変換してくれます。
Emmetを使えるようになるとスペルミスも減りますし、記述が圧倒的に早くなるのでぜひ早めに覚えて導入することをおすすめします。詳しい使い方はこちらの記事がわかりやすいのでぜひみてみてください！
[blogcard url=”https://haniwaman.com/emmet/”]
ユーザースニペット
例えばヘッダーとかフッターとかブログカードとか、他のページでもなんども型を使いまわしたい時があるかと思います。そんな時に一度書いたことのある同じようなコードはすぐに召喚させたいですよね。
そんな時に便利なのがユーザースニペットでして、VScodeにはこちらも搭載されているので（さっきから神か、、？）知っておいて使わない手はないです！
例えば私の場合ですが、fooと入力すればfooterの型がでるように設定してあります。footerは同じようなデザインが多いので、こちらで登録して置くとめっちゃ時短になります。
登録方法などはこちらがわかりやすいです。
[blogcard url=”https://haniwaman.com/vscode-snipet/”]登録がちょいちょ手間ですが、この先のことを考えるとかなりの時短と手間が省けるのでぜひおすすめしたいです！
おすすめプラグイン
コーディングの効率化は正直やり込めば沼なんですが、「まずはこれだけは入れよう！」というおすすめプラグインを紹介します。
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
ブラウザへの変更の反映を自動で行ってくれます！これにより、ブラウザ側のリロードの必要がなくなり、コードを記述するとすぐに反映されます。（Progateをやったことのある方ならわかると思うのですが、コードを書いたらすぐに反映されるあれです）
ブラウザの自動更新は gulpなどでも処理できますが、エディター側から気軽に設定できるのは便利です。
Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
こんな感じにタグを変更すると閉じタグも自動で変更してくれます。
HTMLHint
間違いがあると警告を出してくれるプラグインです。スペルミスなどが減り便利です。
CSSTree validator
https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree
こちらもcssの間違いがあると警告を出してくれるプラグインです。
zenkaku
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku
このように全角になっているものを薄い四角の枠で示してくれます。全角と半角はわかりづらいので助かります。
Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
cssや画像のパスを補完してくれます。ファイルパスは何かとつまづきやすいので、クリックだけで導いてくれるのはありがたいです。画像の名前とかの間違えも無くなります！
W3C Validation
W3CをVScode内で完結できるプラグインです。書き終わりにこちらを有効にして文法チェックを行いましょう。
[blogcard url=”https://blgid1974.blog.fc2.com/blog-entry-1396.html”]https://marketplace.visualstudio.com/items?itemName=Umoxfo.vscode-w3cvalidation
コーディングを練習するなら
以上のVScodeのプラグインや設定を踏まえ、いざコーディングをしてみようとした時に何から始めたらいいかわからないですよね。コーディング用の練習のnoteを出していますのでぜひご利用ください。
レベル別の難易度や、ポートフォリオ掲載OKにしてますので、ぜひご利用ください！
[clickliscode color=”orange” type=”oehler” url=”https://note.mu/chizumi_/n/nf0ff69e550c0″ target=”_blank” rel=”nofollow”]noteはこちら[/clickliscode]
以上です！
