vi+vscode（1）

vscode 

一、vscode接受

（1）Visual Studio Code（简称 VS Code） 是微软开发的免费、开源、跨平台代码编辑器，定位轻量高效，同时通过插件可扩展出媲美 IDE 的能力。

（2）vscode 的优点：

跨平台：Windows /macOS/ Linux 全支持Visual Studio Code
轻量极速：启动快、内存占用低，远优于大型 IDE
全语言支持：原生支持 JavaScript/TypeScript，插件覆盖 Python、Java、C++、Go 等 50+ 语言
内置能力：Git 版本控制、终端、调试、智能提示（IntelliSense）
插件生态：官方市场数万款插件，按需扩展功能

（3）适用场景：Web 开发、Python 数据分析、后端开发、前端、嵌入式、脚本编写等，是全球开发者首选工具之

二、vscode 下载安装

（1）访问官网：https://code.visualstudio.com/，根据系统选择对应安装包Visual Studio Code。

 

下载的安装包

 

 

（2）下载 VSCodeUserSetup-x64-xxx.exe

 

 

（3）双击运行，勾选「我接受协议」→ 下一步

 

（4）安装位置：建议非 C 盘（如 D:\Program Files\VS Code）

修改路径：

 

（5）勾选「添加到 PATH」（必选，命令行可直接用 code）、「创建桌面快捷方式」

 

 

（6）下一步 → 安装 → 完成

 

 

（7）在桌面上也显示快捷方式：

 

（7）验证：打开 CMD，在dos命令下，输入 code --version，显示版本即成功

 

（8）能打开说明安装成功

 

三、vscode运用

我们打开界面是英文的，我们将转换成中文

1. 中文汉化（必做）
打开 VS Code → 左侧「扩展」图标（方块）
搜索 Chinese (Simplified) → 安装 → 重启 VS Code
界面变为中文

 下载成功后：就变成中文了

 

2. 核心界面
左侧栏：资源管理器（文件）、搜索、源代码管理（Git）、扩展、运行和调试、插件市场
顶部：菜单栏（文件、编辑、查看、终端、帮助）
右侧：编辑区、终端（Ctrl+` 打开）、问题面板

 

3. 常用快捷键
快捷键 功能
Ctrl+Shift+P 命令面板（全局搜索功能）

 

Ctrl+~打开 / 关闭终端

Ctrl+S 保存
Ctrl+C/V 复制粘贴
Ctrl+Z/Y 撤销 / 重做
Ctrl+F 查找
Ctrl+H 替换
Ctrl+Shift+F 全局查找
Ctrl+Shift+N 新建窗口
Ctrl+Shift+T 重新打开关闭的标签

4、必装插件

Chinese (Simplified)：中文汉化
Python：Python 语法、调试、格式化
JavaScript and TypeScript：前端开发必备
ESLint：代码检查（前端）
Prettier：代码格式化（全语言）
GitLens：Git 增强（查看提交历史、作者）
Code Runner：一键运行代码（支持多语言）
GitHub Copilot：AI 代码助手（免费试用）

5、ai功能

 

 

 

 输入密码

 

6、主题选择

 7、字体的调大，调小

 

 

五、基础使用（快速上手）
1. 新建文件 / 文件夹
新建文件：Ctrl+N → 保存为 .py/.js/.html 等
新建文件夹：资源管理器 → 右键「新建文件夹」→ 命名
打开文件夹：文件 → 打开文件夹（推荐，以工作区管理项目）

 

 

2. 编写与运行代码（以 Python 为例）
新建 test.py，输入：
python
运行
print("Hello VS Code!")
安装 Python 插件 → 右侧「运行和调试」→ 选择 Python → 配置调试器
运行：
右键「运行代码」
或按 F5 调试
终端输出：Hello VS Code!
3. Git 版本控制（内置）
打开项目文件夹 → 左侧「源代码管理」
初始化 Git：点击「初始化仓库」
提交：输入提交信息 → 提交
推送：关联远程仓库（GitHub/Gitee）→ 推送
4. 终端使用
打开：Ctrl+`
执行命令：python test.py、npm install、git push 等
支持 PowerShell、Bash、CMD 等终端
六、进阶配置（个性化）
1. 主题设置
文件 → 首选项 → 颜色主题 → 选择喜欢的主题（如 Dark+、One Dark Pro）
图标主题：扩展搜索「Material Icon Theme」→ 安装 → 应用
2. 自定义设置（settings.json）
Ctrl+, → 打开设置 → 右上角「{ }」图标 → 编辑 JSON
示例：
json
{
"editor.fontSize": 14,
"editor.lineNumbers": "on",
"editor.wordWrap": "on",
"terminal.integrated.fontSize": 13
}
3. 常用配置项
字体大小：editor.fontSize
显示行号：editor.lineNumbers
自动换行：editor.wordWrap
终端字体：terminal.integrated.fontSize
七、常见问题
命令行 code 无效：安装时未勾选「添加到 PATH」→ 重新安装或手动添加环境变量Visual Studio Code
中文乱码：安装中文插件并重启，或设置编码为 UTF-8
插件安装失败：检查网络，或切换镜像源
运行代码报错：确认对应语言环境已安装（如 Python、Node.js）
八、总结
VS Code 是轻量、免费、强大、全平台的代码编辑器，通过插件可覆盖几乎所有开发场景。安装简单、上手快，适合新手入门，也适合专业开发者高效工作。

 =============================

vscode的插件清单

一、必装通用插件（所有人都要装）
这些是不管写什么语言都必须装的基础插件。
Chinese (Simplified) Language Pack
作用：VS Code 官方中文汉化
Prettier - Code formatter
作用：一键格式化代码，自动对齐、排版
Code Runner
作用：右键一键运行任何代码（Python/JS/Java/C++）
GitLens — Git supercharged
作用：查看代码谁写的、什么时候改的、Git 增强神器
Auto Rename Tag
作用：自动同步修改 HTML/XML 标签
Path Intellisense
作用：自动提示文件路径
Error Lens
作用：代码错误直接高亮显示，超级好用
二、Python 开发插件（数据分析 / AI / 脚本）
适合学 Python、爬虫、数据分析、AI 大模型、Agent 开发。
Python（微软官方）
作用：语法提示、调试、运行
Pylance
作用：Python 超级智能补全（快、准、强）
autoDocstring
作用：自动生成函数注释
Jupyter
作用：在 VS Code 里直接运行 Jupyter 笔记
三、前端开发插件（HTML/CSS/JS/ 小程序 / Vue/React）
适合做网站、小程序、Web 开发。
JavaScript and TypeScript Nightly
ESLint
作用：代码规范检查
Live Server
作用：一键启动本地网页，实时刷新
CSS Peek
作用：快速查看 CSS 样式定义
Vue Language Features（Vue 专用）
ES7+ React Snippets
作用：快速生成 React/Vue 代码片段
四、Java 开发插件
Extension Pack for Java
官方全家桶，一键装完所有 Java 必需插件
五、AI 编程神器（提升效率 10 倍）
GitHub Copilot
作用：AI 自动写代码、补全、解释、生成
目前最强大的 AI 编程助手
通义灵码 / 豆包 AI / 文心快码
国产免费 AI 编程助手（讲课推荐）
六、美化主题 + 图标（讲课超好看）
One Dark Pro
最经典、最舒服的深色主题
Material Icon Theme
文件图标美化，清晰好看
Carbon Product Icons
VS Code 图标现代化美化
二、安装步骤（讲师上课可直接演示）
1 打开插件市场
左侧 → 扩展（四个方块的图标）
快捷键：Ctrl + Shift + X
2 搜索插件名称
例如输入：Chinese
找到对应插件 → 点 安装
3 安装完成重启 VS Code
即可生效。
三、我帮你配好的「最优设置」（直接复制用）
打开设置：Ctrl + ,
点击右上角 {} 打开设置 (JSON)
全部替换成下面内容：
json
{
// 中文界面
"locale": "zh-CN",

// 字体大小
"editor.fontSize": 15,
"terminal.integrated.fontSize": 14,

// 自动换行
"editor.wordWrap": "on",

// 保存自动格式化
"editor.formatOnSave": true,
"editor.formatOnType": true,

// 默认使用 Prettier 格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 行号、空格显示
"editor.lineNumbers": "on",
"editor.renderWhitespace": "all",

// 主题与图标
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "carbon-icons"
}
四、讲师专用话术（你上课可直接讲）
VS Code 之所以强大，不是因为它本身，而是因为它的插件生态。
大模型是脑子，Agent 是机器人；
VS Code 是工作台，插件就是你的工具。
装完这些插件，你写代码的效率至少提升 3～5 倍！

 =============================