こんにちは！IWACODEの岩村彰斗です。

今回はWeb制作や開発で使用するVisual Studio Code（以下、VSCODE）のおすすめプラグインについてご紹介させていただきます！

もし入れていないプラグインがありましたら参考にして頂けると幸いです。

プラグインとは？
VSCODEなどの「ソフトウェアやアプリケーション」で、機能を追加するための拡張プログラムになります。標準にはない機能を追加することによって、使い勝手が向上し作業効率も上がります。

プラグインのインストール方法

はじめに

プラグインのインストール方法について

VSCODEを起動し、左のサイドバーよりインストールを行います。

プラグインのマークをクリックし、プラグインを検索します。

インストールしたいプラグインをクリックし、インストールボタンを押すとインストールが始まります。

注意点

プラグインはインストール後、ソフトの再起動が必要な場合があります。その場合はVSCODEを一旦閉じて、再度起動してあげるとプラグインが有効となります。

おすすめプラグイン

まず入れておきたいプラグイン

Japanese Language Pack

VSCODEは英語表記のため、日本語で表示してほしいといった方向けのプラグインになります。

Auto Close Tag

開始タグを記載すると、閉じタグが自動で付いてくれます。

例えば<p>と打つと、</p>も自動で記載されます。閉じタグの記載漏れも減るので、とても便利です！

Auto Rename Tag

開始タグの名前を変更すると、終了タグも合わせて変更してくれます。

例えば、<p>・・・</p>を<div>に変更した場合、開始タグの名前を変更するだけで、終了タグも変更してくれます。

変更漏れも防げるのでとても便利です！

入れておくと見やすくなる（視認性が上がる）プラグイン

Color Highlight

色コードの背景色が指定した色になり、設定した色が分かりやすくなります！

Indent-Rainbow

インデントが色分けされて階層がより見やすくなります。

zenkaku

小文字と大文字を識別してくれます。打ち間違えてそのままにするケースがなくなるため、非常に助かります。

Trailing Spaces

コードの末尾に余分なスペースなどが入っている場合に、わかるようになります。

入れておくと効率化が図れる便利なプラグイン

Live Server

VSCODEの変更内容をリアルタイムでブラウザに反映できます。

ローカルサーバとして起動させることができ、VSCODEで保存すると自動的に変更内容が反映されるため、大変効率よくコーディングすることが可能です。

HTMLファイルをchromeなどのブラウザにドラッグアンドドロップする必要もなくなります。

CSS Peek

クラス名にカーソルを合わせて、F12を押すことで定義しているところを表示（ジャンプ）してくれます。

どのようなCSSプロパティがどこで定義されているかすぐわかります！

Alt（Option）+ F12キーでジャンプせずにその場に表示させることも可能なため、行ったり来たりする必要もないです。

IntelliSense for CSS class names in HTML

すでにclassとしてCSSに定義している場合、HTMLに記載する際に自動補完されます。

キーを打っている際に、自動で候補として挙がってくるため、効率よくコードの記載が可能になります。

htmltagwrap

選択したテキストをHTMLタグで囲むことができます。

コードを選択して、Alt（Option） + Wを押すことによって、自動的に開始終了タグが生成されるため、非常に便利です！

デフォルトのタグが<p>になっているので、こちら好みにはなりますが、プラグインの設定画面から変更することが可能です。

コーディングをしていて、レイアウトによっては「この要素に対して親要素を追加したい…」といった場面に遭遇したことはないでしょうか？

コードの量が少なければそれほど手間ではないですが、複数の要素を一気にとなると、下手すると1画面に収まらない場合もあるので、そういった場合に非常に便利です。

さいごに

いかがでしたでしょうか？

プラグインをインストールすることによって、作業時間の短縮や、品質をあげることが可能です。

もし使用していないプラグインや、困っていることが解決できそうなプラグインがありましたら是非お試しください。

今回の記事が少しでも参考になりましたら幸いです。

こんにちは。IWACODEの岩村彰斗です。

今回はHTMLやCSSのコーディングで使用するVisual Studio Code、通称VSCODEでよく使用するショートカットキーをご紹介いたします。

ショートカットキーはかなりたくさんあり、すべて覚えるのは中々ハードルが高いですが、その中でも覚えたら時短に繋がるものについて厳選しました。

たくさんあって覚えられないです・・・

筆者

いきなり全部覚えようとすると、かなり大変なので、まずはどんなものがあるか認識していただき、少しずつでいいので自然に使えるようになりましょう！

一般的な基本的なショートカットキー

筆者

これらは一般的なショートカットキーになります。

Excelなどの別ツールでも同様に使用できるショートカットのため、別枠でご紹介させていただきました。

特にCmd +s , Ctrl + s の保存についてはかなり重要です。

作業をしていて、「あ、保存してなかった」など保存を忘れてしまうお話をよく耳にします。

こまめにCmd + s , Ctrl + s で保存することで、そういったことを防ぐこともできますので、保存についてはこまめに行うことを推奨いたします。

筆者

５分置き、数行に１回など、こまめに保存することをオススメします！

Cmd + c , Ctrl + c のコピー、Cmd + v , Ctrl + v の貼り付けもかなり大事なショートカットなので、もし使用されていない場合は、ぜひ覚えていってください。

右クリックでメニューを出してコピー、貼り付けをするよりもかなり時短になります。

VSCODEでの操作で使用するショートカットキー

エディタ以外での操作

筆者

特にCmb + b,Ctrl + bのサイドバーの開閉は、画面を広く使えるようになるので、覚えておくと便利です！

エディタでの操作

筆者

これらのショートカットは使えるとかなり便利なため、出来るだけ使いながら覚えていきたいですね！
文字だけではわかりずらいものについては抜粋してご紹介いたします。

カーソルがある行ごと移動

筆者

タグの位置を入れ替えたい、といった場面で便利です。

カーソルがある行の削除

カーソルがある行の複製

筆者

同様のタグを複製したい時に便利です。

カーソルを複製（同時に複数個所を編集できる）

筆者

同じ記載を複数個所に入れる場合に便利です。

単語を選択、複数回追加することで、同一の単語を一気に選択する

筆者

同じ記載の場所を同時に編集したい場合に便利です。

同一の単語を同時に選択

筆者

Ctrl（Cmd） + D でも同様のことが可能ですが、こちらのショートカットでは一気に行うことが可能です。

コードの自動整形

筆者

インデント（左側のスペース）が自動的にそろってくれます。インデントがずれていると、どこからどこまでがタグで囲まれているのか、とても分かりずらいため、ずれている場合はこのように成型するのが重要です。

矩形（くけい）選択　※ボックス選択

マウスで選択した場合

矢印キーで選択した場合

筆者

箱型で選択できるため、ボックス選択とも呼ばれます。
このように選択することで一部のテキストだけを削除したり、あるいは変更といったことが簡単にできるようになります。

さいごに

いかがでしたでしょうか？

ショートカットキーは知っているだけで、作業時間の短縮に繋がりますので覚えていきたいですね！

今回の記事が少しでも参考になりましたら幸いです。