VsCode 2026 (version 1.109) 安装及AI使用配置教程

AI1天前发布 beixibaobao
4 0 0

文章目录

  • 1 VsCode 是什么✨
  • 2 安装步骤
    • 2.1 安装包下载
    • 2.2 详细安装设置(Windows)
  • 3 基础设置
    • 3.1 自定义扩展插件安装路径
    • 3.2 设置“简体中文”语言展示
    • 3.3 设置主题颜色
    • 3.4 详细配置设置
  • 4 插件安装
    • 4.1 前端常用插件
    • 4.2 Python常用插件
    • 4.3 AI助手插件

1 VsCode 是什么✨

Visual Studio Code(简称 VS Code)是一款由微软开发的免费、开源的现代化代码编辑器。它支持 Windows、macOS 和 Linux 操作系统,以轻量启动快速著称,同时通过丰富的插件生态提供了接近完整 IDE 的强大功能。
最新版本(2026年1月)在 AI 辅助与多智能体协作方面带来诸多增强,让开发与自动化更加智能、流畅。

在这里插入图片描述

2 安装步骤

2.1 安装包下载

VS Code 2026年1月 (version 1.109) 版本下载地址如下所示:
方式一:VsCode网盘分享链接

在这里插入图片描述


方式二:VsCode官网下载地址

在这里插入图片描述

2.2 详细安装设置(Windows)

在这里插入图片描述


(1)双击安装包,选择“我同意此协议”,再点击“下一步”。

在这里插入图片描述


(2)自定义安装路径,点击“下一步”。

在这里插入图片描述


(3)继续点击“下一步”。

在这里插入图片描述


(4)勾选“创建桌面快捷方式”,如果不想使用VS Code作为代码默认打开方式,可以取消“将code注册为受支持的文件类型的编辑器”,继续点击“下一步”。

在这里插入图片描述


(5)检查信息无误后,点击“安装”。

在这里插入图片描述


(6)点击“完成”,运行 VS Code。

在这里插入图片描述


在这里插入图片描述

3 基础设置

3.1 自定义扩展插件安装路径

VS Code 扩展插件默认安装位置(Windows)如下所示:
C:Users<你的用户名>.vscodeextensions
如果需要自定义VS Code扩展插件安装路径,可以通过新建环境变量“VSCODE_EXTENSIONS”实现,并重启系统生效。

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

3.2 设置“简体中文”语言展示

在EXTENSIONS市场搜索“Chinese (Simplified) Language Pack”。

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

3.3 设置主题颜色

点击左下角的 “设置图标” -> “主题” -> “颜色主题”,然后可以根据自己的喜好,选择喜欢的主题颜色。

在这里插入图片描述


在这里插入图片描述

3.4 详细配置设置

点击左下角的 “设置图标” -> “设置” ,然后可以修改字体、背景样式、工作台、窗口等详细配置。

在这里插入图片描述

4 插件安装

4.1 前端常用插件

(1)HTML CSS Support:编写样式表的时候,支持自动补全。

在这里插入图片描述


(2)JavaScript (ES6) code snippets:支持ES6语法提示。

在这里插入图片描述


(3)Mithril Emmet:前端开发,用于补全代码。

在这里插入图片描述


(4)Path Intellisense:支持路径提示。

在这里插入图片描述


(5)Vue (Official):用于提升 Vue 项目(尤其是 Vue 3)的开发体验。

在这里插入图片描述


(6)Vue 3 Snippets:支持Vue 2或Vue 3开发提供代码片段,语法高亮和格式化。

在这里插入图片描述


(7)open in browser:用于‌快速在浏览器中预览当前编辑的 HTML 文件。

在这里插入图片描述


此外,可根据使用习惯,安装Auto Close Tag、Auto Rename Tag、Live Server、File Utils、IntelliJ IDEA Keybindings 等插件。

4.2 Python常用插件

(1) Python:提供语法高亮、智能补全、代码导航、调试支持、单元测试集成和Jupyter Notebook支持,包含扩展包插件(Pylance、Python Debugger、Python Environments)。

在这里插入图片描述


(2)Python Docstring Generator:自动生成符合Google、NumPy或Sphinx风格的docstring。

在这里插入图片描述


(3)autopep8:根据PEP 8规范自动格式化代码。

在这里插入图片描述


(4)Black Formatter:集成Black代码格式化工具。

在这里插入图片描述


(5)isort:自动整理import语句顺序,按标准库、第三方库、本地模块分组,并按字母排序。

在这里插入图片描述


(6)Jupyter:在VS Code中直接运行和编辑.ipynb文件,支持交互式代码块、图表显示和变量查看,数据科学和机器学习开发者必备,还能将py文件转为Notebook执行。

在这里插入图片描述


(7)GitLens:增强Git功能,可在代码行旁显示作者、提交时间和变更记录。

在这里插入图片描述

4.3 AI助手插件

(1)Claude Code for VS Code:为 Claude Code 提供了原生的图形化交互界面,能够直接在 IDE 内完成代码理解、修改、规划和审查,是目前在 VS Code 中使用 Claude Code 的推荐方式。

在这里插入图片描述


(2)TRAE AI:字节跳动旗下的AI编程助手,提供以智能代码补全为代表的核心能力,支持主流编程语言及 IDE,能在编码过程中提供单行或整个函数的建议,同时支持在用户编码过程中提供代码解释、单测生成、问题修复、技术问答等辅助功能,提升编码效率与质量。

在这里插入图片描述


(3)Lingma:通义灵码是由阿里云提供的智能编码辅助工具,提供 代码智能生成、智能问答、多文件修改、编程智能体 等能力,为开发者带来高效、流畅的编码体验。

在这里插入图片描述

© 版权声明

相关文章