福岡のホームページ制作会社

  1. コーディングを効率的に!VSCodeの便利な拡張機能

COLUMNコラム

コーディングを効率的に!VSCodeの便利な拡張機能

あけましておめでとうございます!
皆様、お正月はどう過ごされましたか?
私は例年通りたのしく家にこもっていました。


さて、突然ですが皆様は何のテキストエディタを使ってコーディングを行っていますか?
DreamweaverやAtom、もしかしたらメモ帳を使っている方もいらっしゃるかもしれません。
かくいう私は、人生初の自作サイトはメモ帳で作りました。(十数年前です)
メモ帳でも勿論コーディングはできます。
しかし、テキストエディタの力を借りたほうが断然早くホームページ制作を行うことができます。
何故なら、コーディングを効率的に行えるように多くの拡張機能が用意されているからです。
今回の記事では私が使用している「Visual Studio Code」というテキストエディタの便利な拡張機能についてご紹介します。


※「Visual Studio Code」(VSCode)とは
Microsoftが開発したWindows、Linux、macOS用のソースコードエディタです。
無料でダウンロードできます。


https://azure.microsoft.com/ja-jp/products/visual-studio-code/


拡張機能のインストール方法


サイドメニューにある赤丸で囲っているボタンをクリックして検索欄に拡張機能名を入力してインストールします。


Japanese Language Pack for Visual Studio Code


まずこれ!英語が苦手な方は最初にこの拡張機能をインストールしましょう!
メニューが日本語になります。
英語が得意な方、英語に慣れたい方はインストール不要です。


Auto Close Tag


閉じタグを自動的に入力してくれる拡張機能です。
自分で入力しなくて良いぶん楽できます。


Auto Rename Tag


開始タグ名を変更したとき、閉じタグ名も自動で変更してくれる拡張機能です。
例えば<p>タグを<div>タグに変更したいとき、開始タグの変更と同時に閉じタグの名前も変えてくれます。


Bracket Pair Colorizer


添付画像のように括弧を色分けしてくれます。
sassを書いているときに本当に本当にお世話になっています。
私になかではなくてはならない存在です。神。


indent-rainbow


上記「Bracket Pair Colorizer」の添付画像で列に色がついていますが、これです。
列を色分けしてくれる拡張機能です。
こちらも大変お世話になっています。神。


Highlight Matching Tag


ペアになっているタグを下線で教えてくれます。
コードが長くなってくるとどこに閉じタグがあるかわからなくなるのですが、それを解消してくれます。神。


EvilInspector


表示が崩れてるのに原因がわからない!結局原因は全角スペースだった…という経験はございませんか?
私はあります。そんな方に朗報です!なんとこの拡張機能、全角スペースを強調してくれます!


Insert<br>Tag


「shift + enter」で<br>タグを入力してくれます。いちいち自分で打たなくていいのでありがたい…


Beautify


コードをきれいにフォーマットしてくれます。


Color Highlight


カラーコードに色付けしてくれます。
どのタグにどんな色を指定したのかが、一目でわかります。



ちなみに我らがEmmet先輩ですが、な、な、なんと!VSCodeには標準搭載です!ありがとうございます!


以上、VSCodeの便利なパッケージのご紹介でした。


この記事を書いた人 デザイントランスメディア