前端基础实战 9

Web开发环境配置课件目录01VSCode开发工具02申请AI大模型Key03配置AI编程插件及插件应用VSCode开发工具安装VSCode1．VSCode概述VSCode是一个功能强大的代码编辑器，具有以下重要特性。（1）轻量级和快速：VSCode是一个轻量级的编辑器，启动速度快，运行流畅，适用于各种开发环境。（2）跨平台支持：VSCode支持Windows、macOS和Linux操作系统，开发者可以在不同平台上使用。（3）丰富的扩展：VSCode拥有丰富的扩展，开发者可以根据需要安装各种扩展来增强编辑器的功能，如代码格式化、调试工具、版本控制、AI代码生成等。（4）内置终端：VSCode内置终端，开发者可以在编辑器中直接运行命令行工具，提高开发效率。VSCode开发工具安装VSCode（5）智能代码补全：VSCode提供智能代码补全功能，能够根据上下文自动补全代码，提高编程速度和准确性。（6）调试支持：VSCode支持多种编程语言的调试功能，如设置断点、查看变量、调试代码等。（7）Git集成：VSCode提供Git集成，开发者可以方便地进行版本控制操作，如提交、推送、拉取等。（8）多语言支持：VSCode支持多种编程语言，包括但不限于JavaScript、Python、Java、C++、Go、PHP等，适合不同语言的开发者使用。（9）自定义配置：VSCode提供丰富的配置选项，开发者可以根据个人喜好自定义编辑器。VSCode开发工具安装VSCode2.安装与配置在

VSCode

官网下载最新版本的安装文件，双击安装文件安装VSCode即可。VSCode开发工具安装VSCodeVSCode开发工具创建项目当创建一个新的HTML文件后，文件内容通常是空的，此时可以在编辑窗口中输入“！”来自动填充HTML的文档结构。只需要输入“！”，并按Enter键即可自动生成以下代码。申请AI大模型Key关于AI编程插件使用AI大模型进行编程辅助，通常有以下两种方式。（1）在AI对话窗口中将编程需求或规格要求通过提示词描述清楚，并将AI生成的代码复制到项目中。（2）在各类编程开发环境中安装AI编程插件，并在当前开发环境中通过提示词编写需求，调用AI大模型生成代码。申请AI大模型Key关于AI编程插件目前市场上比较主流的AI编程插件主要有以下几个。（1）Cline：可以很好地帮助开发者生成“从零到一”的项目代码。如果发现生成的代码存在漏洞，则可以通过提示词进行修改。（2）Continue：Continue不具备操作本地文件的能力，只能通过AI对话窗口来生成代码，或对已有的代码进行分析和修改。（3）Copilot：基于OpenAI提供的GPT系列大模型进行编程，也支持Gemini或Claude大模型。（4）通义灵码：由阿里云提供的AI编程插件，除了支持通义千问的编程大模型，还支持DeepSeek大模型。（5）Cursor和Devin：Cursor与Devin的编程能力都非常不错，并能进行复杂的需求分析与代码生成。申请AI大模型Key对接DeepSeek访问DeepSeek的API开放平台并注册账号，申请开通一个APIKey，如图1-4所示。申请AI大模型Key对接硅基流动DeepSeek的访问量非常大，导致DeepSeek时常出现不稳定的情况。硅基流动平台可以作为一个备选方案。申请AI大模型Key对接硅基流动进入“API密钥”界面，创建一个新的APIKey即可完成对接，如图1-6所示。申请AI大模型Key对接OpenRouter1．登录OpenRouter访问OpenRouter官网，单击相应页面右上角的“Signin”按钮进行登录。其目前支持3种登录方式——Google、MetaMask及本站登录，如图1-7所示。申请AI大模型Key对接OpenRouter2．申请APIKey单击登录后的用户头像，选择“Keys”选项，进入APIKey管理页面，单击“CreateKey”按钮即可创建APIKey，如图1-8所示。申请AI大模型Key对接OpenRouter3．信用卡支付如果确定需要长期使用OpenRouter，则需要绑定信用卡以支付费用，OpenRouter支付页面如图1-9所示。配置AI编程插件及插件应用配置AI编程插件1．安装AI编程插件在VSCode中安装插件是非常方便的，只需要在VSCode的左侧边栏中单击“EXTENSIONS”图标并搜索相应的插件名称，找到相应插件并单击“Install”按钮即可完成安装，重启VSCode即可生效。图1-10所示为VSCode中的编程插件。配置AI编程插件及插件应用配置AI编程插件配置Cline插件如果要在Cline中对接DeepSeek或OpenRouter，则只需要提供申请的APIKey即可，在Cline中对接DeepSeek如图1-11所示。配置AI编程插件及插件应用配置AI编程插件配置Continue插件Continue的默认配置模型为Claude大模型，是效果较好的大模型，但是该大模型在申请APIKey时需要提供电话号码，且不支持我国的手机号码，因此需要配置模型并配合OpenRouter来使用，具体操作如下。①

进入Continue设置界面，打开配置文件。②

在配置文件中配置DeepSeek、OpenRouter上的Claude大模型及硅基流动的Qwen大模型。配置AI编程插件及插件应用配置AI编程插件配置Copilot与通义灵码如果要配置Copilot，则需要先开通一个GitHub的账号，再安装

Copilot，根据提示登录即可完成配置。如果需要配置通义灵码，则也是类似的操作，在阿里云注册账号并登录即可。通义灵码登录提示如图1-17所示。配置AI编程插件及插件应用Cline插件应用1．Cline功能介绍Cline是一款先进的AI编程插件，为开发者提供了一系列强大的功能，具体功能如下。（1）能够分析项目的文件结构和代码抽象语法树（AbstractSyntaxTree，AST）。（2）通过正则表达式搜索和读取相关文件，快速了解现有项目。（3）能够处理复杂的软件开发任务，并逐步完成这些任务。（4）文件操作与错误处理，可以创建和编辑文件。（5）能够主动修复诸如缺少导入和语法错误等问题。（6）直接在用户终端中执行命令并监控输出。配置AI编程插件及插件应用Cline插件应用（7）支持多种API提供商，如OpenRouter、Anthropic、OpenAI、Google、DeepSeek等。（8）可配置任何兼容OpenAI的API。（9）支持通过Ollama使用本地模型。（10）跟踪整个任务循环和单个请求的总token数和API使用成本，让用户随时了解开支情况。Cline的这些功能使其成为一个全面的AI编程助手，能够在项目开发的各个阶段为开发者提供支持。配置AI编程插件及插件应用Cline插件应用2.生成贪吃蛇游戏代码Cline内置了文件操作功能，可以通过提示词来创建文件或读取文件内容。所以，可以直接在Cline中通过提示词完成一个项目，如生成贪吃蛇游戏代码。配置Cline使用DeepSeek大模型来生成代码，同时确保勾选了“Auto-approve:Read，Edit，Commands，Browser，…”复选框，表示代码生成过程中系统不再询问，而是直接进行创建文件等操作。Cline提示词示例如下。配置AI编程插件及插件应用Cline插件应用3.分析代码功能除生成代码外，Cline或Continue等AI编程助手也可以帮助用户分析代码结构、分析代码功能、寻找代码中存在的漏洞、为代码添加注释等。例如，利用Cline来分析某段代码的功能，并为其添加注释，此时，需要在提示词输入区中将文件添加进来，如图1-20所示。配置AI编程插件及插件应用Cline插件应用4.识图并生成代码借助目前大模型在图像识别方面的能力，可以利用设计稿直接生成界面和功能代码。此处，为了进行测试，将Windows操作系统中的计算器界面（见图1-22）作为设计图，在提示词输入区中添加该图像，并让AI编程助手识别图像中的界面布局来生成对应的HTML和JavaScript代码。配置AI编程插件及插件应用Continue插件应用1．Continue功能介绍Continue的主要功能如下。（1）聊天（Chat）：在VSCode的侧边栏中与AI进行互动，帮助用户理解和迭代代码。（2）自动补全（Autocomplete）：实时提供代码补全建议，提升编程效率。（3）代码编辑（Edit）：无须切换文件即可直接修改代码。（4）快捷操作（Action）：为常见用例提供快捷操作，如按Ctrl+L组合键将打开对话窗口并将选中的代码作为提示词的一部分，按Ctrl+I组合键将进入编辑模式并对选中的代码进行修改和编辑。配置AI编程插件及插件应用Continue插件应用2．使用Continue生成代码新建一个HTML文件，将其命名为“clock.html”，在打开的代码编辑器中按Ctrl+I组合键进入Continue的编辑模式，输入提示词来生成实现时钟功能的代码，如图1-25所示。配置AI编程插件及插件应用Continue插件应用3．使用Continue修改代码上述时钟虽然功能一切正常，但是表盘上没有显示分针和秒针的刻度，现在通过Continue添加提示词来让AI修改代码，实现分秒的刻度显示，具体操作如下。先在代码编辑区中按Ctrl+A组合键全选代码，再按Ctrl+I组合键对选中的代码进行编辑，并在提示词输入区中输入如下内容：“该时钟的界面上没有分针和秒针的刻度，请为界面添加刻度元素，并为其添加CSS，本次操作不修改JavaScript代码。”，