初めてVScodeを導入して作業をしたときの感想及び覚書

はじめに

今回6週間でチームビルディングからプロダクト公開までやるプロジェクトに参加させて頂きました。
プロジェクト全体に関しては以下のリンクでまとめておりますのでそちらを御覧ください。
私についてはその記事や過去記事等ご覧になっていただければと思いますが、端的に言うと未経験でエンジニアを目指して就職活動をしているものです。

プロジェクトについてはこちら

この記事ではこのプロジェクトでVScodeを初めて使ったのでそれについてまとめたものになります。
私はこれまでSublimeText3を使っていたのでそこからの移行ということになります。

VScodeって何？

一言でいうならエディターソフト、つまり何かを書くために使うものになります。
テキストエディタなんかは聞いたことあると思うのですが、VScodeはよりプログラムのコーディング用途に特化させたエディタソフトだと思ってください。

SublimeText3との違いは？

これは色々あると思うのでGoogle先生に「SublimeText3 Vscode 違い」と聞いていただくと諸先輩方が熱く語っていると思うのでそちらのが参考になります。
私が大きく感じた違いはターミナル(コマンドプロンプト)が付属していることと、複雑に見えて以外に直感的に使えることの2点です。
特に前者については開いているディレクトリからちょくにターミナルを起動できるので、いちいちコマンドプロンプトを立ち上げていて実行ディレクトリに移動して……という作業がなくなって随分楽になりました
日本語化や拡張機能の導入な喉もVScodeのがやりやすいと思います。

今回の記事でやること

• VScodeを導入
• 日本語化
• 拡張機能の探し方
• 基本的な機能の使い方
• Windows + Python + PipEnv + Visual Studio CodeによるDjango開発の環境構築

VScodeの導入

公式サイト からインストールしてください。
なお、Windowsの方で導入がまだの人はGit for Windowsも一緒にインストールしておきましょう。
Git for Windows

インストールをしたらコマンドプロンプトを起動してPATHを確認してください。
インストールするときにはPATHを追加するという設定を忘れずにチェックしてください。
通っていれば下記のコードでそれぞれのバーションが表示されます。
通っていなかったらWindowsの場合はWinキー＋Pauseキーからシステムの詳細設定を開いてそこから環境変数設定へ飛べるのでそこで設定をしましょう。

$ code -v

$ git --version

拡張機能の探し方と日本語化

導入が終わったら日本語化を行いましょう、英語に強い人ならやらなくても大丈夫です。
まずはVScodeを開き、この部分をクリックします。
すると、画像のように拡張機能を検索できるフィールドが出てくるのでここから色々検索して導入していくことができます。
ここでは日本語化をしたいということなので「Japanese Language Pack」と検索してみてそれを導入してください。
導入が終わってVScodeを再起動すれば日本語化は完了です。

機能紹介

インテリセンス

これはVScodeに限らず、コーディング用のエディターならどれでも標準的に備わっている機能ですね。
コードやメソッドを補完してくれたり、変数の型やパラメータの情報の可視化などをしてくれます。

ユーザースニペット

定型文を呼び出せるような機能です。
例えば以下の画像のようにmoと打つと予測変換のようなものが表れて候補が表示されます。
ここで一番上のModelを選択すると、画像右に表示されているようなDjangoにおけるモデルクラスの定型文を呼び出せる……といったような機能です。
拡張機能から各言語やフレームワーク毎に導入できる他、画像のように自分で作成することもできます。
Ctrl+Shift+Pで画像のようなコマンドパレットを呼び出して、snippetと打ち込めば出てきます。
スニペットの記述はJsonファイルに行うので、詳しいやり方は参考記事から御覧ください。

Gitの管理

Gitは本来ならばターミナルでコマンドを打ち込んで行うものですがVScodeではその必要がなくなります。
画像のようにGitのアイコンをクリックするとソース管理の画面が現れてここからステージングやコミット、プッシュなどなどGitに関わる機能や処理を扱うことができるようになります。
これはすごく便利でした、どのファイルがステージング待ちなのかが一目瞭然になり、ステージングも可視化されますし、コミットも-mコマンドいちいちつけてなんてことしなくても良くなるので。
ここに関係する拡張機能としてGit LensとGit Historyがあります。
これらはVScode上でブランチツリーを表示してコミットのログを確認したり、ファイルの差分をわかりやすく表示してくれる機能があるのですることができるので入れておくとよりGitが使いやすくなると思います。

デバックの実行

デバックしたいファイルを開いて画像のアイコンを押すとデバックができます。
Djangoだとデバックでエラーが検出されないのであればそのままrunserverへと移行したりします。
とりあえずコード書いてエラー出ないかな？ というのを気軽に確認することができます。
カスタマイズするにはlaunch.jsonファイルを作成しなければいけませんが今回は私の理解が足りてないので割愛です。
詳しくは環境構築の項目で

その他、拡張機能を入れているとサイドバーにアイコンが追加されて機能を使えたりします。
画像はGitLensの例です。

Windows + Python + PipEnv + Visual Studio CodeによるDjango開発の環境構築

あらかた基本的なことを押さえた上で環境構築を始めていきます。
なおこの環境はプロジェクトで実際に使った環境になります。

鍵となるのはPipEnvというツールになります。
では進めて行きましょう。

PythonとPipEnvの導入

兎にも角にもこの2つをインストールしないと始まりません。
まず、公式サイト から任意のバージョンのPythonをインストールしましょう。
OSやOSのバージョンでインストールするバージョンが違うので確認してからインストールしてください。
インストールの際にセットアップ画面でpipのインストールとPATH追加をするか聞かれるので忘れずに行ってください。
インストールが終わったら

pip install pipenv

このコマンドでpipenvをインストールします。

ワークスペースの設定

VScode側でプロジェクトのフォルダをファイルからフォルダをワークスペースに保存の項目を選択し、ワークスペースに保存します。
その後ctrl＋,キーを打ち、画像のような画面になったら青矢印の部分のようにプロジェクトのフォルダの項目を選択した状態で赤矢印のアイコンを押します。
するとルートディレクトリ.vscode/setting.jsonが出来上がるのでそこに設定を記述していきます。
なお、これは1つのフォルダをワークスペースとして定義する場合の手法のようです。
別の方法としては複数フォルダを1つのワークスペースで管理するマルチルートワークスペースで作ってしまう方法があります。
ちなみに設定の優先度はマルチルートワークスペースが1番上位となります。
手順としては

1. 現在利用中のワークスペースを閉じる
2. ［ファイル］ー［名前をつけてワークスペースを保存］を選択
3. プロジェクトフォルダの名前.code-workspaceの形で保存をする
4. ［ファイル］ー［ワークスペースを開く］を選択し、作成したばかりのワークスペースファイルを指定し［開く］ボタンをクリック

という手順になります。
先程の.vscode/setting.jsonに当たるファイルがプロジェクトフォルダの名前.code-workspaceになりますのでそちらに設定を書いていくことになります。
なお、この場合でも別にマルチルートワークスペースとして使わなくていいというのであれば、.vscode/setting.jsonだけ編集すればそれで問題みたいです。
要は複数のプロジェクトフォルダを1つのワークスペースで管理をするかしないかの違いだということみたいです。
ワークスペースの設定はVScodeでの作業で必ず行わないといけないですが、割とややこしいです。
私自身最初にやろうとしたときに全然わからなかったですし、今もまだ細かい設定に関しては理解が浅いです。
幸い、参考記事に挙げてある記事を含め先人たちが設定を公開してくださっているのでそちらを是非参考にしていただければと思います。

今回は.vscode/setting.jsonの設定を試しに見てみます。
ここには例えば以下のように様々な設定を記述します。

{
    // 仮想環境のパスを指定してください
    "python.venvPath": "{$workspaceFolder}/.venv",
    "python.autoComplete.extraPaths": [
        "{$workspaceFolder}/.venv/Lib/site-packages",
    ],

    // :以下にPythonのパスを指定します。
    "python.pythonPath": ,
    // ターミナルの仕様をコマンドプロンプトに固定します。
    "terminal.integrated.shell.windows": "C:/WINDOWS/System32/cmd.exe"
}

仮想環境のパスは

pipenv --venv

このコマンド打てば出てきます。。
特殊な設定をしていなければ
C:\Users\username\.virtualenvs\フォルダ名-XXXXXXXX
またはset PIPENV_VENV_IN_PROJECT=trueにしている場合は
{ワークスペースのフォルダ\.venv}

といったようにパスが出ます。
それが仮想環境のパスになります。
ここまでの過程だと仮想環境にあるPythonのパスは仮想環境のパス\Scripts\python.exeとなるはずです。
ちなみに仮想環境内のpython関係のパスを見るには

 pipenv shell
 python
 import sys
 sys.path

と上記の順でコードを打つと一覧で出てきます。
その他の設定等は参考記事などを参照してください。

pipenvで仮想環境を用意する

実はPipEnvでの環境構築のやり方は大きく分けて2つあります。
1つは自分で1から構築する方法ともう1つは他人が用意した環境を再現する方法です。
今回はチームでの開発でしたので、設計担当の方が用意した環境を再現するやり方でやりましたがここでは後学のために1からやるやり方も見てみようと思います。

まずは1から環境構築していくやり方です。
といってもやることは

# プロジェクトのディレクトリに仮想環境を構築する
set PIPENV_VENV_IN_PROJECT=true

# versionの部分にはPythonのバージョンを書いてください
pipenv --python version

とプロジェクトのディレクトリでコマンドを打つだけです。
仮想環境は上記の工程を踏まないとC:\Users\username\.virtualenvs\フォルダ名-XXXXXXXXに作成されます。
これだと管理上手間があるので、なるべくプロジェクトの配下に置くことが推奨されてるみたいです。
ちなみに私は今回のプロジェクトでは理解が浅かったのでこの設定を飛ばしていました。
Pythonのバージョンは先程インストールしたPythonのバージョンを指定するのですが、仮に入ってないバージョンを指定するとPipEnvがそのバージョンのPythonを自動でインストールします。
このコマンドを打つと、プロジェクトのディレクトリにPipfileとファイルができます。
このPipfileがPipEnvにおける環境構築の肝になるもので、コマンドを打った直後のこのファイルを見てみましょう。

[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]

[requires]
python_version = "3.8"

注目するところはdev-packages、packages、requiresの3つの部分です。
dev-packagesでは開発環境でのみ使うライブラリを指定します。
packagesは本番環境でも使用するライブラリを指定します。
requiresはこのプロジェクト(アプリケーション)で要求されるPythonのバージョンの指定です。
この部分は必要がなければ削除して問題ありません。
実際のPipfileは例えば以下のようになっています。

[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]
flake8 = "*"
mypy = "*"

[packages]
django = "==2.2"
django-bootstrap4 = "*"
pandas = "*"
click = "*"
numpy = "*"
importlib-metadata = "*"
bs4 = "*"
requests = "*"
django-allauth = "*"
lxml = "*"

[scripts]
start = "python manage.py runserver"
manage = "python manage.py"

パッケージのインストールはpipenv install ~の形で行います。
dev-packagesに追加したければ--devオプションをつけましょう。
scriptPipEnv上で独自のコマンドを定義できる場所です。詳しくは後ほど。

次に既存のPipfileから環境を再現する方法です。
といってもこれも難しいことはなく

pipenv install

# dev-packagesも含めて再現する場合はこちら
pipenv install --dev

とコマンドを打つだけです。
ちなみにPipEnvライブラリをインストールするとPipfile.lockというファイルが作成されます。
こちらは各ライブラリのバージョンについてさらに詳細に定義したファイルでPipfileの状態よりさらに厳密に環境を再現したい場合はこちらのファイルを使います。
その場合は

pipenv sync

# dev-packagesも含めて再現する場合はこちら
pipenv sync --dev

とコマンドを打ちます。

ライブラリやパッケージのインストール

ここまでおおよその準備はできたのであとはDjangoを入れていきましょう。
その前にここで拡張機能でPythonのアドインを入れておきましょう。
拡張機能のアイコンからpythonと検索して一番最初に出てくるやるをインストールしておいてください。

あとはライブラリやパッケージのインストールを行います。
Pipfileで先に定義をしておいて一気にpipenv installのコマンドで入れてもいいですし、個別にpipenv install djangoといった形でインストールしても大丈夫です。
ともあれとりあえずDjangoをインストールできたらpipenv shellコマンドのあとにpip listコマンドを実行して、正常にインストールが完了できたか確認をしてみてください。

Djangoのrunserverまで

Djangoのインストールが終わったらあとは一気にrunseverまでやっていきましょう。
まず[表示]からコマンドパレットを開いて以下のような状態になることを確認してください。

そうするとインタープリター(今回はPython)を選択という項目があるのでそこをクリックすると、以下のように仮想環境の一覧がありますので先程作った仮想環境を選択してください。

すると以下のように仮想環境の情報が出るはずです。これで仮想環境が出来上がりました。

あとはDjangoのプロジェクトをstartprojectコマンドで作ってrunserverをすればいいのですが今回はコマンドではなく、デバックアイコンから試してみます。
デバックアイコンをクリックしてlaunch.jsonファイルを作成しますの部分をクリックします。

するとコマンドパレットが出てくるのでPythonを選択すると、今度はDjangoの項目が出てくると思うのでそれを選択します。
そうすると画像のような状態になるので緑三角のボダンをクリックしてください。
ここで特に問題がなければrunserver完了です。任意のローカルアドレスでロケットのページを見に行きましょう。
仮想環境の構築はこれにて完了です、お疲れさまでした。

Tips(仮想環境関連の操作)

PipEnvでの操作についての覚書です。

# 仮想環境に入る

pipenv shell

# 仮想環境のパスを表示する

pipenv --venv

# 仮想環境の場所を設定する

export WORKON_HOME=~/venvs # Windowsではset WORKON_HOME=~/venvs
pipenv --python

# プロジェクトのディレクトリに仮想環境を作成する

set PIPENV_VENV_IN_PROJECT=true`
pipenv --python

# 仮想環境の削除

pipenv --rm

# パッケージのバージョンを指定してインストール

pipenv install django = "==2.2" # 指定しないときはdjango = "*"とする

# 仮想環境内にGitHubのリポジトリをインストールする
# リビジョンはGithubのtagsから確認、そのパッケージのバージョンのようなものです

pipenv install git+https://github.com/<ユーザ>/<リポジトリ>.git@<リビジョン>#egg=<パッケージ名>

# パッケージのアップデート

pipenv update

# インストールされたパッケージを一覧表示する(依存関係もわかります)

pipenv graph

まとめ

ここまでどさーっと書いてきましたが大きく手順を整理すると

1. Python、VScodeの導入
2. 作業ディレクトリを作る理、そこにVScodeでのワークスペースの設定をする
3. PipEnvの導入・準備
4. 環境構築
5. Django導入

ということになります。
私の記事がそもそもわかりにくいという可能性は否めないのですが、環境構築はそもそも初学者の壁でもありますし、実際に参考記事を参照したり自分でググって調べてみても詰まることはままあります。
なので、今自分はどの手順の作業をしているのかというのを意識するようにするとどこで詰まっているのか、何がわからないのかというのが発見しやすくなると思います。
あと一つポイントとしては環境構築の部分であまり余計なことはしないというところです。
例えば今回の場合、参考記事のいくつかのパターンを見るにPipEnvによる環境構築をワークスペース内で行えれば.vscode/setting.jsonなどの設定はやらなくても一応はrunserverまで通る可能性があります。
なのでひとまずrunserverまで通してしまって、その後に.vscode/setting.jsonなどの設定の仕方や設定するとどうなるかということを一つずつ確認していくのがいいかと思います。
もし、仮にrunseverが通らなかったとしたらそれまでに必ずPythonが見つからないとかパスが見つからないなどなどエラーメッセージが出ると思います。
そうしたらじゃあ.vscode/setting.jsonなどで設定をしてみる……という流れで最初はいいと思います。
最初から凝ろうとすると沼にハマるのはよくあることですよね……

参考記事

VS CodeによるPython開発環境のテンプレ
Django を VSCode で 開発するまでの手順
Pipenvを使ったPython開発まとめ
Windows + Python + PipEnv + Visual Studio Code でPython開発環境
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》
VS Code の始め方2020 まとめ
Visual Studio Code 操作メモ
【python初学者向け】pipenvとVisual Studio Codeを使ってpython製Webフレームワークの開発環境を整える
多分これが一番簡単だと思います。 WindowsでPython仮想環境構築 2019年
Python仮想環境をVisual Studio Codeにセットアップする手順