# 環境構築 - Visual Studio Code

###### tags: `note`

## VSCodeとは

Visual Studio Code (以下"VSCode"とする) とは、Windows OSや.NET Framerorkの開発元であるMicrosoft社が開発したオープンソースのテキストエディタです。
有志によって多くの拡張機能が開発されており、使用者のニーズにあった開発環境を構築することができることや、標準でGitクライアントの機能があることなどから人気を博しています。

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"Sublime Text","geo":"JP","time":"today 12-m"},{"keyword":"/m/0134xwrk","geo":"JP","time":"today 12-m"},{"keyword":"Vim","geo":"JP","time":"today 12-m"},{"keyword":"Emacs","geo":"JP","time":"today 12-m"},{"keyword":"Atom","geo":"JP","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"geo=JP&q=Sublime%20Text,%2Fm%2F0134xwrk,Vim,Emacs,Atom&date=today 12-m,today 12-m,today 12-m,today 12-m,today 12-m","guestPath":"https://trends.google.co.jp:443/trends/embed/"}); </script>

他のエディタとの比較は下記が参考になります。

参考：[なぜ、VSCodeを使うのか？ - Qiita](https://qiita.com/lldev2/items/46d55f71bdc1af2e3b10)

## VSCodeの特徴
下記のような特徴が挙げられます。

* クロスプラットフォーム
* 軽量／高速
* [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)による入力補完機構
* デバッグ機能を内蔵
* 標準で[多数の言語](https://code.visualstudio.com/docs/languages/overview)をサポート
* [Visual Studio Marketplace](https://marketplace.visualstudio.com/)の拡張機能によるVS Code自体の機能や操作性の向上

## インストール

1. [Visual Studio Code のダウンロード ページ](https://code.visualstudio.com/Download)にアクセスします。
2. Windows、Linux、Macから該当するOSのインストーラーをダウンロードします。
3. インストーラーをダブルクリックして、インストールを開始します。

### インストールの開始

インストールを開始します。「次へ」をクリックしてください。


### 規約の同意

目を通したうえで問題なければ「同意する」を選択し、「次へ」をクリックしてください。


### インストール先の指定
VSCodeのインストール先をお好みのフォルダに変更し、「次へ」をクリックしてください。


### ショートカット名の指定
そのままで問題ないかと思います。「次へ」をクリックしてください。


### ユーティリティの追加

デスクトップ上にアイコンを作成したい場合チェックを入れましょう。
その他は必要ないかと思います。コマンドから実行したい場合、PATHへの追加にチェックを入れましょう。


### インストールの実行
内容を確認し、問題なければ「インストール」をクリックしてください。


### 完了
下記のような画面が出たら完了です。


## 簡単な使用方法

### フォルダを開く
Explorerアイコンを選択した上で、「Open Folder」からフォルダを開きます。


### ファイルを作成する

Pythonのコードは、拡張子「.py」のファイルに記述するのが一般的です。
「.py」形式で作成すると、VSCodeにPythonファイルとして認識され、ファイル名の左側にPythonのマークが表示されます。


### ファイルを保存する

未保存の状態だと、「●」マークが表示されます。「`Ctrl` + `S`」で保存することができます。


### ターミナルを開き実行

「`Ctrl` + `Shift` + `` ` ``」で新規のターミナルを開くことができます。
ターミナルを開いた後、下記のように指定することで、作成したスクリプトを実行することができます。

> python {スクリプトのパス}.py


## 拡張機能の導入
拡張機能とは、VSCodeが単体ではサポートしていない機能を後から付け加えるためのものです。
VSCodeのユーザーは既存の拡張機能をインストールして利用することも、自分で拡張機能を作成（して、それを公開）することもできます。

VS CodeのビューバーでExtensionsアイコンをクリックするとサイドバーの表示がExtensionsアイコンに切り替わります。

「Install」ボタンから各種拡張機能をインストールすることができます。


### オススメの拡張機能
#### [Anaconda Extension Pack](https://marketplace.visualstudio.com/items?itemName=ms-python.anaconda-extension-pack)

下記の2つが同梱されている。
シンタックスハイライトや使用環境の表示など、Pythonを利用する上で便利な機能が追加されます。

- [Microsoft Python Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
- [YAML Support by Red Hat](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)

#### [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)
アイコンが表示され見やすくなります。

#### []()

#### [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
VSCodeのナビゲーションバー等を日本語に変換してくれます。

**導入方法**
1. Extensionsアイコンから、[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)をインストール
2. `Ctrl`+`Shift`+`P` を押してコマンドパレットを表示させ、`config` と入力し、利用できるコマンドのリストをフィルター処理してから `Configure Language` コマンドを選択します。
5. `locale.json` 内で `"locale": "ja" `を設定します。

## ファイルベースでPythonスクリプトを作成・実行するフロー

※ このフローは[Microsoft Python Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-python.python)が導入されている必要があります。 [Anaconda Extension Pack](https://marketplace.visualstudio.com/items?itemName=ms-python.anaconda-extension-pack)を導入すれば同梱されているため問題ありません。

### 0. VSCode上で使用するPythonの確認

`Ctrl`+`Shift`+`P` を押してコマンドパレットを表示させ、「`python select interpreter`」と入力・選択し、AnacondaのPythonが指定されていることを確認します。


指定されていない場合、「`Enter Interpreter path...`」からAnacondaのPythonを指定します。

### 1. スクリプトを作成

右上のウィンドウでスクリプトを作成します。
作成が完了したら`Ctrl` + `S`で保存することを忘れないようにしましょう。

### 2-1. スクリプトを実行（ファイルごと）
右上のウィンドウで右クリックから「`Run Python File in Terminal`」をクリックすると、
編集したPythonスクリプトがターミナル上で実行されます。


### 2-2. スクリプトを実行（1行ごと）

右上のウィンドウで実行したい行にカーソルを置き、`Shift` + `Enter` を入力するとターミナル上でPythonインタプリタが起動してカーソルが置かれた行が実行されます。


## ショートカット

個人的によく使うショートカットです。

| コマンド | 説明 |
| -------- | ---- |
| Ctrl+Shift+X | 拡張機能を表示 |