VSCode, Django, and Anaconda开发环境集成配置[Windows]

　　之前一直是在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, pip和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/", 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~~