.net column
.NET開発者のためのブログメディア

VisualStudioCodeとは?|VisualStudioCodeを使いこなして作業効率を上げよう!

 
VisualStudioCodeとは?|VisualStudioCodeを使いこなして作業効率を上げよう!
SE
VisualStudioCodeについて詳しく教えていただけませんか。
PM
分かりました。それでは、VisualStudioCodeの使い方についてご説明いたしましょう。

Visual Studio Codeとは?


Visual Studio Codeとは、プログラム開発用につくられた高機能なエディタのことです。エンジニアの間では「VS Code(ブイエスコード)」とも言われています。

Visual Studio Codeの特徴は?

Visual Studio CodeはMicrosoftが無償で提供しています。対応しているOSは、WindowsOS、macOS、LinaxOSです。

初心者に優しい機能を備えていて、拡張機能が豊富です。初心者から上級者までのあらゆるエンジニアにとって、使いやすいエディタだと言えるでしょう。

しかしながら、機能が豊富過ぎて使い方がわからないという方も多いのではないでしょうか。この記事では、Visual Studio Codeの使い方について解説していきます。

Visual Studio Codeの起動方法

Visual Studio Codeの起動方法には、二つの方法があります。

一つは、スタートメニューまたはスタート画面でVisual Studio Codeのアイコンをクリックする方法です。二つ目は、コマンドプロンプトやPowerShellで「code」と入力してEnterを押す方法です。

WindowsOSの場合、コマンドプロンプトやPowerShellで起動できないようであれば、PATH設定を確認しましょう。

日本語対応方法(拡張機能)

Visual Studio Codeをインストールすると、最初は英語表示になっています。日本語表示にしたいという方は、日本語対応パッケージをインストールしてみましょう。

画面上部にメニューバーがあります。そのメニューバーから「View」→「Extensions」の順でクリックします。

すると、画面左上部に「Serch Extensions ・・」と表示されます。その検索ボックスに「Japanese」と入力して、以下の名前のパッケージを探してください。

Japanese Language Pack for Visual Studio Code
これが日本語対応のパッケージです。

「install」を押してインストールを完了させましょう。画面右下にリスタートを要求するメッセージが出てきますので、リスタートします。日本語パッケージが反映されて、日本語インターフェイス画面が表示されたら完了です。

以上、拡張機能(Extensions)を使用した日本語パッケージのインストールについて説明しました。Visual Studio Codeは、この拡張機能がとても便利です。拡張機能の使い方は是非覚えましょう。

コードの入力補助機能(インテリセンス)

VisualStudioCodeには、ソースコード補完機能(インテリセンス)があります。先頭文字を入力すると、入力候補を表示してくれる機能です。

また、入力を続けていくとフィルター機能が働き、入力候補が減っていきます。入力候補を絞るのに役立ちます。

関数を入力する時に、引数の型や戻り値についての情報を表示するのもインテリセンス機能の一つです。

既にインテリセンス機能を備えている言語もありますが、言語拡張機能を取り入れることで更に豊富なインテリセンス機能を使用することが可能です。

インデントの整形機能(フォーマッティング)

Visual Studio Codeには、ソースコードのインデントを整形してくれるフォーマット機能があります。例として、以下のJavaScriptのコードを見てください。

【フォーマッター使用前】

上記のように、ソースコードを書いているとインデントが不揃いになってしまう時があります。そうすると、ソースの解読が難しくなります。そんな時は、このフォーマット機能を使いましょう。

OS ショートカット
WindowsOS Shift + Alt + F
macOS Shift + Option + F(英字モードで)
Linux(Ubuntu) Ctrl + Shift + I

OSによってショートカットが違います。上の表を参考にしてください。

もし、フォーマット機能がインストールされていなければメッセージで教えてくれます。その際はフォーマット機能をインストールしてみましょう。

【フォーマッター使用後】

インデントがきれいに入って、見やすくなりました。

テキストの矩形選択の方法

プログラムのコードを書いていると、テキストを矩形選択したい時があるのではないでしょうか。矩形選択の方法には、「マウス」を使った方法と、「キーボード」を使った方法があります。それぞれの方法について見てみましょう。

「マウス」を使った矩形選択

マウスを使って矩形選択する方法は、以下の表を参考にしてください。ポイントは、基本的な使い方はどのOSも同じということです。二つのキーを押し続けている状態であれば、矩形選択の範囲を変更することも可能です。

OS 方法
WindowsOS 始点をクリック後、Shift + Altを押しながら範囲選択して左クリック
macOS 始点をクリック後、Shift + Optionを押しながら範囲選択して左クリック
Linux(Ubuntu) 始点をクリック後、Shift + Altを押しながら範囲選択して左クリック

「キーボード」を使った矩形選択

キーボードを使って矩形選択する方法は、以下の表を参考にしてください。キーボードを使う場合は、三つのキーを同時に押しながら選択していきます。「矢印キーで範囲選択」の部分は、PageUpキーまたはPageDownキーでも可能です。

OS 方法
WindowsOS Ctrl + Shift + Altを押しながら矢印キーで範囲選択
macOS Shift + Option + Commandを押しながら矢印キーで範囲選択
Linux(Ubuntu) 既定での設定はなし

Linux(Ubuntu版)の場合は、矩形選択のキーバインド設定がされていません。Linux(Ubuntu版)で、キーボードを使用して矩形選択したい場合は、キーバインド設定しましょう。

矩形選択する際の、マウスとキーボードの使い方は理解できましたか。Visual Studio Codeで、矩形選択の方法をマスターしてコーディング効率を上げていきましょう。

対応する括弧に色付け(拡張機能)

コードが長くなってくると、入れ子に入れ子が重なって複雑になっていきます。この括弧はどの括弧に対応しているのか、わからなくなることも多くあります。そのような時に、対応する括弧がどこにあるのかわかるようにしてくれる機能があると便利です。

Visual Studio Codeの拡張機能には、対応する括弧を色付けしてくれる機能があります。日本語パッケージをインストールした時と同様に、拡張機能の検索ボックスで以下の名前を検索してください。

Bracket Pair Colorizer2
「install」を押してインストールを完了します。

早速、ソースコードを開いてみましょう。対応する括弧の色が同じになっています。また、対応する括弧と括弧が線で結ばれていてとても分かりやすくなります。

自分の好きな色に設定することもできます。
自分の好きなようにカスタマイズしたい場合は、設定してみましょう。

SE
Visual Studio Codeは日本語にも対応していて使いやすそうですね。
PM
VisualStudioCodeは初心者から上級者まで活用できますので、使い方をマスターして効率よくコーディングしてください。

Visual Studio Codeの使い方をマスターしよう!

Visual Studio Codeの使い方の一部を紹介しました。いかがでしたでしょうか。

Visual Studio Codeには、たくさんの便利機能があります。使い方をマスターして、効率よくコーディングしていきましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags