之前一直是在Ubuntu下進行Python和Django開發，最近換了電腦，把在Virtual Box 下跑的Ubuntu開發機挪過來總是頻繁崩潰，索性就嘗試把開發環境挪到Windows主力機了。

不得不說，巨硬家這幾年在多元幷包方面真的是走在了世界前列。特別是VSCode，兩年前已經成為了我在Linux下的主力IDE。於是直接Google到了這篇爽文：Django Tutorial in Visual Studio Code, 下面會結合Anaconda的開發環境，翻譯這篇官方指導。

0x1 - 安裝清單

- Win10

- Anaconda3

- Vistual Studio Code(VSCode)

 分別下載並按照好以上三個神器，選的都是最新穩定版。

0x2 - Anaconda 管理並配置Python開發環境

• 開啟Anaconda Prompt終端命令列工具（不是Anaconda Navigator），先來練習下conda，類似於pip和virtualenv的結合體。

• 用conda建立Python開發虛擬環境，注意要在環境名稱（這裡是my_env）後加上python版本。

conda create -n wechat_env python=3.7

• 移除環境

 conda remove -n wechat_env --all

• 檢視虛擬環境列表， *代表當前工作所在的虛擬環境：

(base) C:\Users\freman.zhang>conda env list
# conda environments:
#
base                  *  C:\Anaconda3
wechat_env               C:\Anaconda3\envs\wechat_env

•  啟用及切換環境：

(base) C:\Users\freman.zhang>conda activate wechat_env
(wechat_env) C:\Users\freman.zhang>conda env list
# conda environments:
#
base                     C:\Anaconda3
wechat_env            *  C:\Anaconda3\envs\wechat_env
(wechat_env) C:\Users\freman.zhang>conda deactivate
(base) C:\Users\freman.zhang>

• 安裝Django到開發環境，如有需要可以指定版本號。

conda install django
conda install django==2.2.5

這樣conda就會自動下載並安裝好Python和Django到指定的開發環境，無需再事先或單獨安裝在OS中。

conda詳細的管理命令可以到官方文件中詳細瞭解。

0x3 - 在VSCode中配置整合開發環境

 Django是一個為安全，快速和可擴充套件的web開發所設計的高階Python框架。Django對於URL路由, 頁面模板和資料處理等提供豐富的支援。

在接下來的tutorial中，我們將建立一個簡單的三頁應用，並將會用到一個通用的基礎模板。通過在VSCode中完整的過一遍這個開發過程，我們將可以更好的理解如何使用VSCode的命令終端，編輯器和偵錯程式等來高效便捷地進行Django應用開發。

整個示例專案的完整程式碼在Github: python-sample-vscode-django-tutorial.

1. 準備條件

- 在VScode中安裝python外掛

- 下載安裝python，在Windows中還需特別注意PATH環境變數的配置

我們的安裝包和開發環境在前面已經都通過conda完成，對比後就可非常明顯的體現出Anaconda在包管理方面的便捷性。

2. 整合虛擬開發環境到VSCode中

• 在VSCode中按組合鍵ctrl+shift+P，輸入python，先擇Python: Select Interpreter， 這個命令將會展示出一個所有VSCode可用的python直譯器清單。

• 從這個清單中選擇我們上面用conda新建的開發環境 -- 以 ./env or .\env開頭

•  按組合鍵Ctrl+Shift+`開啟一個新的整合命令終端，在VSCode的地步狀態列，可以看到當前開發環境的標識

 0x4 - VSCode中建立Django專案

1. 按組合鍵Ctrl+Shift+`進入開發終端，相關直譯器和虛擬開發環境將會自動被啟用。然後執行如下命令，如果沒有任何報錯，用瀏覽器開啟http://127.0.0.1:8000，我們將會看到Django的預設歡迎頁。

django-admin startproject web_project C:\web_project
cd C:\web_project

python manage.py startapp hello
python manage.py runserver

 2. 接下來是Django應用的基礎構建

• hello/views.py

from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

•  hello/urls.py

from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]

• web_project/urls.py

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
]

3. 儲存所有檔案，然後啟動服務 python manage.py runserver，用瀏覽器訪問應用網址 http://127.0.0.1:8000，將會看到如下：

 0x5 - VSCode中建立Django debugger launch profile開啟自動除錯

到這裡你可能已經在想，是否有更好的方式來除錯和執行應用服務，而非每次執行一次python manage.py runserver 呢？必須有的！

VSCode的debugger是支援Django的，我們通過自定義 launch profile就可以實現這一點。

1. 切換左邊的活動欄到Debug, 在Debug檢視的頂部，我們可以看到如下。No Configuratins表示Debugger還未配置任何執行設定(launch.json)。

 2. 點選齒輪建立並開啟一個launch.json檔案，這個檔案裡面已經包含了一些除錯設定，每種都是以獨立的JSON物件存在。我們新增如下：

{
    "name": "Python: Django",
    "type": "python",
    "request": "launch",
    "program": "${workspaceFolder}/manage.py",
    "console": "integratedTerminal",
    "args": [
        "runserver",
        "--noreload"
    ],
    "django": true
},

其中"django": true告訴VSCode開啟Django頁面模板除錯功能。

3. 點選Debug > Start Debugging按鈕，瀏覽器中開啟URL http://127.0.0.1:8000/將可以看到我們的APP順利的跑起來了。

 其實任何時候感覺想要除錯一下應用效果時，我們都可以用Debug來啟動服務，此外這個操作還會自動儲存所有開啟著的檔案。

這樣就不用每次都到命令列敲一遍啟動命令，倍爽有木有！！！

4. Debug不僅僅只有啟動和儲存功能，我們下面通過具體案例來體驗下高階用法。

　　先碼程式碼

• hello/urls.py：新增訪問路由到urlpatterns list中

path("hello/<name>", views.hello_there, name="hello_there"),

• hello/views.py

import re
from datetime import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return HttpResponse(content)

5. 在Debug中設定斷點（breakpoints）於now = datetime.now() 所在行。

 6. 按F5或Debug > Start Debugging 開啟除錯，VSCode頂部將會出現一個如下的Debug工具欄。

Pause (or Continue, F5), Step Over (F10), Step Into (F11), Step Out (Shift+F11), Restart (Ctrl+Shift+F5), and Stop (Shift+F5). See VS Code debugging for a description of each command.

 7. 在下面的終端中也會出現相關的控制資訊。通過瀏覽器開啟URL http://127.0.0.1:8000/hello/VSCode， 在頁面渲染完成前，VSCode會暫停在設定的斷點處。黃色小箭頭代表其是即將執行到的下一行。

 點選 Step Over(F10) 執行 now = datetime.now()所在行。

在左邊Debug選單欄我們將會看到很多實時輸入資訊，包含執行時的變數值等等。我們可以在這裡檢查各個賦值或相關資訊是否符合設計目標。

 程式暫停在斷點位置時，我們可以回到程式碼中更改相關語句，偵錯程式中的相關輸入資訊也會實時做狀態更新。我們可以嘗試將formatted_now的賦值做如下更改，用來直觀地比較檢視下偵錯程式狀態更新。

now.strftime("%a, %d %B, %Y at %X")
'Fri, 07 September, 2018 at 07:46:32'
now.strftime("%a, %d %b, %Y at %X")
'Fri, 07 Sep, 2018 at 07:46:32'
now.strftime("%a, %d %b, %y at %X")
'Fri, 07 Sep, 18 at 07:46:32'

我們可以按F5逐行執行接下來的語句，並觀察偵錯程式輸出資訊，直到最終應用頁面完全渲染完成，點選Debug > Stop Debugging 或 command (Shift+F5)關閉除錯。

  0x5 - Go to Definition

VSCode也支援檢視函式和類的定義檢視：

• Go to Definition jumps from your code into the code that defines an object. For example, in views.py, right-click on HttpResponse in the home function and select Go to Definition (or use F12), which navigates to the class definition in the Django library.

• Peek Definition (Alt+F12, also on the right-click context menu), is similar, but displays the class definition directly in the editor (making space in the editor window to avoid obscuring any code). Press Escape to close the Peek window or use the x in the upper right corner.

0x6 - Template, Static, Models程式設計

接下來可以在模板，靜態檔案和資料處理的功能程式設計實現上實踐上面介紹的這些功能，練習整個整合開發環境的操作熟練度。

其實如果有一定基礎的話，我相信一天你就將會從入門到精通。

詳細的程式碼個實現步驟在這裡就不在繼續往下貼了。詳細教程大家可按這個連結中的內容參照實現。

https://code.visualstudio.com/docs/python/tutorial-django#_create-multiple-templates-that-extend-a-base-template

0x7 - 問題分享

整個過程中只有遇到的問題：

1. VSCode無法原生支援Django Models相關物件的關聯檢查。

我們需要額外做點工作：

• ctrl+shift+`(ESC下面那個鍵)開啟命令終端，不用手工敲任何命令，終端會自動切換和啟用到對應的虛擬開發環境。

安裝pylint-django

•  然後進入VSCode setting裡面設定pylint引數，具體如下：

就這樣，問題解決！

==========================================================

由於還有繁重的日常工作要忙，這篇文章歷時了幾天時間斷斷續續整理出來，也精簡了不少官方指導中的文字描述。可能會對各位閱讀和操作來帶一些困擾，所以還是建議各位直接去讀官方文件。我們這裡主要是集中整理了下Anaconda和VSCode的整合開發環境配置，以備未來不時之需，若能順便幫到任何人，將倍感欣慰。各位若有任何問題，歡迎提出，我將會彙整日後自己或其他來源收集到的問題陸續補充到0x7。

最後，希望大家能多多動手

多多敲程式碼

多多點贊

多多分享

回家遛女兒去咯

Over~~