使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤


Posted in Python onDecember 17, 2018

写在前面的话

作为有个 Python 菜逼,之前一直用的 Pycharm,但是在主题这一块怎么调整都感觉要么太骚,看起来不舒服,要么就是简直不能看。似乎用大 JB 公司 IDE 的人似乎都不怎么重视主题这个东西。

我个人是那种“喜新厌旧”的,所以看久了 Pycharm 就感觉很难受了,再加上 Pycharm 太笨重了,就换成了以前短时间用过的 VSCode,以前没用是懒得折腾插件,现在闲下来准备折腾一下!

这里放一张我现在的 Pycharm 的配色主题:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

闲话少说,进入正题!

创建 Django 测试项目

这里说明一下,配置的是 Python + Django 的环境,所以我会从新建一个测试的 Django 项目开始,算是整体流程再走一遍!

【1】新建一个 Django 项目: 注意,我这里 Python 使用的是 virtualenv 为项目建立的虚拟环境,没用过的照着这个步骤做就行,需要注意那个切换到我们新环境的命令就行

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

安装配置 VSCode

【1】安装 VSCode:

下载地址:https://code.visualstudio.com/

根据自己电脑对应的操作系统下载对应的版本即可,至于安装过程也和一般的软件一样,没什么特别需要注意的地方!

安装完成之后打开,最开始的页面是这样的:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

这时候就需要我们根据需要安装对应的插件了,这也是整个 VSCode 最出彩的地方。需要啥安装啥,而不用全家桶安装!

【2】插件安装:我们这里就不用快捷键了,都页面摆在这里,直接点就行了!

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

这里会有很多推荐的插件,也可以看到我们安装的和禁用的插件。

1. 首先,我们安装个汉化界面的插件:Chinese (Simplified) Language Pack for Visual Studio Code

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

我们点击右下角 Install 就能安装,值得注意的是,我们安装后并不会生效,在安装后右下角会弹框提示我们 Restart,我们出去 VSCode 就行了!

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

这时候已经变成了中文界面,我们可以打开刚刚我们创建的项目了!

2. 打开项目: 左上角 文件 --> 打开文件夹

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

这时候我们会发现两个问题,一个是默认主题并不好看,另一个是文件没有图标进行区分,所以这时候我们就需要进行配置!

3. 文件图标和主题美化:Material Icon Theme 和Son of Obsidian Theme

安装完成后点击插件右下角的重新载入就行了!

但是这样主题这些并不会直接就加载出来,需要手动选择:

根据左下角有个设置,里面可以进行很多设置:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

我这里将我们的配置贴出来:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

进入设置后可以可以点击这个代码符号将我们的配置贴进去,当然你也可以自己一项一项的配置,只要你不怕麻烦:

{
  "editor.fontSize": 16,
  "explorer.confirmDragAndDrop": false,
  "extensions.autoUpdate": false,
  "workbench.colorTheme": "Son of Obsidian",
  "editor.fontFamily": "Consolas, Dengxian",
  "workbench.sideBar.location": "left",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
}

粘贴到右边保存即可:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

最终达到的效果如下图:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

此时再看,就会发现代码有了舒服的配色,而且文件夹和文件也有了属于自己的图标,当然你也可以到网上选择你喜欢的风格,反正我是挺喜欢这个的。

很多以前用 sublime 的 monokai,在 VSCode 里面也是有 Monokai 的,我个人是看厌了!

4. 接下来便是安装真正协助我们开发的插件:

  • Python:Python 语法的基本插件
  • Django:Django 的插件,用于模板中语法提示和补全,注意不是搜索出来的第一个,而是后面有个 1.0 版本的
  • XML Tools:整个 VSCode 都会用到的插件,运维配置 VSCode 需要
  • Beautify:前端美化
  • View In Browser:浏览器快捷打开前端页面
  • HTML CSS Support:HTML 基础插件
  • Path Intellisense:路径补全插件

5. 运行我们的项目:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

配置 Python 环境:我点击添加配置后悔在右边弹出个框,选择 Python 即可,这样就能打开一个配置文件!

在回到我们的项目,这时候会多了一个文件夹和两个文件:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

打开 settings.json 文件,将里面的 Python 路径换成我们之前 virtualenv 添加的!注意斜线 windows 是双斜线

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

打开 launch.json 文件配置 Django 启动的参数:找到 Django 的项,我这里给他指定了一个端口,你也可以加其他

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

运行项目:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

访问测试:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

安装语法检测和代码格式化工具:

在运行的终端中我们直接添加 Power shell 就可以相当于我们在 windows 命令行直接操作命令了,而且是在虚拟 Python 环境下,很方便:

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

此时我们需要 pip 安装我们需要的包:

pip install pylint
pip install yapf
pip install pylint_django

在我们项目之前生成的 settings.json 文件中加入以下配置:

{
  "python.pythonPath": "E:\\VSCodeProject\\vscode_env\\Scripts\\python.exe",
  "python.formatting.provider": "yapf",
  "python.linting.pylintArgs": [
    "--load-plugins",
    "pylint_django",
  ]
}

最好在重启一下编辑器,这样我们的 VSCode 就算配置完成了,虽然还有一些小的不足,但是后续可以根据自己的需求慢慢的修复!总的来说还是很香的!

小结

看起来过程有些复杂,但是总的来说还是不错的,很多东西都是第一次配置就行了,像主题风格这些都是一次配置终身使用。新开项目也就配置一些环境而已。

使用 VSCode 只要区分一些工作区配置和系统配置就行,系统配置就是会影响你以后打开 VSCode 的使用,工作区则是当前项目,也就是我们在 settings.json 里面的配置!

至于 launch.json 的配置,那完全是 Python 启动的参数配置,你不同项目肯定会配置不同的端口的,这没什么好说的。

还有其它一些有用的插件,等到需要的时候再去完善!

最后附带一张 HTML 的样张,这也是我选择这个工具的原因,很喜欢这个主题啊!

使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python引用(import)文件夹下的py文件的方法
Aug 26 Python
Python中实现两个字典(dict)合并的方法
Sep 23 Python
Python中使用items()方法返回字典元素对的教程
May 21 Python
python的多重继承的理解
Aug 06 Python
python用线性回归预测股票价格的实现代码
Sep 04 Python
浅谈python中频繁的print到底能浪费多长时间
Feb 21 Python
Python requests模块session代码实例
Apr 14 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
May 22 Python
最新Python idle下载、安装与使用教程图文详解
Nov 28 Python
python读取excel数据并且画图的实现示例
Feb 08 Python
python文件目录操作之os模块
May 08 Python
Python实现列表拼接和去重的三种方式
Jul 02 Python
python样条插值的实现代码
Dec 17 #Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
Dec 17 #Python
python3爬虫获取html内容及各属性值的方法
Dec 17 #Python
解决Python中list里的中文输出到html模板里的问题
Dec 17 #Python
python实现三次样条插值
Dec 17 #Python
Python命名空间的本质和加载顺序
Dec 17 #Python
对python的unittest架构公共参数token提取方法详解
Dec 17 #Python
You might like
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
详解ES6 系列之异步处理实战
2018/10/26 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python实现Windows电脑定时关机
2018/06/20 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
五一劳动节活动记录
2014/03/23 职场文书
法人任命书范本
2014/06/04 职场文书
2014年路政工作总结
2014/12/10 职场文书
小学信息技术教学反思
2016/02/16 职场文书