Jupyter Notebook+VSCode环境搭建及原理讲解

版权所有，转载注明原地址
时间：2020年1月17日17:33:15
created by：Hpbbs
使用JupyterNotebook编辑

0x00 前言(Python命令行模式的单一与JupyterNotebook的解决)

1 相信大家都用过Python的命令行模式（基于动态语言的特点）

就拿Python安装包自带的IDLE的命令行模式来说吧

可以看到，首先，界面不美观，其次，运行结果无法保存，所以大家实际开发是很少用这些，但是命令行模式用来测试片段代码还是很方便，省去创建文件，编码，配参数，按运行键等过程

2 Jupyter Notebook 的解决和自我定位

但命令行的优点也是有的，如果我们能美化它的页面显示，增加注释文本，而且注释文本显示可以用很好的格式渲染，发扬片段代码快捷运行，还能保存为文件长期保存，如果还可以和多人共享，那不就最好了！

对，Jupyter Notebook就做了这样的一件事：
来看官方的自我定位：

The notebook extends the console-based approach to interactive computing in a qualitatively new direction, providing a web-based application suitable for capturing the whole computation process: developing, documenting, and executing code, as well as communicating the results

notebook集成命令行交互方式并发展高质量内部计算的新方向，提供了一个容纳整个计算过程：开发，文档，代码执行，交互式输出的基于web的应用

先撇一眼jupter notebook的结果展示：

还有更好的图标展示，我就不在这推广他了，毕竟这是一个教程，以上只是为了让你刚好的理解jupyter notebook的产生目的，话不多说下面开始介绍环境搭建

0x01 VS Code + Python + Jupyter Notebook 搭建

1 安装Python环境

2 安装VS Code

3 VS Code 安装Python Extension

此处无需在VS Code安装其他Jupyter 拓展，经过版本更新后，Python Extension以及原生支持了Jupyter Notebook（具体一点应该说支持了Jupyter Notebook页面展示和用户操作的功能），截图可看出。

4 创建Python文件（先看后面步骤，再来看此，易于理解）

编辑Python文件时添加一些特定格式，Python Extension 便可以使得Jupyter运行
# %%:python 代码
# %% [markdown] : 支持markdown格式的注释说明

左边：是编辑的代码
右边：是VS Code运行后，对左边代码的页面界面展示

5 创建Jupyter Notebook文件

本点内容基于VS Code官网的介绍流程，Working with Jupyter Notebooks in Visual Studio Code，觉得英文看不懂可以来看后续教程

1. 按 Ctrl+shift+P 打开VS Code的命令行，输入Python: Create Blank New Jupyter Notebook，创建filename.ipynb文件
   
   如果此时你的python环境没有安装 jupyter notebook 模块，vscode会自动给你安装，并且同时安装一个MicroSoft Python Language Server，在vscode最下面可以看到安装进度（可能会比较慢，速度取决于你的网络）

2. 文件创建成功可以看到，
   

6 开始愉快的编辑（Jupyter Notebook的基本使用）

Jupyter Notebook就是一个命令行工具，应用，不要将其视为一种开发技术，只是一种工具

1. 默认会有一个空的代码格，输入python代码便好
   
   

2. 添加代码格（code cell）

3. 运行代码格
   

4. 运行多个代码格
   

5. 移动代码格
   

6. 删除代码格
   

7. 转换代码格为 支持markdown的文本格
   
   
   

8. VS Code安装IntelliSense插件时，支持代码补齐
   

9. 程序变量 和 数据查看器
   

10. 图形查看器
    

11. 将.ipynb文件转为.py 文件
    
    你就会发现转换后得.py文件和步骤五自己编写的.py文件格式相同，本质就是使用#%%和#%%[markdown]操作符进行格式控制

0x02 后记 Jupyter Notebook 实现逻辑与交互组件

1. Jupyter Notebook由服务器端和浏览器网页显示组成

> - A web application: 

a browser-based tool for interactive authoring of documents which combine explanatory text, mathematics, computations and their rich media output.

>- Notebook documents: 

a representation of all content visible in the web application, including inputs and outputs of the computations, explanatory text, mathematics, images, and rich media representations of objects.

>验证： 启动 notebook server，你就可以在浏览器打开网址 http://127.0.0.1:8888 查看浏览器显示
>sh>python -m jupyter notebook

2. VSCode，JupyterNotebook，IPython调用关系

VS Code 应用本身是一个基于浏览器chromium内核实现的web桌面应用，所以VS Code可以很好的支持jupyter notebook，(.ipynb文件本是json文件，可以修改后缀后打开观看)观察vscode的cosole输出，其逻辑是：

[I 14:16:21.291 NotebookApp] Serving notebooks from local directory: C:Users18755AppDataLocalTemp5ab7a802-eb4f-
####在本地启动服务器
[I 14:16:21.291 NotebookApp] The Jupyter Notebook is running at:
[I 14:16:21.291 NotebookApp] http://localhost:8888/?token=8c3423c0103007554d1f3dd2ad54
####本地网页访问地址
[I 14:16:21.291 NotebookApp] or http://127.0.0.1:8888/?token=8c3423c0103007554d1f3
[I 14:16:21.291 NotebookApp] Use Control-C to stop this server and shut down all kernels (twice to skip confirmation).
####可以使用Ctrl+C 关闭服务器
[C 14:16:21.300 NotebookApp]
To access the notebook, open this file in a browser:
file:///C:/Users/18755/AppData/Roaming/jupyter/runtime/nbserver-16420-open.html
Or copy and paste one of these URLs:
http://localhost:8888/?token=8c3423c0
or http://127.0.0.1:8888/?token=8c3423c
####打开网页地址
[I 14:16:21.354 NotebookApp] Creating new notebook in /
[I 14:16:21.488 NotebookApp] Kernel started: c06d06dd-c378-40
####创建一个Kernel对应一个JupyterNotebook文件
[I 14:16:23.083 NotebookApp] Creating new notebook in /
[I 14:16:23.181 NotebookApp] Kernel started: b4f27220-8d54
####创建一个Kernel对应一个JupyterNotebook文件，我有两个文件
[I 14:16:33.417 NotebookApp] 302 GET / (::1) 1.00m
####我使用网页访问了一个文件，因为之前打开过且没有更改，所以http 码是 302

- VS Code 使用Microsoft Python Language Server启动服务器NotebookApp
- VS Code 访问localhost:8888来访问服务器，使本地的.ipynb与后台服务器文件关联
- 获得回来的更新文件filename.ipynb使用解析json的方式，获得数据，借助Python Extension和VS Code 渲染页面

0x03 Reference

[1] VS Code 关于jupyter notebook 的文档
[2] Jupyter Notebook 官网文档

0x04 Jupyter Notebook & IPython

大概可以说，IPython改名后叫IPython，所以两者渊源深厚
此处大概说一下，一些基本概念

1. IPython的魔术符号在Jupyter同样适用
2. IPython关键字是：Interactive Computing

0x05 To Be Continue

具体与IPython的关系及高级使用以后再补

附议：欢迎关注微信公众号

最后

以上就是诚心鸭子为你收集整理的Jupyter Notebook+VSCode环境搭建及原理讲解的全部内容，希望文章能够帮你解决Jupyter Notebook+VSCode环境搭建及原理讲解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。