admin管理员组文章数量:1568343
目录
- 一、下载安装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/Download
1.1.2 修改为国内镜像下载
进入下载页面,可以看到,墙外官网下载速度非常慢,可以改为墙内的镜像地址。方法是:在网址上点右键,复制链接地址
https://az764295.vo.msecnd/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCodeSetup-x64-1.57.1.exe
把地址中的前半部分 https://az764295.vo.msecnd 替换为 https://vscode.cdn.azure,替换完的网址为:
https://vscode.cdn.azure/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCodeSetup-x64-1.57.1.exe
复制替换完的网址到地址栏,回车
1.2 安装 VSCode
同意协议
添加快捷方式和环境变量
二、配置VSCode环境
2.1 配置中文环境
安装完,按提示重启,自动配置为中文界面了。
2.2 配置 python 环境
扩展(ctrl+shift+x)搜索python,安装星标的那一个
2.3配置 Django 环境
扩展(ctrl+shift+x)搜索django,安装Django support for Visual Studio Code
2.4 配置 powershell
按ctrl+shift+`,打开终端,出现这个错误,
解决方法,搜索powershell
2.5 不显示 __pycache__目录
新工程可能还不用发现, 如果直接启用的是之前已有的django工程, 你会发现工程目录下, 到处可见的__pycache__目录, 看着很烦, 得想法把它干掉.
ctrl+shift+p 打开命令面板,搜索setting,选择preferences:open settings(JSON)
尾部添加
"files.exclude": {
"**/__pycache__": true,
},
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 (控制在活动代码片段内是否禁用快速建议)
2.7.2 修改配置文件:settings.json
追加代码
"editor.suggest.snippetsPreventQuickSuggestions": false,
"files.associations": {
"*.html":"html",
"*.vue":"html",
},
2.7.3 安装扩展 HTML CSS Support
2.7.4 修改配置文件:settings.json
配置文件追加
"editor.parameterHints.enabled": true,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
2.8 配置自动保存
设置,搜索autosave,将Files:Auto Save,改为 onFocusChang,即焦点改变就保存,类似于Pycharm
2.9 VSCode 连接Mysql数据库
2.9.1 安装插件 MySQL、MySQL Syntax
ctrl+shift+x打开扩展,搜索mysql,分别安装 MySQL 和 MySQL Syntax
2.9.2 连接数据库,爽
2.10 Vetur
ctrl+shift+x打开扩展,搜索Vetur,安装
2.11 live-server
修改文件浏览器自动刷新;浏览器自动打开项目;本地开发搭建临时的服务。
2.11.1 安装Node.js(js的运行环境)
1.在Node.js官网https://nodejs/en/download/下载安装包。
2.下载后进行安装。
3.打开命令行,输入node -v可以查看到版本号。输入npm –v可看到npm版本号。
新版的Node.js已自带npm(类似中的nuget包管理器),安装Node.js时会一起安装。(将来要更新npm可用这个命令npm intall npm@latest -g)
4.在我的win10系统中可以看到环境变量也已经自动配置好了。如下图
2.11.2 安装插件 Live Server
ctrl+shift+x打开扩展,搜索 Live Server,安装
可以使用了,快捷键 Alt+lo
2.12 PYQT Integration
ctrl+shift+x打开扩展,搜索 pyqt,安装
2.13 Vue 3 Snippets
包含所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段
2.14 Prettier - Code formatter
代码格式化工具
- 可配置化
- 支持多种语言
- 集成多数的编辑器
- 简洁的配置项
2.15 Path Intellisense
路径补全,自动提示文件名
2.16 ESLint
代码风格校验,代码统一、自动修复
2.17 Markdown All in One
Markdown文档编辑插件
- 丰富的快捷键
- TOC标签
- 数学公式
- 自动完成
- 列表编辑
- 输出HTML同时转PDF
- Github风格文档
2.18 vscode-icons
VsCode 文件图标插件,区分文件夹、node_module、vue、html、JS等不同文件类型
2.19 Bracket Pair Colorizer
括号对色器,区分相对应的括号(),花括号{}、中括号[]等
2.20 Debugger for Chrome
用 Chrome 来 Debug 你的 JavaScript 代码,或则其它支持 Chrome Debugger 协议的平台。
2.21 livecode 智能打印
在安装完毕后只需要在代码编辑页面使用快捷键Ctrl+shift+a(Mac下为command+shift+a)即可在当前页面打开一个类似于Matlab工作空间的新页面
2.22 实现canvas和svg的自动补全
- canvas-snippet
- SVG
三、运行已有的Django项目
3.1 VSCode打开虚拟环境文件夹
自己的文件夹,当然要信任了
3.2 配置虚拟环境python解释器
3.3 打开终端,运行Django项目
ctrl+shift+`打开终端,输入python manage.py runserver,项目正常启动
四、彻底卸载VSCode
使用vscode配置环境有时会失败,可以卸载重新配置
4.1 从控制面板找到 vscode 将其卸载。
此时仅仅是删除了应用软件,如果重新下载安装之前得插件和个人配置还会重新加载,所有需要完全删除插件和个人配置。
4.2 删除安装插件
4.2.1 方法一:C:\Users\Administrator\
在C:\Users\Administrator\找到 .vscode 文件夹,将其删除,即可彻底清除安装的插件
4.2.2 方法二: win+R 输入%userprofile%
若在图示路径中找不到文件夹,可使用如下办法:win+R 输入 %userprofile%,删除当前路径下的 .vscode 文件夹
注意:方法二和方法一找到的是同一个文件夹,只是个人系统文件不同,方法一的路径有时会有所不同。
4.3 删除用户信息和缓存信息
4.3.1 方法一:C:\Users\Administrator\AppData\Roaming
在C:\Users\Administrator\AppData\Roaming,删除 Code 和 Visual Studio Setup 文件夹,即可彻底删除用户信息和缓存信息。
如果找不到AppData文件夹,应该是隐藏了,可以在文件夹中点击 查看 勾选 显示隐藏文件和文件夹 即可找到;或者 win+S 搜索文件夹资源管理器选项,勾选 显示隐藏文件 即可。
4.3.2 方法二:win+R 输入 %appdata%
删除 Code 和 Visual Studio Setup 文件夹,即可彻底删除用户信息和缓存信息。
注意:方法二和方法一找到的是同一个文件夹,只是个人系统文件不同,方法一的路径有时会有所不同。
五、快捷键
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
直接在对应命令那一行点击,出现笔状图标,点击进入修改
快捷键太多不好找,可以在搜索框输入原来的快捷键,快速定位
六、经验专辑
6.1 vscode一直在激活扩展:禁用遥测报告
方法一、代码设置:在setting.json中加入以下代码,完美解决
"telemetry.enableTelemetry": false
方法二:设置点选
转到“文件” > “首选项” > “设置”(macOS:“代码” > “首选项” > “设置”),然后搜索 telemetry,取消选中“遥测: 启用遥测”设置。 使用此设置将抑制 Azure Data Studio 发送所有遥测事件。 在禁用此设置之前,遥测信息可能已收集并发送。
6.2 pyqt5没有代码提示
6.2.1 问题表现
6.2.1.1 代码白色
6.2.1.2 没有提示
输入 from PyQ55.Qt import Qwidget的时候,最后的Qwidget没有提示
6.2.1.3 黄色波浪线
6.2.2 解决方法:没用
虚拟环境中:pip install PyQt5-stubs
6.3 VS Code调试Django程序断点无效
6.3.1 问题和表现
Django程序打上断点,调试的时候断点是灰色的空心环,不起作用。
鼠标指向断点灰色空心环上,提示“justMycode”配置问题
6.3.2 解决方法:修改调试配置文件
查看Python:Django调试配置文件,没有justMyCode配置项
新建justMyCode配置项,设为false
重新开启调试,OK。
本文标签: djangoPythonVSCodecsshtml
版权声明:本文标题:VSCode 安装配置 Python + Django + MySQL + Html + CSS 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725734874a1039608.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论