【エディタ】VS CODEの快適な使い方【Microsoft】

プログラミングでhtmlなどのコードを書くときはメモ帳でもできますが、エディタと言われている高機能のメモ帳を使うととても便利ですよね。

VS CODEの他にも、Atom、Sublime Textなどのエディタがありますが、今回はMicrosoftのエディタのVS CODEを快適に使う方法をご紹介していきたいと思います。

私は、Macを使用しているのでMac版で記述していきます。

VS CODE（Visual Studio Code）を快適に使う方法

VS CODEはオープンソースで無料で利用できます。早速サクサク使っていきましょう。

快適に使用するために、まずは配色テーマを好きなイメージにします。

CODEをクリックして基本設定 ▶︎ 配色テーマ(commandを押したまま KT)で好きな色を選びます。

色を選ぶときに↑↓をクリックすると、即座に配色の変化を見ることができるので、お気に入りのカラーを見つけて選択します。

VS CODEの配色テーマ一覧

ライトテーマやダークテーマなどから各色選んでいきます。

私はとりあえず個人的に見やすいと思ったダークテーマのMonokaiにしました。

コードとにらめっこをすることに飽きてきたら配色を変えるとやる気が出るかもしれません。たまにRedにしたりとかします笑

少しでも自分の好きな環境に整えていくだけでテンションがあがってやる気がでたりしますね。

VS CODEの便利な基本設定

CODE → 基本設定 ▶︎ 設定（command + , ）で基本設定ができます。

よく使用するものの項目の一番上にある、File: Auto SaveをafterDelayにすると自動でコードが保存されるので楽です。

Editor:Word Wrapをonにするとエディタ上で行が折り返されるので狭い画面でも横スクロールしなくてすみます。

次にVS CODEを快適に使うために、拡張機能を入れていきます。

画面の左側のアクティビティーバーの一番下のアイコンをクリックして拡張機能を追加する欄に入力していきます。

VS CODEの便利な拡張機能一覧

それでは、上記のプラグインについてみていきたいと思います。

「Japanese Language Pack for Visual Studio Code」は、日本語に設定するプラグインなので、日本人なら必須級のプラグインです(英語ペラペラの方を除きます)。

「Live Server」は、開発用のWebサーバーで、コードを書いていくと自動でWebページに反映してくれます。

「Auto Rename Tag」は、閉じタグも一緒に変換してくれるので書き間違えをなくすことができます。

VS CODEの便利なショートカットキー

選択している行をコメント化させます（ブラウザに表示させなくします）。もう一回押すと解除することができます。

コメントを書きながら記述すると、コードが何を表しているのか見やすくなり覚えやすいので使えます。

コメントしたものは、Webブラウザ上では表示されませんが、Chrome検証ツールなどで見ることができるので書き方などに注意しましょう。

行をそのまま移動させることができます。

行をそのままコピーして移動させることができます。

行の削除

同じ箇所を全て選択

cssのクラス名をPCとSP用など複数指定した時に一度で変換できるので便利です。

エディタのサイドバーの開閉ができます。

画面が小さいときにコードが長いと見づらいので、少しでも画面を大きく使いたいときに便利です。

commandと-で文字が小さくなり、

commandとshiftキーと-（commandとshiftキーと+ ）で文字が大きくなります。

たまにタイプミスなどにより文字が小さくなってしまう時に覚えておくと便利ですね。

VS CODEで使えるテクニック

CSSやJSなどのファイル名の上にホバー（カーソルをのっける）してcommand + クリックでファイルがない場合でも、新しくファイルを作ることができます。

まとめ

VS CODEなどのエディタを使いこなすことによって、時短になりプログラミングをサクサクとこなせるようになりますね。

拡張機能や設定を自分好みにカスタマイズして、サクサクをWebページを作っていきましょう。