VSCode 安装配置 Python + Django + MySQL + Html + CSS

最新推荐文章于 2023-10-31 11:33:00 发布

岳涛@心馨电脑

最新推荐文章于 2023-10-31 11:33:00 发布

阅读量3.4k

点赞数 18

分类专栏： VS Code 文章标签：数据分析

本文链接：https://blog.csdn.net/yuetaope/article/details/118385687

版权

VS Code 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、下载安装VSCode

1.1 下载 VSCode

1.1.1 打开官网下载页面

https://code.visualstudio.com/Download
在这里插入图片描述

1.1.2 修改为国内镜像下载

进入下载页面，可以看到，墙外官网下载速度非常慢，可以改为墙内的镜像地址。方法是：在网址上点右键，复制链接地址
在这里插入图片描述
https://az764295.vo.msecnd.net/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCodeSetup-x64-1.57.1.exe
把地址中的前半部分 https://az764295.vo.msecnd.net 替换为 https://vscode.cdn.azure.cn，替换完的网址为：
https://vscode.cdn.azure.cn/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.org/en/download/下载安装包。
在这里插入图片描述

2.下载后进行安装。
3.打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。
新版的Node.js已自带npm（类似.net中的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。

岳涛@心馨电脑

关注

18
点赞
踩
78

收藏

觉得还不错? 一键收藏
打赏
1
评论
VSCode 安装配置 Python + Django + MySQL + Html + CSS

一、下载安装VSCode1.1 下载 VSCode1.1.1 打开官网下载页面https://code.visualstudio.com/Download1.1.2 修改为国内镜像下载进入下载页面，可以看到，墙外官网下载速度非常慢，可以改为墙内的镜像地址。方法是：在网址上点右键，复制链接地址https://az764295.vo.msecnd.net/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCodeSetup-x64-1.57.1.
复制链接

扫一扫