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

写在前面的话

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

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

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

闲话少说,进入正题!

创建 Django 测试项目

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

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

安装配置 VSCode

【1】安装 VSCode:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{
  "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",
}

粘贴到右边保存即可:

最终达到的效果如下图:

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

很多以前用 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. 运行我们的项目:

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

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

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

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

运行项目:

访问测试:

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

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

此时我们需要 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 的样张,这也是我选择这个工具的原因,很喜欢这个主题啊!

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

(0)

相关推荐

  • 在Visual Studio Code中配置GO开发环境的详细教程

    一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github.com/microsoft/vscode-go 这款插件的特性包括: Colorization 代码着彩色 Completion Lists 代码自动完成(使用gocode) Snippets 代码片段 Quick Info 快速提示信息(使用godef) Goto Definition 跳转到定

  • Visual Studio Code (vscode) 配置 C / C++ 环境的流程

    昨天突发奇想,想使用vscode配置C++环境,因为不想下载 Dev OR codeblock,然后借助了很多网上教程,用了昨天整整一下午的时间最后终于成功了(哈哈哈哈哈--).今天跟大家分享一下~~~ 因为还只是个编程小白,参考资料有点多 ↓ ↓ ↓ 官方文档 -- 参考配置过程CSDN原创文章 -- 参考主要配置过程知乎达人 -- 参考环境准备 ➺➻➸ 主要流程: 1. 下载VScode 2. 安装cpptools工具 3. 下载MinGW 4. 配置环境变量 5. 使用简单的.cpp文件配

  • Visual Studio Code配置C、C++环境并编写运行的方法

    弄了半天,总算弄好了,结合网上的教程,整理分享一下~ 总体流程: 下载安装vscode 安装cpptools插件 安装编译.调试环境 修改vscode调试配置文件 下载安装vscode  https://code.visualstudio.com/Download Visual Studio Code 64位 v1.26.0 官方最新安装版:https://www.jb51.net/softs/606746.html Visual Studio Code 32位 v1.26.0 官方最新安装版:

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

    写在前面的话 作为有个 Python 菜逼,之前一直用的 Pycharm,但是在主题这一块怎么调整都感觉要么太骚,看起来不舒服,要么就是简直不能看.似乎用大 JB 公司 IDE 的人似乎都不怎么重视主题这个东西. 我个人是那种"喜新厌旧"的,所以看久了 Pycharm 就感觉很难受了,再加上 Pycharm 太笨重了,就换成了以前短时间用过的 VSCode,以前没用是懒得折腾插件,现在闲下来准备折腾一下! 这里放一张我现在的 Pycharm 的配色主题: 闲话少说,进入正题! 创建 D

  • Visual Studio Code (VSCode) 配置搭建 C/C++ 开发编译环境的流程

    目录 前言 VSCode安装流程 1. 下载VScode 2. 安装C/C++扩展插件工具 3. 下载MinGW 4. 配置环境变量 5. 使用简单的.cpp文件配置C++环境 6. 运行 扩展 前言 工作多年,突然发现很多C++的基础都忘记了,加之C++不断更新换代后的各种新特性,于是想重拾C++的基础学习.虽然现在工作都是Linux平台,但考虑到个人方便,自己也仅仅想重温语法,家里家外都可使用,决定搭建一下C++ IDE开发环境.记得N年前刚开始接触编程时,使用的是Visual C++6.0

  • Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++的教程详解(Windows)【真正的小白版】

    写在前面的前面:这篇文章vscode和cpp插件版本有点老了,仅供大家参考,最新的和最详细的更新见我的另一篇文章: https://www.jb51.net/article/183154.htm 写在前面: 由于这学期(或者说这一年)一直在忙别的,也没什么闲心看博客了,近期发现自己的这篇文章:整理:Visual Studio Code (vscode) 配置C.C++环境/编写运行C.C++(Windows)竟然有了好多访问,也有不少童鞋问各种问题,非常感谢大家的支持,本来是自己整理的没想到有这

  • Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++的教程详解(主要Windows、简要Linux)

    2020年2月22日更新,又按照自己的帖子尝试了以下,感觉大的思路是没问题的啊,小改动用紫色的标记标注出来了,另外如评论区所说删去了部分旧版本的内容和图片,不知道为啥评论区的留言我都没收到邮件... 现在是2019.7.21,由于这阵一直在忙,今天我用最新的VSCode(Version 1.36.1) 和最新的Cpp插件(version 0.24.0)按照本文的安装步骤从零开始试了一下,由于vscode版本和cpp插件版本更新确实变化了很多,2019年7月21日更新的我会用这个颜色(粉色?)标示

  • Visual Studio Code(vscode) git的使用教程

    本文介绍了Visual Studio Code(vscode) git的使用,分享给大家,具体如下: 1.创建一个github账号 2.在vscode中执行命令 echo "# C-Tests" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/harryluo163/C-Tests.g

  • Visual Studio Code 配置C、C++ 文件debug调试环境的详细过程

    目录 vscodeC/C++ExtensionPack插件安装 vscodewindows端debug配置 windowMinGW环境安装 windows端C.CPP单文件debug调试 代码文件中文目录文件名,如何在window端正常调试 vscodeubuntu端debug配置 ubuntuC.CPP单文件调试 中文目录文件名,在ubuntu端正常调试 官方文档参考 大家好我是SLF,在午休的时候给嵌入式软件的同事,演示了一下如何用vscode调试应用端的CPP程序,他之前一直用的是Ultr

  • VSCode搭建STM32开发环境的方法步骤

    目录 1.安装VScode 2.安装C/C++插件 3.安装Keil Assistant插件 4.用vscode打开keil工程 5.编译.下载程序 6.常用操作 官方简述 摘要: 作为一个51单片机或STM32单片机的使用者,keil一直是我们的必备的一款工具之一.但keil的一些问题也一直存在,当然也有人用其他的比如STM32CubeIDE.但是今天推荐的是VScode+Keil Assistant插件,不需要很复杂的配置各种文件和环境变量,只需要一个插件即可!可以编译代码和下载程序. 当我

  • Webpack 4.x搭建react开发环境的方法步骤

    本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记 必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&

  • 在Ubuntu中安装VSCode并配置C/C++开发环境的方法步骤

    第一步,打开Ubuntu Software下载VSCode.(so easy) 官网地址:https://code.visualstudio.com/docs/?dv=linux64_deb 然后使用 sudo dpkg -i  xxx.deb解压即可 第二步,如果你的电脑中没有gcc,g++,gdb的话,可以通过以下代码获得. sudo apt-get update //访问源列表,并读取软件列表 sudo apt-get install gcc sudo apt-get install g+

随机推荐