目录

  • 一、下载安装VSCode
  • 1.1 下载 VSCode
  • 1.1.1 打开官网下载页面
  • 1.1.2 修改为国内镜像下载
  • 1.2 安装 VSCode
  • 二、配置VSCode环境
  • 2.1 配置中文环境
  • 2.2 配置 python 环境
  • 2.3配置 Django 环境
  • 2.4 配置 powershell
  • 2.5 不显示 __pycache__目录
  • 2.6 配置Pylint:Python 代码分析工具
  • 2.7 配置Html提示
  • 2.7.1 设置 -->文本编辑器 (建议)-->取消选中 Suggest:Snippets Prevent Quick Suggestions (控制在活动代码片段内是否禁用快速建议)
  • 2.7.2 修改配置文件:settings.json
  • 2.7.3 安装扩展 HTML CSS Support
  • 2.7.4 修改配置文件:settings.json
  • 2.8 配置自动保存
  • 2.9 VSCode 连接Mysql数据库
  • 2.9.1 安装插件 MySQL、MySQL Syntax
  • 2.9.2 连接数据库,爽
  • 2.10 Vetur
  • 2.11 live-server
  • 2.11.1 安装Node.js(js的运行环境)
  • 2.11.2 安装插件 Live Server
  • 2.12 PYQT Integration
  • 2.13 Vue 3 Snippets
  • 2.14 Prettier - Code formatter
  • 2.15 Path Intellisense
  • 2.16 ESLint
  • 2.17 Markdown All in One
  • 2.18 vscode-icons
  • 2.19 Bracket Pair Colorizer
  • 2.20 Debugger for Chrome
  • 2.21 livecode 智能打印
  • 2.22 实现canvas和svg的自动补全
  • 三、运行已有的Django项目
  • 3.1 VSCode打开虚拟环境文件夹
  • 3.2 配置虚拟环境python解释器
  • 3.3 打开终端,运行Django项目
  • 四、彻底卸载VSCode
  • 4.1 从控制面板找到 vscode 将其卸载。
  • 4.2 删除安装插件
  • 4.2.1 方法一:C:\Users\Administrator\
  • 4.2.2 方法二: win+R 输入%userprofile%
  • 4.3 删除用户信息和缓存信息
  • 4.3.1 方法一:C:\Users\Administrator\AppData\Roaming
  • 4.3.2 方法二:win+R 输入 %appdata%
  • 五、快捷键
  • 5.1 主命令框
  • 5.2 编辑器与窗口管理
  • 5.3 代码编辑
  • 5.3.1 格式调整
  • 5.3.2 光标相关
  • 5.3.3 重构代码
  • 5.3.4 查找替换
  • 5.3.5 显示相关
  • 5.3.6 其他设置
  • 5.4 修改快捷键
  • 六、经验专辑
  • 6.1 vscode一直在激活扩展:禁用遥测报告
  • 6.2 pyqt5没有代码提示
  • 6.2.1 问题表现
  • 6.2.1.1 代码白色
  • 6.2.1.2 没有提示
  • 6.2.1.3 黄色波浪线
  • 6.2.2 解决方法:没用
  • 6.3 VS Code调试Django程序断点无效
  • 6.3.1 问题和表现
  • 6.3.2 解决方法:修改调试配置文件


一、下载安装VSCode

1.1 下载 VSCode

1.1.1 打开官网下载页面

https://code.visualstudio.com/Downloadvscode python库怎么安装 vscode如何安装pygame_快捷键

1.1.2 修改为国内镜像下载

进入下载页面,可以看到,墙外官网下载速度非常慢,可以改为墙内的镜像地址。方法是:在网址上点右键,复制链接地址

vscode python库怎么安装 vscode如何安装pygame_数据分析_02


https:///stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCodeSetup-x64-1.57.1.exe 把地址中的前半部分 https:// 替换为 https://,替换完的网址为:

https:///stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCodeSetup-x64-1.57.1.exe

复制替换完的网址到地址栏,回车


1.2 安装 VSCode

同意协议

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_03


添加快捷方式和环境变量

vscode python库怎么安装 vscode如何安装pygame_数据分析_04

二、配置VSCode环境

2.1 配置中文环境

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_05


安装完,按提示重启,自动配置为中文界面了。

2.2 配置 python 环境

扩展(ctrl+shift+x)搜索python,安装星标的那一个

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_06

2.3配置 Django 环境

扩展(ctrl+shift+x)搜索django,安装Django support for Visual Studio Code

vscode python库怎么安装 vscode如何安装pygame_数据分析_07

2.4 配置 powershell

按ctrl+shift+`,打开终端,出现这个错误,

vscode python库怎么安装 vscode如何安装pygame_Code_08


解决方法,搜索powershell

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_09


vscode python库怎么安装 vscode如何安装pygame_数据分析_10

2.5 不显示 __pycache__目录

新工程可能还不用发现, 如果直接启用的是之前已有的django工程, 你会发现工程目录下, 到处可见的__pycache__目录, 看着很烦, 得想法把它干掉.

ctrl+shift+p 打开命令面板,搜索setting,选择preferences:open settings(JSON)

vscode python库怎么安装 vscode如何安装pygame_数据分析_11


尾部添加

"files.exclude": {
        "**/__pycache__": true,

        },

vscode python库怎么安装 vscode如何安装pygame_Code_12


vscode python库怎么安装 vscode如何安装pygame_数据分析_13

2.6 配置Pylint:Python 代码分析工具

  • 安装相关python插件: pylint pylint_django
    pip install pylint pylint_django
  • 在sttings.json配置(注意:这个配置可能不是必须的,有时会有代码错误提示,这个可以注释掉这段配置)
    “python.linting.pylintArgs”: [
    “–load-plugins”,
    “pylint_django”
    ],

2.7 配置Html提示

2.7.1 设置 -->文本编辑器 (建议)–>取消选中 Suggest:Snippets Prevent Quick Suggestions (控制在活动代码片段内是否禁用快速建议)

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_14

2.7.2 修改配置文件:settings.json

追加代码

"editor.suggest.snippetsPreventQuickSuggestions": false,
    "files.associations": {
        "*.html":"html",
        "*.vue":"html",
    },
2.7.3 安装扩展 HTML CSS Support

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_15

2.7.4 修改配置文件:settings.json

配置文件追加

"editor.parameterHints.enabled": true,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
},

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_16

2.8 配置自动保存

设置,搜索autosave,将Files:Auto Save,改为 onFocusChang,即焦点改变就保存,类似于Pycharm

vscode python库怎么安装 vscode如何安装pygame_数据分析_17

2.9 VSCode 连接Mysql数据库

2.9.1 安装插件 MySQL、MySQL Syntax

ctrl+shift+x打开扩展,搜索mysql,分别安装 MySQL 和 MySQL Syntax

vscode python库怎么安装 vscode如何安装pygame_快捷键_18

2.9.2 连接数据库,爽

vscode python库怎么安装 vscode如何安装pygame_快捷键_19


vscode python库怎么安装 vscode如何安装pygame_搜索_20

2.10 Vetur

ctrl+shift+x打开扩展,搜索Vetur,安装

vscode python库怎么安装 vscode如何安装pygame_数据分析_21

2.11 live-server

修改文件浏览器自动刷新;浏览器自动打开项目;本地开发搭建临时的服务。

2.11.1 安装Node.js(js的运行环境)

1.在Node.js官网https://nodejs.org/en/download/下载安装包。

vscode python库怎么安装 vscode如何安装pygame_Code_22

2.下载后进行安装。

3.打开命令行,输入node -v可以查看到版本号。输入npm –v可看到npm版本号。

新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装。(将来要更新npm可用这个命令npm intall npm@latest -g)

vscode python库怎么安装 vscode如何安装pygame_快捷键_23

4.在我的win10系统中可以看到环境变量也已经自动配置好了。如下图

vscode python库怎么安装 vscode如何安装pygame_搜索_24

2.11.2 安装插件 Live Server

ctrl+shift+x打开扩展,搜索 Live Server,安装

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_25


可以使用了,快捷键 Alt+lo

vscode python库怎么安装 vscode如何安装pygame_Code_26


vscode python库怎么安装 vscode如何安装pygame_快捷键_27

2.12 PYQT Integration

ctrl+shift+x打开扩展,搜索 pyqt,安装

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_28

2.13 Vue 3 Snippets

包含所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段

vscode python库怎么安装 vscode如何安装pygame_Code_29

2.14 Prettier - Code formatter

代码格式化工具

  1. 可配置化
  2. 支持多种语言
  3. 集成多数的编辑器
  4. 简洁的配置项

2.15 Path Intellisense

路径补全,自动提示文件名

vscode python库怎么安装 vscode如何安装pygame_快捷键_30

2.16 ESLint

代码风格校验,代码统一、自动修复

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_31

2.17 Markdown All in One

Markdown文档编辑插件

  1. 丰富的快捷键
  2. TOC标签
  3. 数学公式
  4. 自动完成
  5. 列表编辑
  6. 输出HTML同时转PDF
  7. Github风格文档

2.18 vscode-icons

VsCode 文件图标插件,区分文件夹、node_module、vue、html、JS等不同文件类型

vscode python库怎么安装 vscode如何安装pygame_快捷键_32

2.19 Bracket Pair Colorizer

括号对色器,区分相对应的括号(),花括号{}、中括号[]等

vscode python库怎么安装 vscode如何安装pygame_数据分析_33

2.20 Debugger for Chrome

用 Chrome 来 Debug 你的 JavaScript 代码,或则其它支持 Chrome Debugger 协议的平台。

vscode python库怎么安装 vscode如何安装pygame_数据分析_34

2.21 livecode 智能打印

vscode python库怎么安装 vscode如何安装pygame_搜索_35


vscode python库怎么安装 vscode如何安装pygame_Code_36


在安装完毕后只需要在代码编辑页面使用快捷键Ctrl+shift+a(Mac下为command+shift+a)即可在当前页面打开一个类似于Matlab工作空间的新页面

2.22 实现canvas和svg的自动补全

  1. canvas-snippet
  2. SVG

三、运行已有的Django项目

3.1 VSCode打开虚拟环境文件夹

vscode python库怎么安装 vscode如何安装pygame_数据分析_37


自己的文件夹,当然要信任了

vscode python库怎么安装 vscode如何安装pygame_Code_38


vscode python库怎么安装 vscode如何安装pygame_搜索_39

3.2 配置虚拟环境python解释器

vscode python库怎么安装 vscode如何安装pygame_快捷键_40


vscode python库怎么安装 vscode如何安装pygame_Code_41

3.3 打开终端,运行Django项目

ctrl+shift+`打开终端,输入python manage.py runserver,项目正常启动

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_42


vscode python库怎么安装 vscode如何安装pygame_Code_43

四、彻底卸载VSCode

使用vscode配置环境有时会失败,可以卸载重新配置

4.1 从控制面板找到 vscode 将其卸载。

此时仅仅是删除了应用软件,如果重新下载安装之前得插件和个人配置还会重新加载,所有需要完全删除插件和个人配置。

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_44

4.2 删除安装插件

4.2.1 方法一:C:\Users\Administrator\

在C:\Users\Administrator\找到 .vscode 文件夹,将其删除,即可彻底清除安装的插件

vscode python库怎么安装 vscode如何安装pygame_快捷键_45

4.2.2 方法二: win+R 输入%userprofile%

若在图示路径中找不到文件夹,可使用如下办法:win+R 输入 %userprofile%,删除当前路径下的 .vscode 文件夹

注意:方法二和方法一找到的是同一个文件夹,只是个人系统文件不同,方法一的路径有时会有所不同。

vscode python库怎么安装 vscode如何安装pygame_Code_46

vscode python库怎么安装 vscode如何安装pygame_Code_47

4.3 删除用户信息和缓存信息

4.3.1 方法一:C:\Users\Administrator\AppData\Roaming

在C:\Users\Administrator\AppData\Roaming,删除 Code 和 Visual Studio Setup 文件夹,即可彻底删除用户信息和缓存信息。

如果找不到AppData文件夹,应该是隐藏了,可以在文件夹中点击 查看 勾选 显示隐藏文件和文件夹 即可找到;或者 win+S 搜索文件夹资源管理器选项,勾选 显示隐藏文件 即可。

vscode python库怎么安装 vscode如何安装pygame_快捷键_48

4.3.2 方法二:win+R 输入 %appdata%

删除 Code 和 Visual Studio Setup 文件夹,即可彻底删除用户信息和缓存信息。

注意:方法二和方法一找到的是同一个文件夹,只是个人系统文件不同,方法一的路径有时会有所不同。

vscode python库怎么安装 vscode如何安装pygame_Code_49


vscode python库怎么安装 vscode如何安装pygame_数据分析_50

五、快捷键

5.1 主命令框

F1 或 Ctrl+Shift+P(俗称万能键) :打开命令面板。在打开的输入框内,可以输入任何命令
按一下 Backspace 会进入到 Ctrl+P 模式
在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式
在 Ctrl+P 窗口下还可以直接输入文件名,跳转到该文件
在 Ctrl+P 模式下输入 “?” 会弹出下拉菜单

5.2 编辑器与窗口管理

新建文件:   Ctrl+N
文件之间切换:   Ctrl+Tab
打开一个新的VS Code编辑器:    Ctrl+Shift+N
关闭当前窗口:   Ctrl+W
关闭当前的VS Code编辑器:   Ctrl+Shift+W
切出一个新的编辑器窗口(最多3个):   Ctrl+\
切换左中右3个编辑器窗口的快捷键:   Ctrl+1  Ctrl+2  Ctrl+3

5.3 代码编辑

5.3.1 格式调整
代码行向左或向右缩进:   Ctrl+[ 、 Ctrl+]
复制或剪切当前行/当前选中内容:   Ctrl+C 、 Ctrl+V
代码格式化:   Shift+Alt+F
向上或向下移动一行:   Alt+Up 或 Alt+Down
向上或向下复制一行:   Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行:   Ctrl+Enter
在当前行上方插入一行:   Ctrl+Shift+Enter
5.3.2 光标相关
移动到行首:   Home
移动到行尾:   End
移动到文件结尾:   Ctrl+End
移动到文件开头:   Ctrl+Home
移动到定义处:   F12
查看定义处缩略图(只看一眼而不跳转过去):    Alt+F12
选择从光标到行尾的内容:   Shift+End
选择从光标到行首的内容: Shift+Home
删除光标右侧的所有内容(当前行):   Ctrl+Delete
扩展/缩小选取范围: Shift+Alt+Right 和 Shift+Alt+Left
多行编辑(列编辑):   Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up
同时选中所有匹配编辑(与当前行或选定内容匹配):   Ctrl+Shift+L
下一个匹配的也被选中:   Ctrl+D
回退上一个光标操作:   Ctrl+U
撤销上一步操作: Ctrl+Z
手动保存:   Ctrl+S
5.3.3 重构代码
找到所有的引用:   Shift+F12
同时修改本文件中所有匹配的:   Ctrl+F2
跳转到下一个 Error 或 Warning:   当有多个错误时可以按 F8 逐个跳转
5.3.4 查找替换
查找:   Ctrl+F
查找替换:   Ctrl+H
5.3.5 显示相关
全屏显示(再次按则恢复):   F11
放大或缩小(以编辑器左上角为基准):   Ctrl +/-
侧边栏显示或隐藏: Ctrl+B
显示资源管理器(光标切到侧边栏中才有效):   Ctrl+Shift+E
显示搜索(光标切到侧边栏中才有效):   Ctrl+Shift+F
显示(光标切到侧边栏中才有效):   Git Ctrl+Shift+G
显示 Debug:    Ctrl+Shift+D
显示 Output:    Ctrl+Shift+U
5.3.6 其他设置
自动保存:File -> AutoSave(中文界面下“文件”->“自动保存”) 或者 Ctrl+Shift+P,输入 auto

5.4 修改快捷键

File -> Preferences -> Keyboard Shortcuts( 中文界面时:“文件”->“首选项”->“键盘快捷方式”),或者:ctrl+ks

直接在对应命令那一行点击,出现笔状图标,点击进入修改

vscode python库怎么安装 vscode如何安装pygame_快捷键_51


快捷键太多不好找,可以在搜索框输入原来的快捷键,快速定位

vscode python库怎么安装 vscode如何安装pygame_快捷键_52

六、经验专辑

6.1 vscode一直在激活扩展:禁用遥测报告

方法一、代码设置:在setting.json中加入以下代码,完美解决

"telemetry.enableTelemetry": false

方法二:设置点选

转到“文件” > “首选项” > “设置”(macOS:“代码” > “首选项” > “设置”),然后搜索 telemetry,取消选中“遥测: 启用遥测”设置。 使用此设置将抑制 Azure Data Studio 发送所有遥测事件。 在禁用此设置之前,遥测信息可能已收集并发送。

vscode python库怎么安装 vscode如何安装pygame_Code_53

6.2 pyqt5没有代码提示

6.2.1 问题表现
6.2.1.1 代码白色

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_54

6.2.1.2 没有提示

输入 from PyQ55.Qt import Qwidget的时候,最后的Qwidget没有提示

6.2.1.3 黄色波浪线

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_55

6.2.2 解决方法:没用

虚拟环境中:pip install PyQt5-stubs

6.3 VS Code调试Django程序断点无效

6.3.1 问题和表现

Django程序打上断点,调试的时候断点是灰色的空心环,不起作用。

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_56


鼠标指向断点灰色空心环上,提示“justMycode”配置问题

vscode python库怎么安装 vscode如何安装pygame_Code_57

6.3.2 解决方法:修改调试配置文件

查看Python:Django调试配置文件,没有justMyCode配置项

vscode python库怎么安装 vscode如何安装pygame_Code_58

新建justMyCode配置项,设为false

vscode python库怎么安装 vscode如何安装pygame_数据分析_59


重新开启调试,OK。

vscode python库怎么安装 vscode如何安装pygame_vscode python库怎么安装_60