DjangoでVS Codeを使う2つの方法。ローカル環境編。

VS Codeを用いて、ローカル環境でDjangoを開発する場合の環境設定を説明します。設定ではAnacondaを利用した場合と利用しない場合の2通りの方法を紹介します。リモート環境だけではなく、ローカル環境でもVS Codeを活用しましょう。

前の記事＜＜　　　　　＞＞次の記事

１．Anaconda利用の有無による使い勝手の違い

Anacondaを利用してVS Codeを使う場合、Anaconda Navigatorを立ち上げてからVS Codeを起動するため、VS Codeの起動に時間がかかります。ただ、Anaconda Navigatorで設定した仮想環境に入った状態でターミナルが起動しますし、それほど使い勝手は悪くありません。

Anaconda利用の有無による使い勝手の違いはこの程度ですので、Anacondaが好きか嫌いかで環境設定の方法を判断すればよいと思います。

２．インストールのフォルダ構成

この記事の説明で用いるローカル環境のフォルダ構成は以下の通りです。

/Users
 │
 └user_name     #ﾕｰｻﾞｰ名
   │
   └py_venvs       #仮想環境を集めたﾃﾞｨﾚｸﾄﾘ
     │
     ├py1       #仮想環境実行用ﾌｫﾙﾀﾞ-1
     │ └.venv1  #仮想環境設定ﾌｧｲﾙ（仮想環境名）
     └py2       #仮想環境実行用ﾌｫﾙﾀﾞ-2
       └.venv2  #仮想環境設定ﾌｧｲﾙ（仮想環境名）

３．Anacondaを利用しない方法

まず、Anacondaを利用しない方法から説明します。

(1) セキュリティーポリシーの変更

Anacondaを利用しない場合には、PwerShellによってWindows10のセキュリティーポリシーを変更する必要があります。

Windowsのスタートメニューから　Windows PwerShellを右クリックし管理者権限で開きます。そして、下記のコマンドを実行します。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

詳しくは、以下で説明されています。

実行ポリシーについて（英語の記事）

(2) Pythonのインストール

Pythonのインストール方法は以下Python Japanで方法が紹介されています。

Windows版Pythonのインストール

インストールを実行するとPythonのプログラムは以下のフォルダにインストールされます。Python38の「38」の部分はバージョンによって変わります。

C:\Users\user_name\AppData\Local\Programs\Python\Python38

なお、複数のバージョンのPythonを同居させる場合にはPythonの実行ファイルへのPathは設定しません。

(3) 仮想環境の構築とDjangoのインストール

例として「py1」というフォルダに「.venv1」という仮想環境名の仮想環境を構築します。

まず、コマンドプロンプトから仮想環境のフォルダに移動します。次に複数のPythonをインストールした場合は「python venv .venv1」ではなく「py -3.8 -m venv .venv1」により、Pythonのバージョンを指定します。ここで指定したバージョンのPythonが仮想環境で使用されます。なお、「py」はPythonランチャーとよばれるpy.exeを実行します。

仮想環境への切り替えではLinuxでは「source .venb1/bin/activate」あるいは「. .venb1/bin/activate」でしたが、windowsでは「.venv1\scripts\activate」となります。最初の「source」や「.」がないことに注意しましょう。

cd py1  #仮想環境のフォルダに移動
py -3.8 -m venv .venv1  #仮想環境の構築
.venv1\scripts\activate  #仮想環境への切り替え

仮想環境のインストール状況を確認し、pipをバージョンアップします。

python -V  #Pythonのバージョン確認
pip list  #インストールされたパッケージの確認
python -m pip install -U pip  #pipのアップデート

ここでは、matplotlibとdjangoをインストールしてみます。matplotlibは、2020/10/26時点ではPython3.9.0にはインストールできなかったので、Python3.8.6を使用しました。

python -m pip install matplotlib  #Matplotlibのインストール
python -m pip install django  #Djangoのインストール
pip list  #インストールされたパッケージの確認

インストールされたパッケージの内容です。

Package         Version
--------------- ---------
asgiref         3.2.10
certifi         2020.6.20
cycler          0.10.0
Django          3.1.2
kiwisolver      1.2.0
matplotlib      3.3.2
numpy           1.19.2
Pillow          8.0.1
pip             20.2.4
pyparsing       2.4.7
python-dateutil 2.8.1
pytz            2020.1
setuptools      49.2.1
six             1.15.0
sqlparse        0.4.1

(4) VS Codeのインストール

「Visual Studio Codeのダウンロード」からインストールファイルをダウンロードし、VS Codeをインストールします。

(5) VS Codeの設定

VS Codeの拡張機能「japanese Language Pack for Visual Studio Code」と「python」をインストールします。

VS Codeのエクスプローラーより「フォルダを開く」から「C:\Users\user_name\venvs」を選択します。

「左下の歯車」→「設定」→検索欄に「python.pythonpath」を入力し、「Python:Python Path」を見つけ出し、ワークスペースの設定で以下のファイルを指定します。(デフォルトでは「python」と入力されています)

C:\Users\user_name\py_venvs\py1\.venv1\Scripts\python.exe

同様に、「左下の歯車」→「設定」→検索欄に「venv path」を入力し、「Python:Venv Path」を見つけ出し、ワークスペースの設定で以下のフォルダを指定します。（デフォルトでは「空白」になっています）

C:\Users\user_name\py_venvs\dj86\dj86v\Scripts

(6) Pythonの実行

VS Codeの左側のエクスプローラーより、ファイルhello.pyを作り、以下のコードを作成します。

print(Hello! Hello!')

「右上の緑の右三角印」や「F5」や「Ctrl+F5」によって実行できます。いずれも仮想環境で実行されます。

「F5」では、debugする言語の種類を問われますので、Pythonを選択します。

上のタブ「実行」→「構成を開く」を実行すると、次からはF5でもdebugする言語の種類を問われなくなります。

また、VS Codeの右下に「Linter pylint is not installed」と表示された場合はインストールします。

なお、ターミナルからpython hello.pyと実行する場合は、仮想環境に切り替わっていないので注意して下さい。

(7) Djangoの実行

VS Codeの右下のターミナルにより、django_appという名前のプロジェクトを作成し、webサーバーを起動します。

「右上の緑の右三角印」や「F5」や「Ctrl+F5」による実行の仮想環境は、VS Codeの「左下の歯車」→「設定」から「Python:Python Path」や「Python:Venv Path」により指定しますが、ターミナルはactivateコマンドによって仮想環境に切り替えます。

ターミナルとそれ以外では仮想環境の指定方法が異なるので注意してください。また、 「Python:Python Path」や「Python:Venv Path」により設定しても、ターミナルでの実行の設定は別物ですので、別途設定を行う必要があります。

以下、ターミナルにおける仮想環境の設定から、Webサーバーの起動までの手順です。

cd py1  #仮想環境のフォルダに移動
py -3.8 -m venv .venv1  #仮想環境の構築（既に仮想環境を構築している場合は不要）
.venv1\scripts\activate  #仮想環境への切り替え
django-admin startproject django_app  #django_appという名前のプロジェクトを作成 
cd django_app  #フォnルダdjango_appに入る。
python manage.py runserver  #Webサーバーの起動

ブラウザより「http://localhost:8000/」、あるいは「http://127.0.0.1:8000/」にアクセスするとロケットの絵が表示されます。

なお、起動したwebサーバーを終了する場合には「Ctrl + C」とします。

４．Anacondaを利用した方法

次にAnacondaを利用した方法を紹介します。

(1) Anacondaのインストール

以下、Anacondaのインストール方法がPython.jpで紹介されています。

Windows版Anacondaのインストール

(2) Anacondaのアップデート

Windowsのスタートメニューより、「Anacond3」→「Anaconda Prompt」を起動し、以下のコマンドを実行します。

conda update conda  #condaのアップデート
conda update anaconda  #Anacondaのアップデート
conda update --all  #anacondaのライブラリのアップデート

なお、大きなアップデートがあったときには、以上のコマンドでは、うまくアップデートできないことがあるので、その場合はAnaconda自体をインストールしなおした方がよいです。

(3) Anaconda Navigatorによる仮想環境の構築

Windowsのスタートメニューより、「Anacond3」→「Anaconda Navigator」を起動します。

Anaconda Navigatorで仮想環境を構築するには、下図左側の①「Environments」を選択し、下側の②「Create」により仮想環境を作成します。すると、③に新しく仮想環境ができます。下の図は「myspace」という名前の仮想環境を作成した例です。

なお、「myspace」の表示の上の「base(root)」は仮想環境ではなく、元からあるベースとなる環境です。Anaconda Navigatorではこの画面から仮想環境にパッケージをインストールしたり、仮想環境のターミナルを起動したりできます。

(4) VS Codeのインストール

「Visual Studio Codeのダウンロード」からインストールファイルをダウンロードし、VS Codeをインストールします。

まだ、VS Codeは起動しません。起動している場合には終了してください。

(5) VS Codeを仮想環境で起動

Anaconda Navigatorを起動し、下図左側の①「Home」を選択します。次に上側のApplications onの右側②で起動する仮想環境を選択します。

最後に、VS Codeの下側③「Launch」をクリックするとVS Codeが起動します。この時、必要なVS Codeの拡張機能も自動でインストールされます。

なお、次回以降にVS Codeを起動するときも、Anaconda Navigatorから起動します。

(6) VS Codeの設定

VS Codeの拡張機能「japanese Language Pack for Visual Studio Code」と「python」をインストールします。

そして、次にVS Codeで作業を行うホームディレクトリを指定します。

VS Codeのエクスプローラーより「フォルダを開く」から「C:\Users\user_name\py_venvs\py1」を選択します。「user_name」の部分は自分のpcのユーザー名です。また、「\py_venvs\py1」は最初に「インストールのフォルダ構成」のところで作成したフォルダです。

ターミナルが表示されていないので、上部タブ「表示」より「ターミナル」を選択します。

もし、ターミナルを起動したときに以下のような赤字のエラーがターミナルに表示されたら、PowerShell のスクリプトの実行が許可されていない状態ですので解除する必要があります。

. : このシステムではスクリプトの実行が無効になっているため、ファイル
C:\Users\user_name\Documents\WindowsPowerShell\profile.ps1 を読み込むこと
ができません。詳細については、「about_Execution_Policies」
(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。

発生場所 行:1 文字:3
. 'C:\Users\user_name\Documents\WindowsPowerShell\profile.ps1'
~~~~~~~~~~~~~~~
+ CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

VS Codeのターミナル、あるいは、Windowsのスタートメニューからpowershellを起動し、以下のコマンドを実行して下さい。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

起動したターミナルに仮想環境名の表示がないので分かりにくいですが、起動した時点で既にターミナルは仮想環境に切り替わった状態になっています。

「conda env list」を実行するとmyspaceの方に「*」が表示されmyspaceが仮想環境として指定されていることがわかります。

もし、「conda env list」がVS Codeのターミナルで実行できない場合は、後述の「Python:Python Path」によりpathの設定を先に行って下さい。pathを設定するとターミナルからcondaが実行できるようになると思います。

conda env list

base                     C:\Users\user_namei\anaconda3
myspace               *  C:\Users\user_name\anaconda3\envs\myspace

以上でターミナルからのPythonの実行は可能になりましたが、「F5」「Ctrl+F5」「緑三角」によってPythonを実行するためには仮想環境のpathを設定する必要があります。

インストールの時にJast Meを指定した場合のPathの設定

Windowsのユーザー名が「user_name」、仮想環境名が「py1」であるとして説明します。以下、インストールの時に「All Users(requires admin privleges)」「Jast Me(recommended)」のどちらを選択したかによってPathの設定が異なります。

「左下の歯車」→「設定」→検索欄に「python.pythonpath」を入力し、「Python:Python Path」を見つけ出し、ワークスペースのタブを選択し、以下のファイルを指定します。それぞれのpathはVS Codeのターミナル（実行できない場合はAnaconda Powershell prompt）から「conda env list」を実行すると調べることができます。

なお、デフォルトでは 「python」と入力されています。

# base(root)で起動する場合。
C:\Users\user_name\anaconda3\python.exe

# 仮想環境myspaceで起動する場合
C:\Users\user_name\anaconda3\envs\myspace\python.exe

同様に、「左下の歯車」→「設定」→検索欄に「venv path」を入力し、「Python:Venv Path」を見つけ出し、ワークスペースの設定で以下のフォルダを指定します。なお、デフォルトでは「空白」になっています。なお、デフォルトでは「空白」になっています。

（追記）VS Code 1.59.1では、ユーザーではvenv pathを設定できますが、ワークスペースではvenv pathの設定項目が消えていました。仮想環境の指定は基本的に自動設定で行うようです。

# base(root)で起動する場合。
C:\Users\user_name\anaconda3\Scripts

# 仮想環境py1で起動する場合
C:\Users\user_name\anaconda3\envs\myspace\Scripts

インストールの時にAll Usersを指定した場合のPathの設定

「左下の歯車」→「設定」→検索欄に「python.pythonpath」を入力し、「Python:Python Path」を見つけ出し、ワークスペースの設定で以下のファイルを指定します。なお、デフォルトでは「python」と入力されています。

# base(root)で起動する場合。
C:\ProgramData\anaconda3\python.exe

# 仮想環境myspaceで起動する場合
C:\Users\user_name\.conda\envs\myspace\python.exe

同様に、「左下の歯車」→「設定」→検索欄に「venv path」を入力し、「Python:Venv Path」を見つけ出し、ワークスペースの設定で以下のフォルダを指定します。 それぞれのpathはVS Codeのターミナル（実行できない場合はAnaconda Powershell prompt）から「conda env list」を実行すると調べることができます。 なお、デフォルトでは「空白」になっています。

（追記）VS Code 1.59.1では、ユーザーではvenv pathを設定できますが、ワークスペースではvenv pathの設定項目が消えていました。仮想環境の指定は基本的に自動設定で行うようです。

# base(root)で起動する場合。
C:\ProgramData\anaconda3\Scripts

# 仮想環境py1で起動する場合
C:\Users\user_name\.conda\envs\myspace\Scripts

(6) Pythonの実行

VS Codeの左側のエクスプローラーより、ファイルhello.pyを作り、以下のコードを作成します。

print('Hello! Hello!')

コードを作成すると右下に、 「No Python interpreter is selected. ・・・」のポップアップ画面が表示された時には「Select Python Interpreter」のボタンをクリックします。

すると上部にインタプリタを選択するドロップダウンリストが表示されるので、例えば「Python 3.8.11 64-bit ('myspace':conda)」を選択します。

「右上の緑の右三角印」や「F5」や「Ctrl+F5」によって実行できます。いずれもpathを指定した仮想環境で実行されます。

「F5」でデバッグの開始を実行すると、debugする言語の種類を問われますので、Pythonを選択します。なお、デバッグ時の選択画面を表示しないようにするには、上のタブ「実行」→「構成を開く」を実行します。以下の記事の「７．デバッグ時のドロップダウンリストを消す」を参考にして下さい。

VS CodeでSSH接続。Pythonの仮想環境、lint機能。

また、VS Codeの右下に「Linter pylint is not installed」と表示された場合はインストールします。これについても上リンク先の「５．lint機能、自動整形」を参考にして下さい。

(7) Djangoの実行

Djangoを実行するには、Anaconda Navigatorによって、仮想環境にDjangoをインストールしてください。例えば、仮想環境名がmyspaceの場合、

• 左側のEnvironments → myspace → 上部のUpdate index...をクリック
• 上部のプルダウンメニューからNot installedを選択
• 一覧からdjangoにチェックを入れ、下のApplyをクリック
• Install Packagesのポップアップ画面が表示されるのでApplyをクリック

VS Codeのターミナルで以下のコマンドを実行し、バージョンが表示されたら設定完了です。

python -m django --version

Djangoのインストールが完了したら、django_appという名前のプロジェクトを作成し、webサーバーを起動します。Anaconda NavigatorからVS Codeを起動した場合は、ターミナルで仮想環境に切り替える必要はありません。

cd py1  #仮想環境のフォルダに移動
django-admin startproject django_app  #django_appという名前のプロジェクトを作成 
cd django_app  #フォnルダdjango_appに入る。
python manage.py runserver  #Webサーバーの起動

ブラウザより「http://localhost:8000/」、あるいは「http://127.0.0.1:8000/」にアクセスすると、お馴染みのロケットの絵が表示されます。これで動作確認完了です。

なお、起動したwebサーバーを終了する場合には「Ctrl + C」とします。