VSCode, Django, and Anaconda开发环境集成配置[Windows]（vscode怎么运行代码）

VSCode, Django, and Anaconda开发环境集成配置[Windows]（vscode怎么运行代码）

之前一直是在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版本。

1

conda create -n wechat_env python=3.7

移除环境

conda remove -n wechat_env --all

查看虚拟环境列表， *代表当前工作所在的虚拟环境：

1

2

3

4

5

(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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。