terutika.com

【必須】Visual Studio Code便利なプラグイン5選

【必須】Visual Studio Code便利なプラグイン5選

2020-09-24

プラグインってなんですか?必要なんですか? まあ便利な機能たちだと思ってくれてOKです!
プラグインを入れることで自分なりにカスタマイズしてより使いやすく効率的にコードを書くことができるます。 ここではWEB制作者に向けてVisual Studio CodeでHTMLCSSjQueryなどを書いていく人向けのプラグインの紹介になります!

 

インストールの仕方から紹介するよ!

便利なプラグイン

1つめはインストール方法と一緒に紹介。

Japanese Language Pack

Visual Studio Code 日本語化してくれるプラグインです。帰国子女でもない限り入れときましょう。

プラグインのインストールの流れは以下のようになります。 赤丸をクリック→青丸でプラグインを検索→黄丸でインストール インストール後はソフトの再起動を求められますので再起動しましょう。

Auto close tag

ここからはプラグインの紹介のみどんどんしていきます! htmlタグを書いた時に自動で閉じタグを書いてくれるプラグインです。 progateをやってた人ならこれのありがたみが分かるはず、、

Auto Rename Tag

開始タグを変更したときに自動的に閉じタグまで変更してくれます。
修正時の時間が短縮されて便利です!

Highlight Matching Tag

対応する開始タグと閉じタグを色を付けて教えてくれます。
コードをたくさん書いて画面がdivがいっぱいになってくると
どれがどれの閉じタグだ、?」となります。
そんな時にはこいつに助けられます。。

Live Server

htmlcssの変更をブラウザに反映するには本来ブラウザをリロード(再読み込み)する必要があります。 このプラグインを起動しておけば自動的に反映してくれます! インストールすると右下に「Go live」ボタンが出現しますのでクリックするだけで起動します。

最後に

今回はVisual Studio Codeのプラグインを紹介しました。

 

1クリックでも少なく!1秒でも早く! 仕事ができる人はこうして時給をあげていくんだと思います。

 

皆さんも今後は自分のやりたいことにあったプラグインを模索してみてください。