pencil插件 vscode安装

大家好，我是夕阳，今天向大家介绍如何在 i d e 中使用 pencil 这个工具。 总的来说，安装过程只有两步，第一步，安装 pencil 插件。第二步，配置 m c p server。 pencil 相当于一个 ui 画布，在进行 ai 代码编辑前，可以提前在 pencil 中生成 ui 界面，然后再生成对应的代码。 pencil 有 格式化的面板，且可以在各 i d e 中使用，比如 vs code 或者 tree。 当然， pencil 也支持咳嗽，但它要付费，所以不掩饰了。首先，我们进入 ide 中，打开拓展搜索并安装 pencil， 安装完成后会出现报错，不要担心，这是因为我们还没有配置 mcp server 导致的。开始配置 mcp server， 这里以 vs code 中的 kilo 为例， 在用户设置中添加 pencil 的 mcp server 配置相关的 mcp server 配置我放到了简介与评论区置顶里，大家可以复制使用。 这里等待时间有点长了，加速一下。 配置完成后，注册登录，复制 mcp config。 如果已经登录但忘记复制了，我已经在 tree 上登录了，所以这里切换到 tree， 打开 pencil 个人信息 settings， 能看到可复制的 mcp config， 把它替换到 mcp server 配置中对应位置即可。 至此，我们就完成了 pencil 在 ide 中的配置。在配置好后，建议给 pencil agent 设置以下系统提示词， 同时在串中该智能体允许被其他智能体所调用，我们需要给他备注何时可以调用。这里可以新建一个智能体， 由于我已经创建过了，直接展示成品 工具，记得勾选 pencil， 这个很重要。当上述都完成后，建议大家都测试一下是否可以运行，这里我用这段提示词来进行测试，使用的模型为 kimi k 二点五 可以看到可以运行，同时该步骤并没有生成代码，当你觉得 u i 符合要求了，即可再生成代码。 这里 ui 缺失很明显是画不小了。拉大就好了， 具体拉多大都无所谓，只要你能看到 ui 就 行了，毕竟这不是最终效果。如果觉得视频对你有帮助，还望三连加关注你的肯定是我的动力。

还在 figma 和 vs code 之间反复横跳，设计师嫌还原度低，程序员嫌改图太反，甚至为了一个像素的圆角，俩人差点在会议室打起来。现在时代变了， 今天给你们安利一个缝合怪神器 pencil， 它不光能设计，还能直接把设计变成代码，主打一个设计开发不分家， ai 帮你全拿下。首先，千万别去满世界找安装包， pencil， 它可以直接住进你的代码编辑器里， 不管你是 vs code 还是 anti gravity， 只需要在拓展中搜一下 pencil， 认准这个一键安装。装好之后，你的代码编辑器里就多了一块画布。这是什么概念？ 意味着你可以在写代码的地方直接画 ui， 而且全靠嘴就能实现。来看操作，我们直接对 agent 喊话， 创建完整的 apple music 风格音乐播放器 app， 此时后台的 agent 会瞬间开始思考工作，看这首页，这播放器有没有那味了。 觉得颜色太土，布局不对，不用自己修改，直接像甲方爸爸一样指点江山。红色不好看，歌词呢？给我加上。只需稍作等待， ai 立马改好。 最后只需要直接下令，我对设计很满意，写代码吧！ pencil 直接调用 web coding， 瞬间生成 next js 项目结构，从一张白纸到可以在手机上点的 app， 中间只插了几句咒语。 这效率直接从小时级干到了分钟级。对于我们这种想偷懒啊，不想提高效率的开发者来说，简直是神仙体验，赶紧去试试吧！ 别忘了让 ai 给你写代码的时候记得说声谢谢哦，万一哪天致谢危机了呢？这里是讲 ai 的 大局，想学更多 ai 黑科技关注我，下期见！

hello， 大家好，我是贤，怎么在科室里面去用这个 pencil， pencil 呢？它是一个 love code 做的一个设计画图的一个 ai 工具，它是支持在科室里面用 pencil 的 m c p 进行一个自主的一个页面绘画的一个创作。在你的一个代码的编辑器里面， 既能够做设计，又能够去转化成代码。首先呢，我们先打开科室来扩展商店里面去搜索这个 pencil， 然后点击这个安装，要快速的就已经安装到你的科室里面了。安装后首次启动的时候， pencil 里面会有一个提示，一个输入你的邮箱并进行一个激活，这时候呢，你要进行这个邮箱的一个验证，确认你整个的 pencil 的 这个服务器是开启的，那么让他去检查一下你这个 m c p 的 一个服务器是否还在连接，或者连接是否还在成功 cosigning 这个里面。 towards m c p， 点开以后你就能看到 我此刻这个地方有飞的码，有 pencil， pencil 这个地方打开以后，它会有一个绿点，一个开关，这个时候的状态，可使用的一个状态。 我在课程里面直接告诉他去启动 pencil， 然后进行这个自主的设计，然后把这段题的词去丢给他，我就是对这个网站进行一个简单的一个设计，设计风格，这个时候我没有去告诉他，我就让他进行这个自主设计，否则菜单这一块呢？哎，点击这个图标，它其实就是 design kites， 一个这个呃 style 的 一个风格，然后在这个风格里面可以进行选择一个风格，它就会根据 所设置好的这个组接风格给你设计，然后你就可以在孙悟空里去告诉他启动拍手进行自主的设计。我就是让他做了一个 啊 nintendo 非常火的十六个提示词的这个卡片的一个网站，然后整个这个状态的话，他会不停的去给你弹这个操作的这个提示，让他去进行一个乱的跑通就可以了，他会从上到下的一个添加，跑到这个时候呢，他把整个提示词的内容就完完全全给你粘上去了。做好了这个东西他一开始的时候其实 是特别完美的，然后你还是可以去给他截图告诉客服，然后让他对这个页面进行一个优化和适配。我这个地方呢是因为他卡片里头提示词呢是写出去的，所以我就直接告诉他把整个卡片进行一个合适的一个适配。就是你每次去让他修改或设计的时候， 前面都要加上一个启动 pencil， 进行自主的设计，或自主的修改或自主的修复，这样的话他就会在前台页页面能看到他这个 一直在跑的这个效果。调整完之后，大概效果是基本上是基于现在这个样子，我是比较满意了。要怎么让他去进行这个代码呃落地和实现呢？按住的这个文件保存在了这个位置，截图告诉他，然后告诉他这个路径在哪里，根据这个去写这个代码，就会读取这个设计了，他就会完完全全缠绕 整个你现在看到的这个喷手这个页面去给你去实现这个就它实现的效果，我觉得是挺完美的了。喷手里面去给我做好的这个东西按着这个样子有花纹的状态，还有这种光感，整个题字词里面的提示词呢，可以点击复制，复制过来以后呢我就可以拿到 book i m 这个里面，然后给它粘过来。视频给大家分享的十六个题字词都写在这个网站上， 成了这个卡片的形式。那么你直接可以点一键的复制提示词，就可以到你的 notebook l m 里面了，我觉得非常的方便，非常的好用。以后的话 notebook 里面它会有这个新的提示词的话，我会在里面继续添加，就直接在科室里面去接这个 m c p， 直接告诉他自主地用喷手进行这个设计， 然后设计的内容是什么什么，它就会自主的在科室里面进行跑通，修改完之后你觉得很满意了，第三步的时候你就可以告诉科室设计稿的方式去给你生成和实现，而且非常快，非常完美的，百分之百的去实现了。今天的分享就到这结束了，在新的一年祝大家新年快乐，一天都开开心心的。然后二六年的话，我们一起来拥抱 ai， 也谢谢大家对 我的一些支持，多有一些业余的时间，然后给大家分享用 ai， 嗯，去创造我们个人的一些价值，然后新年快乐。好了，下期再见。

零基础入门 ai 编程一百讲第二十五期，本期的内容主要有三个知识点，第一个知识点呢是讲什么是 vsco 的 插件？第二，如何去安装 vsco 的 插件？ 第三，常用的 vsco 的 插件，我给大家去介绍几个，接下来还是实战的形式给大家去演示。我们首先打开的是 vsco 的 这个界面的话，前两期我们已经介绍过了，这就是 vsco 的 啊，这个编辑器。那第一个问题，什么是 vsco 的 插件呢？你首先要明白一点，这个 vsco 的 它是什么？ 它实际上呢就是一个软件，看了吗？它就是一个软件，我们通过双击把它安装在我们的电脑上，而这个软件的话，它有什么功能呢？它其实就可以用来写代码。那 vsco 的 插件又是什么呢？其实就是在这个软件内部啊，安装的一些新的 小的程序，来增强这个软件它的功能的，它的关系有点类似于微信这样子一个平台，然后呢在微信里面又可以打开一些小程序，那这些小程序其实就把微信的功能给扩展了，那这个 vsco 的 插件 也是一样，只不过说它的名字不太一样，那在 vsco 的 里面，它有一个插件的商店，有些时候我们又叫做扩展，你看啊，这里面是不是有一个 弹出来的这个文字叫扩展，你点击一下，那这里面就有个应用商店，在这个应用商店里面我们就可以安装啊各种各样的扩展，大家可以看，我在这里已经安装了一个扩展，那这个扩展的名字叫什么呢？这个扩展的名字叫做 chinese， 就一个简体中文的这样的一个插件，有了这个插件以后的话，那我的这个 vs code 它就从英文可以切换成中文啊，这就是它的功能，给 vs code 啊扩展了一个语言的选项， 它由原来的英文，现在可以支持中文了，那这个东西就叫插件，其实 vs code 里面常用的插件有很多啊，这是我们的第三个知识点，我们讲一讲怎么去安装这里面的一些常用的插件，你要安装哪个插件？首先你得知道它的名字，那常用的插件，我们在这里搜一下，输入一个 code， 这里输入 code 以后出来的这些结果的话，那里面有一个叫做 code runner 的 这样的一个插件，那我点击安装啊，大家可以看一下这个插件有什么作用，那我这里点信任发布者，点安装，这里面正在安装， 安装完成以后我们就可以使用了。好，这里面的话就显示已经安装完成，你可以看到这里面有个卸载，对吧？那有了卸载说明我们已经安装上了，那在这里我点关闭好，左边的话是可以切换到我们的这个资源管理器的。 那如果说我要运行这个我写的这个程序怎么方便的去运行呢？那我可以右键看到没有，这里有一个 run code 啊，你只要装上了刚才我们说的这个插件以后，你右键的话就有一个 round 扣的，我直接可以通过这样子的形式把这个程序运行起来 啊，这样子呢就比较方便了。有了这个插件我们就不需要打开终端，然后再来输入 node， 然后 index 点 j s， 我 们不需要通过这样子的方式来去运行，我们直接右键 run code 就 可以运行我们写的这个程序，那这就是 code runner 啊，这个插件它的一个作用，这个 code runner， 它其实还可以运行 各种各样的程序，你可以看它这里面支持了这么多的语言，也就是说如果你写一个 python 的 程序，你也可以通过这样子的形式，右键 on code 的， 就把这个你写的程序给运行起来啊，这个是非常方便的，在 vsco 的 里面。好了，这就是本期的内容，给大家做一下总结。第一，什么是 vsco 的 插件，你只要记住它是在 vsco 的 里面单独安装的一些小的扩展啊，它是一个小的程序，类似于微信里面的小程序 啊，理解这个就可以了。第二的话就是我们常用的有哪些呢？这节课我只给大家去介绍两个，第一个就是这个中文啊，你可以下来去安装一下。第二就是这个 code runner 啊，怎么去运行你写的代码啊，这个是非常方便的， 应该说是 vs code 里面必备的一个插件。下一期我们再来介绍一些其他常用的一些插件，有了这些插件，你的 vs code 的 功能就会极大的增强。好了，本期的视频就先讲到这里，如果觉得有用的话，欢迎点赞收藏、转发，如果想要学习 ai 编程，欢迎持续关注我们的视频。

一般安装哪些插件？说一下。我的插件安装不多，你要是咱们学员的话，你在群里边问一下，估计比我的插件多。我的插件不多啊，我的插件很少。这个是一个正则的啊，有的时候一些正则我不会写了，我就从这里面查一查。呃，这个是从一名标签的。 这个东西不管它啊，这是一个书签儿。这 c 加加不管它啊，这个 c 的 不管它。这个东西好用啊， code runner， 它是用来直接运行代码的啊，就在 vs code 里边直接运行代码。 呃，这是一个画图的工具，下边是一些 english link， 这也是个画图工具。这就是经常同学问那个 ai 工具啊，我用的是 compiles。 这是一个图片的预览啊，预览图的，在 vsco 里边可以预览图片的表格里写个一比九元素是吧？给他一个 s r c 地址，那么指着这个地址呢，就预览图片。这是类似的一个自动提示的插件，这是一个路径自动提示的 creator， 应该都知道吧。这个是 project manager， 这个是可以把你当前的工程啊，相当于是进行收藏啊，放到相当一个收藏夹。这个是一个正折的预览，这是可以在 vs code 的 里边远程打开这个 github 的 仓库的。这个呢，是当时我教同学们那个网络的时候用的一个插件啊，主要是 在 vs code 的 里边进行一些。呃，翻译的啊，比如 s code 里边进行一些翻译成 css 啊，主要是教学用的。这个东西生态环境开发的时候一般很少用。 呃，这是那个 vtes 啊，有一期搞的一个测试框架，没啥了，你看我就没了。这是样配置文件的，这是那个 c s 原子化的，原子化提示的没了。我都用的很少啊，我插件很少。

哈喽，各位小伙伴，欢迎来到 ai 全站互联网开发系列，今天我们用 v s code 搭配 codex 插件和 esp 三二 s 三开发版， 全程靠 ai 完成互联网全站开发。第一期我们先搞定整个项目的核心云端大脑，也就是加网后端服务。本次项目使用的是 g p d 五点三 codex 模型， 做任何项目第一步永远是定好系统框架， 所以我先把提前写好的提示词复制给 ai， 这里给大家说一个 ai 开发的核心技巧，提示词就是 ai 的 岗位说明书，你写的越清楚， ai 就 越明白自己要扮演什么角色， 遵守什么开发规范，输出什么标准的内容，从根源上避免它跑偏。 在 ai 阅读提示词的过程中，我们可以来写项目需求，这里有个新手必记的重点需求，一定要写得充足详细， 并且必须明确要求 ai 分 阶段推进项目，不然它很容易一次性输出一堆杂乱的代码和文档，后续根本没法维护和修改。同时我们要要求 ai 输出 md 格式的需求文档， 一来方便我们后续随时查看，二来就算是换了对话框，换了模型，也能直接附用这个文档，不用重新写。 我们整个项目的开发几乎都是在 vsco 中完成，这里有两个必须安装的插件和一个可选安装的插件， 大家到时候别装错漏装。第一个是 esp idf 插件，我们后续给 esp 三二 s 三写的硬件代码，全靠这个插件才能编入到开发板里，是硬件开发的核心，必须装。 然后这里有个可选安装的插件是 springboard extension pack， 这个是额外增强的插件，不是必须装的。如果你想要在 windows code 中 呃运行这个 springboard 的 话，就可以选择安装。然后第二个必须安装的是 extension pack for java， 这个是加瓦开发的全家桶插件，我们在 vs 扣中写加瓦 pos springboard 的 项目，这个插件都是必装的。 呃，这里也是犯了个小错误，刚刚给 ai 提示词的时候忘记说明 md 文档要导出来，所以我们现在手动创建一个 doc 文件夹，然后跟 ai 补充要求，将文档统一放在这个文件夹里。 等框架文档生成好之后，这里有个小技巧，一定要新建一个全新的对话来继续开发。 这么做有两个非常关键的原因，第一，把项目框架后端开发，硬件开发，这些不同模块的内容放在不同的对话里，后续找内容改需求都不会乱。 第二，单轮对话的上下文内容太长，会严重影响 ai 的 输出质量，说白了就是 ai 会变笨，输出的内容不符合预期。 做好这些准备，我们就可以正式开发 java 后端了。我把提前写好的 java 后端专属提示词复制进来，打开 codex 的 计划模式。接下来我们就可以放手让 ai 自主执行开发流程了。 这里 ai 弹出了一些选项让我们选择，大家根据自己的项目情况自行选择就可以了。 ai 给我们返回来一个第一阶段的实施计划，我们不用逐行看，只需要粗略检查一下核心逻辑，如果符合我们的要求没有问题，直接同意实施计划，让他继续执行就 ok 了。 后端代码生成完毕以后，我们一定要先启动 docker， 再启动后端项目，我们的 mac 数据库是通过 docker 来部署的， 多客不先启动数据库就起不来，后端就会报错，百分百会提示数据库连接失败。大家一定要记住这个先后顺序。 启动完多客，我们就可以在对话框里问 ai 这个项目的数据库名、账号、密码和连接地址是什么。拿到这些信息，我们就可以用 net 等工具直接查看我们的数据库， 并把 ai 给的 sketch 文件在数据库中运行。 一切准备就绪，我们就点击 vsco 侧边栏的 springboard dashboard 来启动我们的后端项目。如果面板里没显示项目，我们可以先尝试刷新，刷新还是不行就清理一下 id 一 的缓存，等待依赖和项目信息更新完毕。 好，所有准备工作做完，我们直接点击运行， 报错了没有关系，做开发没有不踩坑的，尤其是 ai 生成的项目，我们可以先尝试自己解决这个报错，这样可以节省一些 token。 vsco 里的报错信息不够直观，我们切到 idea 里面， 我们可以先尝试一下去刷新 mate 依赖，看看是不是依赖没有下载完全导致的爆出。然后我们点击运行， 现在看来是报错的第二步，我们可以去查看一下项目是不是没有开结注解处理。很多时候关于 loanbook 的 报错都是因为项目中的注解处理没有开启， 注解处理已开启，看来并不是这个原因。 我们直接把控制台里完整的错误信息复制给 ai， 让 ai 帮我们定位问题，并给出解决方案。 ai 这次给的解决方案与我刚刚的操作一致，所以并没有什么作用。 我突然想到一个问题，是不是我打开 id 以后，他把我的家宝版本给更换了， 我们把 java 版本给固定到 java 时期试一下， 结果还是报错。我们把包周信息复制给 ai， 把退利模型换成超高， 这时候发现报错信息全都消失了，我们再返回 idea 去运行一下，当然你也可以选择在 vsco 里面运行。 好的这个后盾也是成功运行起来了。 到这里我们 ai 全站互联网挑战的第一期也是完美收官了，下一期我们继续用 ai 去搞定 red is 缓存，想看后续的小伙伴们请期待下一期，我们下一期再见！

挑战每天讲透一个 ai 知识点，今天是 codex 快 速安装好，然后第二块的话，我们就来讲一下这个 codex 它的一个快速安装啊，首先的话是命令行的一个安装啊，这个的话是用的最多的一个版本，所以首先我们来讲一下啊，因为这个命令行的话，是所有操作系统它都可以去用的啊，不管是 mac 还是 windows 它都可以去用，那么它的安装方式也非常简单啊，大家直接把这个 npm 命令给 信一下就可以了啊，当然前提的话，大家要去装一下 node js 啊，这个我就不多说了，这个很简单啊，直接去搜这个 node js 的 这么一个啊软件名称，然后跳转到官网，选择对应的操作系统版本啊，比如说 mac， windows 啊，然后选择下来，一步步点安装就可以了。安装完之后， 大家在这个命令行窗口啊，我们打开 cmd 执行一个 m p m 杠 v， 如果大家能看到一个版本号的话啊，或者是执行 node 杠 v， 能看到版本号，就说明咱们这个 node js 它的一个环境是 ok 的 啊，就没就装好了啊，装好之后的话，大家直接把这个命令复制一下，然后粘贴到这个命令行里面， 那让它去安装就可以了啊，我之前是因为装过了啊，所以这里提示的话啊，因为一些网络原因，可能会要 不同的时间啊，那么这里面的话，如果大家安装了很久的话，你可以去设置一下 m p m 的 它的一个仓库，把它设置到国内的一个仓库，因为它默认的话连的是国外的一个仓库，可能下载会比较慢一些，所以大家可以去调整到国内的这个镜像仓库， 加速它的一个下载。 ok， 这个就是啊 m p m 的 一个安装啊，一般来说安装这个的话基本上就是一两分钟左右啊，基本上都可以装好好，然后是可以用这个 homebrew 啊，也这个也可以去装啊，基本上我们用 m p m 会比较多一些，好，装完之。

ai 写小说软件的安装，我们今天拿阿里的林马来做一下测试，我们先搜林这个直接打开下载就可以，按照你需要的版本直接下载 打开这里基本上都是下一步，没有什么特别的需求，我们除了这个安装位置，那不要装在 c 盘， c 盘东西装多了麻烦了，换个其他的盘装一下就可以了，下一步就可以完成了。 这里说一下我们的这个插件，它是基于微软的 vs code 来做的，领马、腾讯的 code body， 它全都是基于微软的这个开发的，所以它全都能用。每个平台它只是优化了自己的这个 ide 工具都可以用， 但是他会稍微有一点差别，但大差不差的，不会影响你使用。所有的功能基本上都会有，大家不用去纠结说哪个一定好，哪个一定不好，只要大家使用习惯，那都是一样的， 包括一些国外的这些 id 工具都是可以用的。现在已经安装完成了，我们直接运行，这个是我们安装过的，大家打开可能不是这样的， 这里有一个首选项领码设置，大家可能装上去以后是英文的，这里选这里，这里选一下中文就可以了。还有一个编辑器的模式， 他会有两个模式，你选这个就可以了。是安装我们插件在这个位置有一个扩展， 搜一下挖掘就可以找到这个点安装，我们这里是卸载，因为我们已经装过了，安装完成了，就是这样的。现在你就可以看到章节生成，现在增加了一个批量自动化，你可以设定章节数，然后一次性生成 质检官大纲编排，现在这里边的内容是没有的，还有这个提示词模板，有各式各样的模板，包括一些作家的仿制写作手法啊，写作风格这种题材 都是有的，大家可以随便用。还有我们的素材库和创作融合，这个是别人没有的，是一个非常好用的东西，它可以让你的风格和 对标作者的风格进行融合。我们下一次讲就是这个 api 的 配置，我们的插件是支持所有的 api， 所有的 api 包括本地的都可以使用，求大家关注。

cloud opus 四点六的无线免费使用，桌面上看到的是打开的 versus code， 我 们可以点击你是什么模型来和模型进行对话，可以看到 ai 给出的回复是 cloud opus 四点六，这个模型是市面上目前最稳定，最高级最智能的模型 插件的安装非常的简单，只需要安装一个 versus code， 然后点击左侧栏的插件，将我们在 g 二零二六 com 网址里面下载的免费 ai 插件， 就是桌面上这个 versus x 文件，直接点住拖页进来就可以一键安装，安装好以后，点击下面的，我们直接就可以在模型里面和 ai 进行对话。 这款插件非常的智能高效，欢迎下载免费使用三连视频，私信一下用户名可以获得更多的积分，默认免费注册就可以免费使用，感谢大家的观看。

写代码还在用记事本和传统 id， 想体验 web coding 却找不到射手工具？今天给大家介绍一款全球超过一千四百万开发者都在使用的神器， visual studio code， 简称 vs code， 它免费开源，跨平台，被开发者戏称为宇宙第一编辑器。接下来几分钟带你从下载到上手，彻底掌握这个开发利器。 v s code 是 微软由二零一五年推出的免费代码编辑器，它本质上是一款编辑器，而非完整 id。 但正因如此，它才够轻量、够快。它的核心优势有两点，免费和高扩展性。 它的插件市场有超过五点二万款插件，覆盖几乎所有编程语言、开发框架和部署场景。想要什么功能，装个插件就行。通过其丰富的插件生态，可以扩展为全能开发环境。 通过插件如 github 聚合 tree， 可扩展为 ai 辅助工具。体验 web coding， 通过插件如 ssh， 可扩展为远程开发程序。你可以直接远程连接服务器，比如实验室的机载电脑与服务器像操作本地文件一样流畅，彻底告别繁琐的文件传输流程。 无论你是初学者还是专业开发者， vs code 都值得成为主力工具。接下来我们手把手安装配置，打开浏览器，搜索 vs code， 点击进入官网，或者直接认证官网 code visual studio 点 com， 点击首页这个屏幕的下载按钮， download for windows v s code 会自动识别你的系统， mac 和 linux 用户也能一键下载。下载完成后，打开安装包，勾选，我同意此协议。下一步 选择安装路径，我这已装到 f 盘。下一步在选择附加任务页面，可以勾选创建桌面快捷文件和添加到 pass， 这会让你后续在终端中直接输入 code， 就 能够打开编辑器 确认信息。点击安装，等待进度条跑完后即安装成功。首次打开 vs code 界面，非常清爽。重点看左侧活动栏，五个核心功能， 资源管理器、搜索、源代码管理、运行调试以及最重要的扩展商店。这里其他的部分是我后面安装使用到的，其他插件可以略过。 ms code 的 默认语言为英文，如果你更习惯中文界面，可以先安装中文语言包， 点击扩展图标，搜索 chinese， 点击这个位置来安装。我这里已经安装过了，因此图标并不一致，安装后按提示重启软件即可。如果有远程开发的需求，同理搜索 ssh， 这是微软官方插件， 点击安装。此时左侧活动栏会多出一个远程资源管理器图标，点击它移动到 s s h 的 加号处，顶部会弹出输入框，让你输入 s s h 连接命令。 我们可以在要访问的服务器或电脑的终端，通过 if config 或者 ip config 查看其 ip， 输入 ssh 用户名 at 连接服务器或电脑的 ip， 回车再回车。 然后我们移动到刚刚添加的 ip 处，点击旁边的箭头符号，选择对应 ip 的 电脑系统，这里我选择 linux， 再选择继续输入密码后回车等待连接。连接成功后，我们就能够远程访问电脑或服务器，查看和更改其中的文件内 容，同时也能够远程打开终端，对其进行相应的操作。其余插件的安装也是类似不折。 mscode 的 强大在于它的插件生态完全按需定制，根据不同开发需求，结合我的个人使用经验，推荐几组好用的插件， python 开发 python 官方插件加 plugins jupiter， c 或 c 加加开发 使用 c 或 c 加加官方插件。 cmake tools 用于翻译和配置 code runner 用于一键运行接入式或单面级开发使用 platform i o i d e 跨平台开发神器，支持 arduino， esp 三二等和 q assistance， 兼容 q 项目。借助 vs code 的 wsl 官方插件，你可以在 windows 环境下进行 linux 开发， 再装上 s s h 官方插件，一套工具便可以轻松搞定。跨平台与远程服务器开发 ai 编程工具可以使用 gitopilot 或者国产替代的 chair。 顺便一提，最近大火的 coser 本质上就是基于 vs code 的 深入定制的，所以学好 vs code， 得以同时掌握了 coser 的 基础操作，大家可以根据实际开发需求打造最适合自己的专属编辑器。 如果本期内容对你有帮助，欢迎借三连关注转发让更多开发者看到，也欢迎大家在评论区和弹幕里分享自己的开发环境和保障插件，我们下期再见！

很多小伙伴说在 vs code 中写代码没有错误提示，那是因为你没有开启这项配置。如果你之前使过派叉的话，你会发现，如果这个代码像这个整形和字母十二型相加的时候，这里是不允许的，它会有一个黄色的波浪线给你个提示。但是在 vs code 中，同样代码这里却没有任何提示，这是为什么呢？ 其实我们只需要设置一点就够了。首先在 biosgo 中，我们需要添加一个插件，叫做这个 p y lens， 把这个插件装上，这个插件的功能非常强大啊，因为它这里写着 is powered by p y write。 而这个 p y write 呢，它是微软的一个静态类型检测的工具，非常强大。这里我已经装过了，如果没有的话，你点击这个 install 进行安装。 然后我们点击这里的 futures， 这里有个 settings， 我 们可以看到它有这么多的配置。为了提升这个用户的使用体验，所以有一些配置它默认的是 false， 也就是没有开启， 那么我们这里就把它开启。 ctrl 加 p， 然后我们输入 settings， 找到配置文件，这是自动导入的，我设置为处了。然后还有一个，找到这一条 python analysis type checking mode， 它有几个值， basic， standard 和 strict。 这个 basic 它实现这里的检测，然后 standard 呢，实现其他的这些检测，这个 strict， 那 么它就会实现这些检测。 这里呢，我们就使用这个 basic 就 够用了。复制一下，然后在这个 setting the jason 这个文件中继续这样写，给它设置为 basic， ok， 保存。然后再回到我们之前的代码，这个时候你会发现这里有错误提示了，有一个红色的波浪线。此外呢，这里还有更多的配置，小伙伴可以根据自己的实际情况使用起来。

pencil 对 决 figma， 谁才是未来的 ui 设计工具？废话不多说，今天我们直接上硬核 pk。 首先我们打开 figma make， 告诉他需求，简单的描述下页面和风格，同时选择 g m i 三点一 pro 模型 发送出去，可以看到正在生成中，绘制过程稍微有一丢丢慢。好了，生成的效果出来了，看着比较简单，页面可以满足基本需求，而且直接自带交互，极其丝滑。但我想试试 cloud code 的 四点六模型效果，我再次生成一遍。 ok， 生成出来了 效果更好，推荐大家多尝试。这里再打开 python， 我 们可以选择官方内置的各类规范，不用担心没有规范而乱套了。这里我们选性价比更高的 g p t 五点四模型， 开启多线城，也就是多个 ai 同时进行。再将同样的需求给到 python， 我 们再点击开始生成，可以看到 python 正在批量生成中，注意看有六个 ai 打工人同时在帮你干活，可以看到每个 ai 工人都在分析和工作中，是不是好像在掌控着一群人。 并且生成的 ui 界面很专业，一步步的把每个板块生成出来了。设计出来的版式与功能很细致，但画面的效果不如斐格玛丰富， 这时我可以随意拖动，想改点小细节，手动微调，非常方便。这点就比较类似斐格玛的编辑功能。在右侧可以看到与斐格玛一样的编辑区，自由度很高，掌握感非常棒，这点盘搜完胜。相比之下，斐格玛没有官方的内置规范，如果想用一套规范还得自己去添 家，比较麻烦点，生成的 ui 想手动修改，得一个个复制，复制出去后想再次让 ai 编辑就比较费劲了。但飞格玛 mac 可以 单独让 ai 或手动修改某个点， 这个功能还是非常便捷的。但别急，开发交付才是重头戏。告诉潘素，帮我开发出来， ai 工人就能直接帮你开发。可以看到 ai 开发工人正在进行中，飞格玛更狠，生成出来及时预览交互效果， 一键发布出去就是前端 html 代码，这里我们预览一下，效果非常 ok， 带有一定的交互，基本一比一还原了。另外在设计图右键发送给 mate， 也能一键生成前端代码，一比一完美还原，设计开发一体化。综合来看，飞格玛目前依然抗打，而像素胜在直观，速度快，质量高，易上 手。我的建议是，完全不懂设计的小白，无脑充，像素快，小白专属专业设计师依然是飞格玛， 它的生态和 ai 能力还是很 ok 的， 但也强烈推荐试试 pencil。 最后需要 figma 和 pencil 的 使用步骤。评论区留言记得点赞、关注、收藏！我是大木，关注我，跟上 ai 步伐！

好，介绍两个非常好用的正则插件啊，因为以前也提到过，但后边还是有同学在问一个呢，是 anyru 啊，这东西如果说你不太会写正则的话，你可以利用这个插件啊，可以帮你非常方便的生存一些常见的正则表达式。安装好了过后呢，你在任何需要正则的地方啊，你打开这个 mini 工具啊， 这里输入 z z 冒号啊，就可以选择任何一个常见的正则了啊，比方说，咱们随便找一个吧，手机号吧， 手机号啊，你看一回车，他就把正则给你生成出来了啊，这第一个插件好，第二个插件呢，叫做 ricas privuur 啊，这是问的同学比较多的。这个玩意呢，就是安装完了过后呢，他在你代码里边任何一个正则的位置，你看这里是个正则表达式是吧，它上面呢就会出现一个按钮，这个按钮就是这么来的。第 点，这个按钮过后呢，还可以去测试你的正则是不正确的啊，你可以去测试一下，表示这是个手机号的正则，对吧，你写一个这么一个手机号。好，你看一下，当你写出一个正确的手机号过后呢，它这里会高亮显示，表示这里的正则呢是正确的。那反之呢，如果说你这里正则不正确的话，那你看，那么这里就测试不通过，对吧，它是用来测试的。好，就介绍这么两个插件啊。

大家好，今天给大家录一下 windows 你 要怎么去安装 cloud code 的 教程，因为我发现了一个非常牛的浏览器，就是你只要下载一个 tab， 它就可以帮你把前面的 gedit 删除 vs code 和 cc switch 这四个软件全部都下载，你就不用再一个一个去官网找到对应的软件和你的版本了。 你只要下载一个这个浏览器，买模型在终端去验证，最后打开 vsco 去安装插件，基本上你就可以一条龙下来，全部无痛安装，基本上二十分钟之内我觉得是没有什么问题了，而且应该很丝滑。 首先你下载了他笔之后，你去新建一个标签页，然后把左下角这个智能代理打开，然后你去复制这样的一个词，就比如说我是 windows 电脑，我要下 cloud 帮我下载前置的软件，分别是这四个，一步一步让他帮你对应下载，我给大家演示一下，你看 他现在就直接帮你跳到这个页面去下载了，他就直接操控你的这个浏览器页面去帮你下载对应的软件。你所有的这四个软件建议都默认安装在 c 盘，不要去变动，你看他给你跳到 note j s 很 快，基本上这一个一个页面跳转下来，五分钟吧，应该能给你解决掉。如果下载要时间的话，那就不说，反正基本上这一个都是你不用去动手，你看他这边光标自己会给你移动。好，你看他会给你滑动， 你看他这边会自动给你安装好。这边我就不演示了，这边我就演示到这一边就差不多了，你看这边下载之后，他就会给你显示，你就直接默认安装到你的安装包里面就行了。那接下来的话就是你要去 模型，你去买 mini mix， 智谱其实会比 mini mix 比较好，智谱的话会比 mini mix 更好用一些，但是智谱特别的难讲，所以你买 mini mix 就 够了。 mini mix 打开网页，这个定了套餐往下滑，这边有个连续包月， 这边有一个二十九块钱的订阅套餐，买这个就行了，就够新手用的。你买完之后会有一个 api， 你 买完之后会有个 api 的 秘钥，你把这个秘钥去复制下来，找一个地方，记着打开 cc switch， 右上角 添加，这边找到迷你妹斯的模型供应商，把你的 api， 把你的 api key 粘贴到这里添加就行了。然后打开左上角这边的两个按钮，要打开啊，一个是应用到 cloud code 插件打开和跳过 cloud code 出示安装确认打开， 打开完之后呢？ c switch 这一边就是配置好了。第七步就是你要在终端去验证好，看你前面的那些东西都有没有安装成功。 首先你要去验证这一步，打开你 windows 的 终端，可以按 win 加 r， 然后输入 cmd， 就 会跳一个黑色框框出来，然后输入这两行指令 node 空格杠 v， 然后如果跳出版本号就是安装成功了，然后再输入 npm 空格杠 v， 跳出版本号，就是说明你安装成功了。接下来还是在这个终端里面把这一行代码输进去。这个就是你要在终端里面去安装你的 card code， 然后他会开始滚进度条，等他下载完成之后， 关掉终端，重新打开一个终端的窗口，输入 card code 空格两个杠，然后 v 选， 如果有跳出一个版本号，就说明你在你的这个电脑里面这个 card code 的 插件已经安装成功了。然后你再去 vs code 里面去操作，打开 vs code， 点击左边的这一列，有一个四格的这个 扩展插件，然后去输入 cloud code 去安装。我这边已经安装好了啊，然后安装好之后呢，他会有出现一个烟花的图案，然后你在这个页面去问你是谁，然后他会说我是 cloud code 的， 然后这一类的话，就说明你安装成功了。然后有一些人他这个 vs code 它是英文页面嘛，对吧？你刚开始的时候你都是默认英文页面，你看不懂怎么办？你这边搜索也是这个扩展商店，你搜索 chinese， 然后它会有一个 chinese 的 插件，然后你安装完之后，重启一下，你的 vs code 的 这个页面就变成了中文，而不是英文。 讲一下这个报错的问题，有一些朋友他会出现这一个页面，我当时也出现过，怎么去解决？首先全部验证一下前面的提示是不是都出现了版本号终端那边有没有问题，如果验证没有问题， 你去搜可乐扣的，然后打开它的这个齿轮图标，然后找到设置去把这勾起来，第一个、第三个和第四个勾起来，它勾起来之后拧起一下可乐扣的，基本上就没有什么问题了。 如果还是不行，你就去打开你充值的那个 mini max 的 页面，找到余额，往这个余额里面充五块钱左右， 然后再去重启 cloud code， 基本上就没问题了，就能解决了。我当时就是这么解决的，重启一下就可以打开用了。今天差不多就讲到这边，过两天我再去把 mac 的 教程录一遍，拜拜。

如果你刚开始学 java， 或者你已经安装了 vs code， 却还不知道怎么把它变成一个可以编辑运行和调试 java 程序的开发环境，那么这期内容一定非常适合你。 想要在 vs code 中进行 java 开发，其实很简单，就四步，安装和配置， jdk 安装、 vs code 安装这二把插件。 vs code 中配置 java 运行环境、 jdk 的 安装与配置以及 vs code 的 安装前面已经讲过了，接下来 就进入下一步。在 vs code 中安装 java 插件，打开 vs code， 点击左侧活动栏中的扩展按钮，然后在顶部的搜索框中输入 extension pack for java， 找到之后点击安装。 安装成功后，欢迎界面提示用户要安装 jdk， 因为前面我已经装好了 jdk， 这里就不再单独讲 jdk 的 安装了。接下来只需要在 vsco 的 里面把 java 运行时的 jdk 环境配置好，后面就可以正常创建运行和调试 java 项目。 在菜单栏中点击文件，然后选择首选项，接着选择设置，打开设置界面，点击右上角打开设置， 在配置文件中设置 java 运行环境。 name 表示 java 版本。 path 填你的 jdk 安装路径， default 冒号处就是设为默认，如果路径不一样，记得改成你自己的保存配置。重启 vs code， 让它重新识别 java 运行环境。点击左侧活动栏中的资源管理器， 点击左侧创建 java 项目。选择 nobel tools 创建普通 java 项目。选择项目保存位置， 这里我把项目位置选在桌面，然后点击 select project location， 输入项目名称，输入完成之后按下 enter 回车键，确认创建项目。稍等一下， 项目结构会自动生成，如果这时候弹出了是否信任此文件夹的提示框，直接选择是我信任此作者。项目创建完成之后，打开 scr 文档， 这里已经自动生成了 main 方法，同时也写好了默认的输出代码，在代码区域点击右键选择 run java， 运行成功之后，下方终端会显示程序输出结果，这里已经输出了 hello world， 说明程序已经成功运行。如果这期视频对你有帮助， 记得点个赞收藏一下，如果你还想看，我继续分享更多软件编程技术，别忘了关注我！