エンジニアのキャリア

Visual Studio Codeの使い方、おすすめ拡張機能の紹介

Vscode logo

今日は、フロントエンドエンジニア、webエンジニアにおすすめのテキストエディターである、Vscode(Visual Studio Code)を紹介します。

まだ使用した事がない方には、ぜひ試してもらえるように、なんとなくVscodeを使っている方には、実はこんなに便利な機能があるという事を伝えます。

Vscodeを使いこなし、開発の効率をあげ、快適なエンジニアライフを実現しましょう。

Vscodeとは何か?

マイクロソフトさんが開発しているテキストエディターです。快適にコードを書いていくためのツールです。ここで、コードをゴリゴリ書いていきます。

2020年現在、Webエンジニア、javascriptエンジニアの間で、最も人気のあるテキストエディターであり、僕もvscodeを使用しています。

まずはvscodeをインストール

インストールは簡単です。ここからインストールできます。

Vscodeの何がすごいのか?

なんと言っても拡張機能が豊富です。

マイクロソフトさんは、バージョン管理ツールであるgithubも買収したので、今後は、様々な機能が追加されて、Vscode上で、ほとんどのことができるようになるでしょう。実際、クロムデブツール上で行うでバグとかも、Vscode上で行うことができます。

これだけは覚えておきたいキーボードショートカット

Vscodeには膨大なショートカットが用意されています。もちろん多くのショートカットを覚えていれば、それだけ開発も捗るでしょう。とはいえ、一度に覚えるのはきついので、まずは、以下に挙げる、使いまくるショートカットをマスターしてください。

ちなみに、Cmd/Ctrlは、MacならCmd(Command)を、WindowsならCtrl(Control)キーを押してくださいという意味です。

アクション ショートカット
サイドバーの開閉 Cmd/Ctrl + B
コマンドパレットを開く Cmd/Ctrl + Shift + P
ファイルスイッチャーオープン Cmd/Ctrl + P
一つ前のファイルに戻る Cmd/Ctrl + P + P
ターミナルを開く Ctrl + `
設定を開く Cmd/Ctrl + ,

ここで一つ注意点ですが、Vscodeは、マイクロソフトさんが、ものすごい勢いで日々製品の向上に取り組んでいますので、ちょいちょいショートカットコマンドが変更されます。「あれ?ショートカット効かなくなった、、」というときには、画面左上に表示されるメニューをクリックしてみて、ショートカットを確認してみてください。

マルチプルカーソル(複数のカーソル)を使いこなす

マルチプルカーソルは、とても便利な機能で、僕は毎日使います。しかし、意外に知らない人も多いので、紹介しておきます。ぜひ、使いこなしてください。

例えば、「複数の変数名を同時に変更したい」というような場合がありますよね?

以下のコードを例に説明します。

let formInput = document.getElementById("formInput");

const formValue = formInput.value;

console.log("formValue;", formValue);

 

例として、変数formInputをformElementに変更したいとします。

formInputをカーソルで選択肢し、command + D を押していくと、一つづつ選択することができます。全て選択肢したのちに、同時に変更することができます。

ここでよくある問題として、同じ名前だけど参照しているものが違うことがあります。ここでは、document.getElementById(“formInput”);の”formInput” id です。これを変更すると、おそらく他のhtmlファイルにあるであろう、idも変更する必要が出てきます。こういうときには、変更したくないコードの箇所でcommand + Kを押せば、スキップすることができます。

マルチカーソル使用例マルチカーソル使用例

command + D を押していくと、全てのformInputが選択されていますが、二個目のformInputのみカーソルが当たっていません。(command + Kでスキップしたので)

ターミナルからcode.でVscodeが開かないとき

いちいちvscodeのアプリケーションアイコンをクリックしたり、Macで「command + shift」から「Visual Studio …」とタイプして起動するのは面倒です。自分の開きたいプロジェクトを直接ターミナルからvscodeで開けるように、code.コマンドを使えるようにしておきましょう。

手順です。

  1. 最初は、普通にアイコンクリックでもなんでもいいので、Vscodeを起動する。
  2. Vscode上で「command  + shift + p」 で検索ウインドウ(コマンドパレット)を表示して、「path」と入力。
  3. 候補に出てくる「Shell command: Install `code` command in PATH」をクリックすれば完了です。

IconsやThemeもたくさんあって楽しい

エディターのアイコンやTheme(テーマ)も豊富に揃っています。

僕のお気に入りを紹介しておきます。

  • Material Icon Theme
  • Night OwlのNight Owl Light

最近は、ダークシームが流行っていますが、僕はどこかの論文で、「ホワイト系のバックグラウンドにダーク系の文字の組み合わせの方が、人間は読みやすく仕事の効率が上がる」という研究結果を読んで以来、light系のThemeを使っています。

夜には目のためにダーク系のThemeが良いとされますが、夜はスクリーンを眺めないのが一番でしょう!

海外で流行っているプログラミング用のフォントを設定する

デフォルトのフォントではなくて、自分のお気に入りのフォントでコードを書くことは、僕にとって、かなり大切です。一日の多くの時間、そのフォントを眺めているわけで、自分の好きなもの、自分が綺麗だと思える物をみている方が気持ちがいいでしょう。

さて、「Font Ligature」という言葉を聞いたことがりますか?

Font Ligatureとは、複数の文字をつなげて書いた文字のことです。プログラミングでは特に、記号の書き方に違いが出てきます。例をあげると、

Font ligaturesの例Font ligaturesの例

フォントには上記の「Font Ligature」をサポートしたものとそうでないものがあります。

「Font Ligature」をサポートした無料のフォント「FIra Code」はここでダウンロードできます。

設定方法は簡単です。

  1. まずはフォントをダウンロードする。
  2. Macの「Command + space」 で、Spotlight検索を起動し、Font Bookと入力。
  3. Font Bookを開いたら、ダウンロードしたフォントをドラッグ&ドロップ

VScodeでも少し設定が必要です。

  1. Cmd/Ctrl + ,」で、設定を開く。 
  2. Font Family に自分の設定したフォント名を入力。
  3. Font Ligatures をtrueにする。
VscodeでFont Familyを設定
VscodeでFont Ligaturesを有効にするVscodeでFont Ligaturesを有効にする

 

minimapはオフにしておく

minimapとは、エディターの右端に見えているあれです。コードらしきものは見えますが、小さすぎて、コードは読めません。使い道がないので、少しでもスクリーンを有効活用できるようにオフしておきましょう。

手順;

  1. Cmd/Ctrl + ,」で、設定を開く。 
  2. minimapのチェックを外すだけ。
minimapはオフにしておくminimapはオフにしておく

サイドバーは右側に変更

サイドバーはデフォルトでは、左端に配置しておりますが、僕は右側に配置しています。

その理由は、1日に何度も開いたり閉じたりするので、その際に、毎回コードの開始位置がサイドバーの幅の分だけ右にジャンプします。これが嫌で、目が疲れるので右端に変更しています。

変更するのは、簡単です。

  1. Cmd/Ctrl + Shift + P でコマンドパレットを開く
  2. Toggle Side Bar positionを選択するだけ。

サイドバーとファイルの間を素早く移動するショートカット

みなさん、毎日何度もこの操作ををしているでしょう。コードの編集をして、え〜とあのファイルはどこかな、フォルダをクリックして、ファイルをクリックしてオープンという感じで。これをマウスではなく、キーボードショートカットでやれば爆速ですので、是非覚えてください。早く覚えるほど、特ですよ。

  1. command+B」サイドバーをオープン
  2. command+0(zero)」でカーソルをサイドバーに移動
  3. 開きたいファイルの上で、「command+⬇︎(アローダウンキー)」でファイルをオープン。

TypeScriptを導入していないプロジェクトでもTypeScriptの恩恵をえられる

JavaScriptを書いている方にとって大きな機能の一つが、TypeScriptを採用していないプロジェクトでもvscodeの機能により、タイプチェックをすることができます。これは素晴らしい!!!

設定方法

とても簡単です。

設定を開き、「check js」で検索をかけ、以下の JavaScript › Implicit Project Config: Check JS にチェックを入れるだけです。

Vscode上でのTypeScript有効化Vscode上でのTypeScript有効化

 

リンターより何が優れているのか?

通常のプロジェクトでは少なくとも何かしらのリンターを入れていると思います。以下、画像のプロジェクトでは、eslintを使っています。

eslintのみでもタイポなどがあれば教えてくれますが、TypeScript はもう一歩踏み込んでタイプチェックしてくれます。

二行目が、eslintによるチェック結果。三行目が、TypeScriptによるチェック結果です。TypeScriptだと、正しいと思われる候補も提示してくれます。

ナイス!

eslintとTypeScriptによるチェック比較eslintとTypeScriptによるチェック比較

Vscodeを体系的に学びたい方におすすめのオンラインコース

 このような便利なツールは、早めに身につけておいた方が特です。体系的に、学びたい方にはMastering Visual Studio Code をおすすめします。英語ですが、拒絶反応を出さないでください。いつも言ってますが、エンジニアならば英語に慣れておく必要があります。このコースでは、JavaScriptやNode.jsでの開発環境の他に、Phyton, JAVA, C++, C#などにも触れています。その言語を扱わない方は、そのセクションはスキップしましょう。

それでは、便利なツールであるvscodeの使い方を身につけて、早いとこ快適な開発環境を構築しておきましょう。

 

ABOUT ME
Wata
Wata
30歳で営業職からエンジニアに転職した者のブログです。 大手海運業→総合商社→ソフトウエアエンジン。現在は、オーストラリアにてエンジニアとして働いています。 未経験からのエンジニアへの転職、フロントエンド周りの技術、エンジニアの仕事環境、趣味の旅行、JAL修行、オーストラリアの情報などを発信しています!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です