HTML AI 编程助手
AI 技术的飞速发展正在深刻改变开发者的工作方式。在 HTML 网页开发中，我们常常被大量细微却高频的重复操作降低效率。因此，AI 的出现可以改变我们的编程方式与提高效率。
AI 对我们来说就是一个可靠的编程助手，给我们提供了实时的建议和解决方案，无论是根据图片生成前端页面、快速修复错误，或者查找关键文档和资源，AI 作为编程助手都能让你事半功倍。
今天为大家推荐一款 VSCode 的插件 Fitten Code，Fitten Code 是由非十大模型驱动的 AI 编程助手，它可以通过 Agent 智能体自动完成大型项目中的功能、自动生成代码，提升开发效率，帮您调试 Bug，节省您的时间，另外还可以对话聊天，解决您编程碰到的问题。
以上是使用 Fitten Code 的 Agent 功能实现的后台管理网站页面的效果。只需要输入简单的命令就能轻松搭建复杂且自由的 HTML 结构！
除此之外，Fitten Code 免费且还支持 80 多种语言：Python、C++、Javascript、Typescript、Java 等，能够满足不同身份背景的开发者使用。
目前对于 HTML 语言，Fitten Code 支持在多种文本编辑器或 IDE 上使用，接下来我们来详细看看 VS Code 上的安装与使用：
1、安装
如果您已经安装 VS Code 且版本大于等于 1.68.0，请直接跳过此步骤，否则请点击[下载]前往官网下载安装 VS Code。
打开 VS Code，点击左侧 Extensions（扩展）按钮：
在搜索框中搜索关键字 Fitten Code：
在搜索结果中点击 Install：
登录注册后即可开始使用：
2、智能补全
打开代码文件，输入一段代码，Fitten Code 就会为您自动补全代码：
按下 tab 键接受所有补全建议：
按下 Ctrl + → 键(mac 系统为 Command + →)接收单个词补全建议：
按下 Esc 键取消补全建议
代码智能补全分为三种：普通补全、整项目感知补全、编辑式补全。
具体更详细的补全用法的技巧可详见以下视频：
3、Agent 自主编程智能体
自主编程智能体具备强大的主动执行能力：
-
根据任务需求智能调用工具，主动分析背景信息；
-
自主拆解复杂问题，通过多步骤迭代精准完成任务；
-
显著提升编程自动化效率与精细度。
在使用该功能时，用户只需要输入需要完成的开发任务，例如"将顶部导航栏的颜色改为黑色"、"修改按钮将其改为下拉框组件"
等，智能体就可以根据任务调用不同工具，例如："读取文件夹"、"读取文件"、"修改文件"等逐步完成开发任务。
可以使用此 Agent 模式，让其逐渐优化文件夹和代码结构，提高项目的可维护性。
在 Agent 执行的过程中，涉及到创建和修改文件、执行终端命令的操作时，点击"同意"或"拒绝"即可。
需要和智能体结束对话时，点击右上角菜单中的："回到首页" 即可。
更多关于 Agent 的使用技巧和方法可以参考以下视频：
添加 Rules
在开发程序时，用户项目往往有着各种各样的要求，例如 html文件命名统一采用大驼峰、必须使用语义化标签，禁止滥用div标签、必须在 中设置正确的 和 <meta name="description"></code> 等等要求，如果 Agent 不知道用户项目定制化的特殊要求，用户可以将这些要求写入规则文件，进而增强 Agent 的代码生成规范和行为规范。</p>
<p>例如：在 Rules 中添加项目的背景介绍和技术栈，Agent 在执行文件创建、重命名时能够更加符合项目规范。或者在 Rules 中添加代码风格要求、Agent 在生成代码时能够更加定制化。您甚至可以告诉 Agent、每次在执行任务前都先阅读一遍指定目录下的所有 README 文档，进而更改 Agent 的行为。</p>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608147293.png" alt=""></p>
<p>添加 rules 后，会自动出现 Rules 文件编辑界面，在此处写入文字，每次调用 Agent 智能体时，智能体将自动读取已写好的 rules 文件。进而增强对当前整个项目的理解能力，生成更规范、符合项目要求的代码和回答。</p>
<p>更多关于 rules 的使用方法可以参考如下视频：</p>
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114628600270868&bvid=BV1jJTszwE28&cid=30301294053&p=1" width="100%"
style="min-height:360px; height:56.25vw; max-height:720px;"
scrolling="no"
frameborder="no"
allowfullscreen="true">></iframe>
<h4>添加 MCP</h4>
<p>用户可以使用 MCP 功能来给 Agent 增加额外的自定义工具。例如"Excel 读取工具"、"github 服务"、"bing 搜索服务"等。使得 Agent 具有自动操作并修改 Excel 等非代码文件的能力、自动调研开源框架和新技术栈的能力、联网搜索某新概念的能力等等。</p>
<p>关于 MCP 的详细使用方法、以及实战技巧可参考以下视频：</p>
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114992682637607&bvid=BV1hztmzuELp&cid=31567120097&p=1" width="100%"
style="min-height:360px; height:56.25vw; max-height:720px;"
scrolling="no"
frameborder="no"
allowfullscreen="true">></iframe>
<p>通过 MCP 和 Rules 的组合使用，可以极大地提高 Agent 的能力，使得 Agent 能够像一个智能助手一样完成庞大项目的功能开发任务。</p>
<h3>AI 问答</h3>
<h4>基础用法</h4>
<p>点击首页左下角的 Chat 模式，开始进行对话。</p>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608149832.jpg" alt=""></p>
<p>当用户选中文件中的代码段再进行对话时，Fitten Code 会自动引用用户所选中的代码段，此时可直接针对该代码段进行问询等操作：</p>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608145181.png" alt=""></p>
<h4>右键代码快速询问</h4>
<p>用户可能选中代码后经常会进行一些高频的提问，例如"这段代码是什么意思"、"帮我给这段代码添加注释"、"帮我优化这段代码"等等。因此用户可以直接通过选中代码后右键，找到 FittenCode 右键选项点击即可立刻调用 FittenCode 智能对话。</p>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608141255.png" alt="IMG_277"></p>
<p>通过这些常用对话的右键快速调用，可以极大地提高开发效率。</p>
<h4>常用语快速输入</h4>
<p>Fitten Code 对话框中具有一项特色功能：常用语，它可以让用户快速地在对话框中输入用户经常重复输入的内容，进而构建一个更加强效的提示词、更加全面的上下文环境。</p>
<p>具体关于常用语的实战技巧可以观看如下视频：</p>
<p><iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114652373587528&bvid=BV12iTez3E9U&cid=30402152983&p=1" width="100%"
style="min-height:360px; height:56.25vw; max-height:720px;"
scrolling="no"
frameborder="no"
allowfullscreen="true"></iframe>
</p>
<h3>常见问题</h3>
<p>如果 VSCode 远程服务器 remote 无法连接外网时，请点击左下角 <code>⚙</code> 按钮，再点击设置：</p>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608149651.png" alt="IMG_277"></p>
<p>然后在设置页面点击右上角 \"打开设置(JSON)\":</p>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608147252.png" alt="IMG_278"></p>
<p>最后只需在在弹出的 settings.json 文件中添加以下内容即可:</p>
<pre>"remote.extensionKind": { "FittenTech.Fitten-Code": ["ui"] }</pre>
<p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608144501.png" alt="IMG_279"></p>
<p>更多内容参考官网：<a target="_blank" href="https://code.fittentech.com/">https://code.fittentech.com/</a></p>
<p>支持以下 4 种编辑器与开发环境：</p>
<ul>
<li><a target="_blank" href="https://code.fittentech.com/desc-vscode">VS Code</a>：本文会详细介绍</li>
<li><a target="_blank" href="https://code.fittentech.com/tutor_jetbrains_zh#1">JetBrains IDE 系列（包括 PyCharm）</a></li>
<li><a target="_blank" href="https://code.fittentech.com/tutor_vs_zh#1">Visual Studio</a>：本文会详细介绍</li>
<li><a target="_blank" href="https://code.fittentech.com/tutor_vim_zh#1">Vim</a></li>
</ul> <!-- 其他扩展 -->
</div>
</div>
</div>
<div class="cate_right">
<script src="https://www.520ads.com/Public/js/getGoods.js?site_id=9&size=300*300&sign=6f4922f45568161a8cdf4ad2299f6d23"></script>
</div>
</div>
</div>
<div class="clear"></div>
<input type="hidden" id="uid" value="">
<div class="links w">
<h2 class="h_title"><span><a href="/" target="_blank">[ 申请 ]</a></span>友情链接：</h2>
<div class="links_text">
<a href="https://jjj-com.com" target="_blank">传奇私服</a>
<a href="https://www.xn--6kr41swoa.tw" target="_blank">南島屋</a>
<a href="https://www.my103.com/ml/" target="_blank">My命理学</a>
<a href="https://www.kuailian-app.com.cn" target="_blank">快连vpn</a>
<a href="https://www.kuailian-go.com.cn" target="_blank">快连vpn</a>
<a href="https://didi.seowhy.com" target="_blank">搜外友链</a>
<a href="https://www.biquge.mobi" target="_blank">笔趣阁</a>
<a href="https://aisi-zhushou.com" target="_blank">爱思助手</a>
<a href="https://clashx.cc" target="_blank">ClashX教程</a>
<a href="https://www.huihuabaobao.com" target="_blank">绘画宝宝</a>
<a href="https://www.peiyinbaobao.com" target="_blank">配音宝宝</a>
</div>
</div>
<footer>
<div class="box">
<ul class="footer_nav">
<li><a href="" target="_blank">关于我们</a></li>
<li><a href="" target="_blank">服务条款</a></li>
<li><a href="" target="_blank">广告服务</a></li>
<li><a href="" target="_blank">联系我们</a></li>
<li><a href="" target="_blank">网站地图</a></li>
<li><a href="" target="_blank">免责声明</a></li>
<li><a href="" target="_blank">WAP</a></li>
</ul>
<p class="copyright">技术支持：
<a href="/">武汉快勤科技有限公司</a>
<a href="/">XML网站地图</a>
备案号：<a href="http://www.beian.miit.gov.cn/" target="_blank">鄂ICP备18027844号-9</a>
<script type="text/javascript" src="//js.users.51.la/21769969.js"></script>
</p>
</div>
</footer>
<div class="modal"></div>
<div class="login_box">
<div class="login_title">
立即登录/注册
<img src="/Public/images/close.png" class="login_close"/>
</div>
<div class="login_content" id="login_scan">
<img src="/Public/images/ewm.png" class="ewm" id="ewm">
<p>微信扫码登录</p>
</div>
</div>
<input type="hidden" id="wx_code" value="">
<div class="gotop"></div>
<div class="ajax" id="ajax"></div>
</body>
</html>
<script>
function tips(text,reload=0){
$("#ajax").text(text).fadeIn();
setTimeout(function(){
$("#ajax").fadeOut();
if(reload){
location.reload();
}
},2000);
}
function get_ewm(){
$.ajax({
url: '/home/login/get_wx_code.html',
type: 'post',
dataType:'json',
success: function (res) {
if(res.ret==1){
$("#wx_code").val(res.wx_code);
ewm_login();
$.ajax({
url: 'https://www.qingketang.net/mobile/login_ewm.html',
type: 'post',
data:"code="+$("#wx_code").val(),
dataType:'json',
success: function (data) {
$("#ewm").attr('src',data.ewm);
}
});
}else{
window.reload();
}
}
});
}
function ewm_login(){
$(".modal").fadeIn();
$(".login_box").fadeIn();
$("#login_scan").show();
$("#loign_form").hide();
$("#reg_from").hide();
}
function form_login(){
$(".modal").fadeIn();
$(".login_box").fadeIn();
$("#login_scan").hide();
$("#loign_form").show();
$("#reg_from").hide();
}
function form_reg(){
$(".modal").fadeIn();
$(".login_box").fadeIn();
$("#login_scan").hide();
$("#loign_form").hide();
$("#reg_from").show();
}
$(function(){
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象
win.scroll(function() {
if (sc.scrollTop() > 700) {
$(".gotop").fadeIn();
}else {
$(".gotop").fadeOut();
}
});
$(".gotop").click(function(){
$('html,body').animate({
scrollTop: 0
},600);
});
$(".modal").click(function(){
$(".modal").fadeOut();
$(".login_box").fadeOut();
$("#wx_code").val();
});
$(".login_close").click(function(){
$(".modal").fadeOut();
$(".login_box").fadeOut();
$("#wx_code").val('');
});
$(".login_btn").click(function(){
get_ewm();
});
var c=setInterval(function(){
if($("#wx_code").val()!=''){
$.ajax({
url:'/home/login/ewm_login_ajax.html',
type:'post',
data:{"code":$("#wx_code").val()},
dataType:'json',
success:function(data){
if(data.status==1){
$("#wx_code").val('');
$("#ajax").text(data.info).fadeIn();
setTimeout(function(){
$("#ajax").fadeOut();
location.reload();
},1000);
clearInterval(c);
}
},
});
}else{
}
},2000);
});
</script>
<script>
async function copyTextToClipboard(text) {
if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
// 可以尝试使用 fallback 方案
fallbackCopyToClipboard(text);
}
} else {
// 如果浏览器不支持 navigator.clipboard，则使用 fallback 方案
fallbackCopyToClipboard(text);
}
}
$(function(){
$("pre").each(function(i,e){
console.log($(e).offset().top);
var py=$(e).offset().top+10;
var px=$(e).offset().left+$(e).width()-60;
if($("#uid").val()){
var copybtn='点击复制';
}else{
var copybtn='登录复制';
}
$(e).after("<span style='position:absolute;top:"+py+"px;left:"+px+"px;padding:0 8px;border-radius:3px;z-index:222222;cursor:pointer;background:#333;color:#fff;' class='copybtn'>"+copybtn+"</p>");
});
$(".copybtn").click(function(){
if($("#uid").val()){
var text=$(this).prev('pre').find("code").html();
copyTextToClipboard(text);
$(this).text('已复制');
}else{
get_ewm();
}
});
});
</script>
