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

学習中のカメ

プログラミングのコードを書くときに使うエディタって何がいいんだろう?
自分の気に入ったエディタを使えば良いと思うけど、VS CODEが個人的には使いやすいと思うよ

学び続けるウサギ

学習中のカメ

よ〜し、早速VS CODEを使っていくぞ〜

プログラミングで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

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

Editor:Word Wrap

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

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

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

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

  1. Japanese Language Pack for Visual Studio Code
  2. Live Server
  3. Auto Rename Tag

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

Japanese Language Pack for Visual Studio Code

Expansion

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

Live Server

Expansion

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

Auto Rename Tag

Expansion

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

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

コードを記述するときに役立つショートカットキー

command + /

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

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

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

option + ↑(↓)

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

shift + option + ↑(↓)

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

command + Shift + K

行の削除

command + shift + L

同じ箇所を全て選択

 

エディタ画面で役に立つショートカットキー

Command + B

エディタのサイドバーの開閉ができます。画面が小さいときにコードが長いと見づらいので、少しでも画面を大きく使いたいときに便利です。

VS CODEで使えるテクニック

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。