本集简介
双语字幕
仅展示文本字幕，不包含中文音频；想边听边看，请使用 Bayt 播客 App。
欢迎来到 Syntax。
Welcome to Syntax.
今天我们要聊的是，如何把 VibeCoding 那种靠感觉的写法，转变成基于事实和逻辑的确定性方案。
Today, we're going to be talking about how to turn VibeCoding's vibes into more deterministic solutions with facts and logic.
我们会深入探讨，到底有哪些工具可以加进你的开发流程，让 AI 不再只是瞎猜或随意假设。
We're going to be really getting into the depths of what are the different tools that you can add to your setup so that way AI is not just guessing or making assumptions or anything like that.
我们会讨论各种代码质量工具、bug 检测工具、格式化工具、代码检查工具等等。
So we're going to be talking about different code quality tools, bug finding tools, formatters, linters, etc.
同时也会讲清楚，该怎么有效使用这些工具。
But also the techniques in which you can use these things.
别只是说：‘嘿，帮我改好点吧。’
That way you're not just like, Hey, make it good, please.
好了，这样行了吗？
Alright, is this good?
我也不确定。
I have no idea.
我根本没法确定这一点。
I have no way of figuring that.
我叫斯科特·托林斯基，是一名来自丹佛的开发者。
My name is Scott Tolinsky, I'm a developer from Denver.
和往常一样，和我一起的是韦斯·博斯。
With me as always is Wes Boss.
最近怎么样，韦斯？
What's up Wes?
这真是太好了，因为现在很多人都在用这些工具做实际项目，距离大家开始认真使用也就三四个月，各种问题开始慢慢暴露出来了。
Man, this is great because so much of this is like people have built stuff, and now that we're what, three or four months into people building serious stuff with it, you're starting to see a lot of the sort of edges crack around it.
人们发现，这东西其实并不怎么样。
People are Oh, this is not actually very good.
我这边遇到麻烦了。
And I have a problem on my hands.
对吧？
Right?
前几天在Reddit上有个帖子，有个人说他之前有不少客户，还为他们做了很多自动化工具。
There was this post in the Reddit open claw the other day where this guy was just saying like, I had clients and I made all these automations for them.
结果现在这些客户全丢了，因为那些工具老出问题。
I just lost all these clients because things were not working properly.
动不动就崩溃，根本停不下来。
They they were breaking all the time.
你根本没法知道哪里出错了，兄弟，赶紧上Sentry吧，一出问题立马就能发现，现在简直一团糟。
I had no way to tell that things were breaking, which is like, throw Sentry on there, brother, you'll be able to tell when things are breaking just it's an absolute mess.
如果我们能像八年前JavaScript领域那样，迎来一次纯函数式编程的复兴，用在现在这种AI乱炖的环境里，我觉得输出结果肯定会好很多。
And if we can like have the like, pure functional programming renaissance that we had in JavaScript, what eight years ago, If we can have that in this AI slop world, I think that the outputs will become a lot better.
确实如此。
Yeah.
说来好笑，我之前做的那个G栈相关的视频，代码量足足有三万四千行，全是垃圾代码。
It it's so funny because I did my video on the g stack stuff and that that the video was like 34,000 lines of slop.
我想应该就是叫这个名字吧。
I think that's what it was called.
而且你还会收到评论，尤其是在推特上，有些非开发者会说，你们这些老派程序员迟早会明白，代码质量根本不重要，就算把26个测试文件打包给用户也没关系。
And you get comments, especially on Twitter where there's some non developers on there who are gonna be like, you all dinosaurs are gonna learn that it doesn't matter what the code quality is or if we shipped 26 test files to the user.
真的无所谓。
It doesn't matter.
但话说回来
But like
是的。
Yeah.
我觉得这些人迟早会醒悟，当他们遇到根本解决不了的问题，或者只能不停地让AI来回试错的时候。
I think a lot of those people are going to wake up at some point when they just start hitting issues that are impossible to solve or, you know, you're just throwing AI back and forth at it trying
想修一个地方，结果另一个地方又出问题，整个系统乱成一团。
to fix one thing and and something else breaks and it's just an absolute mess.
我明白，也许代码确实没那么重要了，但我们现在从当初必须在意首屏加载时间，变成了‘管他呢，八兆测试文件都发出去算了’，这差距也太大了吧。
And like, I get it that maybe the code doesn't matter as much, but we have come so far from you have to worry about your initial paint times to who cares if you shipped eight megs of tests Yeah, right.
可不是嘛。
No kidding.
而且，如果这种情况真的存在，那谁知道还有什么东西也被泄露了呢？
Part of that too is if like that exists, then who knows what else exists?
你是不是连社保号也一并发给所有人了？
Like, are you shipping your social security number to everybody as well?
如果你根本不清楚，那确实无从知晓，对吧？
Like, if you have no idea, you don't know, right?
但很多人其实根本不知道。
And a lot of these people don't
现在你知道了。
know, now you know.
系统全权访问，没错。
Systems, full access, yes.
接下来我们要探讨的是，究竟有哪些真正可预测的工具可用。
So, what we're gonna be diving into is really like what types of actually deterministic tools exist out there.
但只要你用AI，哪怕这些工具的输出是确定性的——也就是说，给不太熟悉这个词的人解释一下，它每次都会给出相同的结果。
And anytime you're working with AI, even if the output of these tools is deterministic, as in to give people context to who might not be familiar with that word, it gives you the same results every time.
对吧？
Right?
所以你知道，AI这东西，你问它同一个问题，它的回答取决于很多因素。
So, you know, AI, if you ask it the same question, it's depends on what the answer is going to be based on a number of things with AI.
但这些工具不一样，它们是分析你的代码库，输出实实在在的信息。
But like, with these tools, these are analysis of your code base to output real information.
最明显的一个例子，你肯定能想到，就是类似代码检查工具这样的东西。
The most obvious one of those that you could think of is something like a linter, right?
它在分析文件，这个问题存在就是存在，不存在就是不存在。
It's analyzing the file, this is either a problem or it's not.
是或不是，直接把问题列出来。
Yes or no, output the problem.
没错。
Yeah.
对吧？
Right?
别用那些 x、y、z，还有常见的 JS 写法。
Don't use this x y and z, you know, don't use common JS.
你可以设置很多这样的小规则，它们可以是硬性规定，也可以只是一个简单的纯函数来检查你的代码，结果要么通过，要么不通过。
There's just so many of these little guardrails you can put in place that could be rules, but they can also simply just be like a pure function that checks your code, and it's it's either a pass or a fail.
这样你就不用担心 AI 给出的那种模棱两可、让人捉摸不透的结果，它可能通过也可能不通过。
And then you don't have to worry about the wishy washy vibes of an AI spitting something out where it might pass and might not.
对。
Yeah.
很多人把你说的方案放进了代理文件里，也就是 agent 文件。
A lot of people put that solution, like you said, into like an agent's file, agents.
比如 Markdown 文件，或者 Cursor 的规则文件，或者是某种规则配置文件。
Md file, or a cursor rules, or rules file of some kind.
对。
Yeah.
然后呢，AI 可能会选择忽略这些规则。
And then again, the AI can choose to ignore that.
我好多次都想问，你为啥没这么做呢？
There's been so many times when I'm like, why didn't you do this?
其实呢，我只是不想做。
And it's like, I didn't want to.
我都跟你说过了，你必须这么做。
Like, I told you, you have to do this.
就算这样，谁在乎呢？
If so, like, who cares?
得能强制执行才行。
Enforceable.
说实话，很多时候确实能通过。
And to be fair, like, a lot of times that does pass.
但如果你有个能强制执行的机制，比如在代理文件里加上检查，担心代码质量的话，就跑一遍代码检查工具。
But when you have, like, an enforceable thing, and you could put in your agent's file, if you're if you're worried about the code, run it through a linter.
对吧？
Right?
然后它就会这样。
And then it will Yeah.
它会检查有没有出现什么问题，并且能从这些情况中学习。
It will see if there's any problems that pop up, and it kinda learns from that.
对。
Yeah.
那我先来谈一个挺有意思的方向，就是代码质量工具，因为代码质量这事儿，我们通常只想到静态检查之类的。
So let's actually I'm gonna start off with an interesting category here, which is code quality tools because code quality isn't something that we necessarily think of beyond like linting or something like that.
关于代码格式化和格式检查，我们待会儿再细说。
We'll talk about linting and formatting lit for formatting formatting later in this episode.
但代码质量这个领域，我觉得最近确实兴起了一股热潮。
But the code quality area is something that I think has really kind of blown up just a little bit.
我刚开始关注这个的时候，找到了几个工具。
And I first started looking into this and I found a couple of tools.
其中一个叫 jscpd。
One was jscpd.
Dev，这个工具能分析你的代码，跨150种语言查找重复的代码块。
Dev, which is basically something that will analyze your code to find duplicated code blocks across a 150 languages.
这是我最早接触到的这类工具之一，它内置了MCP服务器、代理技能、AI报告功能等等。
So, this is the very first one of these tools that I came across and there's a MCP server included or an agent skill, an AI reporter and stuff.
这个工具是个命令行程序，会扫描你的代码，找出完全重复的代码行。
And this, this tool, it's a CLI tool that will actually scan your code and look for lines that are duplicate.
我们知道，AI特别喜欢重复解决同一个问题。
Because we know that AI will love to just solve a problem like where it's at.
哦，我要写个工具函数，明明应该用现成的全局工具，却非要自己重写一遍。
Oh, I'm going to write this utility function that clearly should be a global utility.
我就直接把代码抄一遍用上，也不去导入或者找那个真正的全局工具。
I'm going to write it in and this use it instead of importing or looking for an actual global utility.
这个工具能帮上忙，因为它能生成报告，你的系统还能自动修复问题。
So, that helps with that because it can output and then your tools can then self patch, right?
比如它发现这段代码是重复的，就自动帮你优化掉。
So it's like, oh, I recognize that this is some code duplication, therefore, let me fix it.
还有个叫 knip 的工具，网址是 k n I p 点 dev，专门分析 JavaScript 和 TypeScript 项目。
And then there's also knip, k n I p dot dev, which is analysis for JavaScript and TypeScript projects.
它可以找出没用的依赖、导出和文件。
And this is going to find unused dependencies, exports and files.
能帮你全面分析代码结构。
It helps analyze your code.
它支持上百种插件，比如 Astro、Cypress、ESLint 等等。
There's a whole bunch of different plugins, 100 and a 100 plus plugins like Astro, Cypress, ESLint, etcetera.
这工具挺不错，不过我更推荐另一个，比 jscpd 和 knip 都强——它能一次性搞定所有问题，而且又快又稳，叫 fallow。
It's a cool tool, But I'm going to recommend actually instead of jscpd or knip, I'm going to recommend a tool that I found that does it all and does it all very fast and very reliable which is fallow.
fallow 的官网是 docs.fallow.tools。
Now fallow exists at docs.fallow.tools.
这些链接我们都会放在节目笔记里。
We will have these links in the show notes.
fallow 能检测出死代码和循环依赖。
Fallow looks for dead code, circular dependencies.
它还能检测代码重复。
It looks for code duplication.
它会找出复杂度高的区域，评估代码库的整体健康状况。
It looks for complexity hotspots, code base health.
他们最近还新增了功能标志检测功能，因为Fallow一直在积极开发，我每次打开这个页面，都会发现新功能。
And they just added feature flag detection, which I fellow is in active development because every time I go to this page, there is another tool.
而且它开箱即用，支持所有主流技术栈。
And this again works with everything automatically out of the box.
比如有专门支持Svelte的工具，我根本不用安装任何额外插件。
Like, there are tools for, to work with Svelte and I didn't have to install a single thing.
这些功能都已经内置好了。
It just has that plugin baked into it.
复杂度分析。
Complexity analysis.
它能找出每个文件中最复杂的函数，给出可维护性评分，定位高频修改的代码区域，帮你优先重构那些最需要优化的部分。
Find the most complex functions per file maintainability scores, get churn hotspots, probably like code that's often touched and ranked refactoring to her.
这真不错。
That's that's cool, man.
你看看自己的代码库，就会发现有些部分总是被频繁改动，很可能是因为每次加新功能都得碰它。
You like look at your code base and say ah, this is a piece of your code base that is often being fussed with probably because every single time that you add a new feature, you have to touch that.
这地方其实挺适合重构的，可以把很多重复代码抽成更小的可复用函数。
It's probably a good spot where you could refactor a lot of that out into smaller reusable functions.
对。
Yes.
而且所有结果都以AI能解析的格式输出。
And this all outputs in a way that AI can read.
同时，人看着也一目了然。
It outputs in a way that you can read.
用起来就跟命令行的代码检查工具一样自然。
It feels just like using a CLI linter or anything like that.
我特别喜欢的一点是，你可以按自己的需求自定义配置。
And one thing I really like about it is that you can configure it to be whatever you want.
比如你想找重复代码，可以设置最小的令牌数或行数阈值，来定义什么是重复。
Like if you're looking for duplications, you can configure the minimum amount of tokens or minimum amount of lines that are duplicated or what those thresholds are or things like that.
这不错。
That's good.
它还能跨语言检测重复，比如在 TypeScript 和 JavaScript 文件之间比对，会先去掉 TypeScript 的语法再分析。
Cross language duplication where it will check between TypeScript and JavaScript files by stripping the TypeScript stuff to to see.
是的。
Yeah.
这里面的好功能很多，而且运行速度很快。
Like, there's a lot of great stuff in here, and it's fast.
运行速度很快。
It's fast.
用起来很顺畅。
It works good.
架构边界检查。
Architecture boundaries.
天啊，这里面有太多有趣的东西了。
Man, there there's so many interesting stuff.
而且还有自动修复功能，但说实话，自动修复功能总让我有点紧张——虽然说，把代码丢给AI让它帮我修，我反而没这么怕，但我也说不清这到底合不合理。
And there's even an auto fix feature, but I to be honest, auto fix features kinda freak me out even though for some reason, I don't know if this this is like an auto fix to me freaks me out more than outputting the output into AI and being like, you fix it, which I don't I don't know if that tracks in terms of reasonability.
我在想，
I wonder if
这种复杂度检测是不是在解决代码重复的反面问题，因为确实如此。
this complexity finding solves the opposite of code duplication because Mhmm.
我经常发现AI会改一个函数，然后塞进一堆if语句。
What I often find AI does is it will modify a function just and throw a whole bunch of if statements.
哦，你想做这个？
Oh, you wanna do this?
那我再在这个函数里加一个情况吧。
And now let me add this one case inside of this function.
结果最后就变成：如果是这个，或者如果是那个，再或者是……，这根本就不是什么好代码。
And then you end up with this just like, well, if it's this, or if it's this, and if it's and it's like, the No, that's not, that's not good code at all.
你只是把每一种可能的情况都硬写出来，其实如果稍微改得更通用一点，这段代码一半都能删掉。
You're simply just handling every single possible outcome instead of making it into a, like, you could probably delete half of this function if you made it a little bit more reusable.
所以啊，我希望它真能做到这一点。
So yeah, I hope I hope that that's what it does.
但我也发现反过来也一样，如果你太执着于让代码可维护、可复用，搞成一个工具函数，结果反而把所有东西都塞进一个函数里。
Because I find the opposite as well as if you if you lean too hard into like, hey, make this maintainable and reusable and into a utility function, then it just starts to stuff everything into one function.
圈复杂度，它其实有好几种不同的复杂度指标。
The cyclomatic complexity, so it has a number of different complexity metrics.
比如函数控制流图中线性无关路径的数量，这听起来跟你刚才说的简直一模一样。
So the number of linearly independent path through a functions control flow graph, that kind of sounds like exactly what you're talking about.
天啊。
Man.
还有认知复杂度、认知密度，没错。
And like Cognitive complexity, cognitive density, yes.
这东西是怎么运作的？
How does this work?
它当然会分析你的代码，然后根据各种指标打分，插件大概就是干这个的吧？
It obviously analyzes your code, but then it probably just gives scores based on different things, that's probably what the plugins are?
对，有好多不同的评分标准。
Yes, there's a bunch of different scores.
比如说，Fellow 用的是二元覆盖率模型。
There's different, let's see, fellow uses binary coverage model.
一个文件要么能被测试覆盖，要么就不能，它就是用这些不同的标准来评估你的代码。
A file is either test reachable or it's not test reachable, so there's different types of essentially rubrics that it's evaluating your codon.
你可真喜欢这种评分标准啊。
You love a rubric.
是啊，这评分标准确实挺讨人喜欢的。
This Love a rubric, yes.
我觉得这是最被忽视的工具，但它其实特别能帮上忙，因为你刚才说的那些，正是 AI 最擅长处理的。
This is the number one tool I think that people aren't using that can help their slob because this is the exact types of things that, like you mentioned, that AI loves to do.
它只管用最省事的方式解决问题，而不是按你代码库该有的标准来。
Loves to just solve a problem as efficiently as it can, not as efficiently as your code base should have.
这还可能引发维护问题、性能问题，以及各种各样的bug。
And then that can lead to maintainability issues, it can lead to performance issues, it can lead to bugs overall.
是的。
Yeah.
对。
Yeah.
就算你是在凭感觉写代码，也可以把这工具的输出直接丢给AI，让它帮你修一修。
And even if you are a vibe coding, you probably just pipe the output of this right into the AI as well and say, hey, fix it.
它能帮你发现代码里那些不是语法错误、也不是安全漏洞，但就是写得特别糟糕的地方。
Just being able to find potential issues in your code that are are not necessarily like syntax errors or security errors, but they're simply just like bad programming.
这挺棒的。
That's cool.
没错。
Yes.
我这就去试试看。
And I'm gonna go and check that out.
还有一个叫 Versus 的代码扩展。
There's even a Versus code extension for it.
它是用 Rust 写的，你知道这玩意儿肯定很快。
It's written in Rust, so you know that it is fast.
那肯定很棒。
Probably amazing then.
肯定没错。
Must be.
是的。
Yeah.
再来看一个。
Here's another one.
还有 CSS。
So there's also CSS.
我特别喜欢一个用于检查 CSS 代码质量的工具，叫 Project Wallace。
And one of the tools that I really like for CSS code quality finding is project wallace.
现在 Project Wallace 也有命令行工具了。
Now project wallace has a CLI as well.
它可以分析你的 CSS 变量之类的内容。
It can analyze your CSS variables and things like that.
要让 AI 明白怎么解读这些结果，可能得花点功夫。
This would take a little bit more work to tell the AI like how to interpret the results here.
不是简单扔给它一份修改清单就完事了。
It's not just giving it a punch list of things to change.
但我确实觉得，这工具在写 CSS 时挺有用的，毕竟 AI 在这方面其实挺差的。
But I do think that it's a cool tool to have in your toolbox for when you're working with CSS, which is another one of the things AI sucks at.
我更希望看到像 Svelte Auto Fixer 这样的工具，它内置于 Svelte MCP，能直接读你的文件，告诉你哪些地方不符合 Svelte 的最佳实践。
One thing that I I wanna see more of is tools like the Svelte Auto Fixer, which comes in their Svelte MCP, which will basically read your file and tell you, like, what is not Svelte best practices.
我不知道其他框架有没有类似的东西。
So, I don't know, like, what other frameworks might have tools like that.
我敢肯定其他框架肯定也有，只是你得自己去搜一搜。
I'm very sure that other frameworks probably do, but you can search for those.
我搜了不少资料，但很多人都在讨论这个问题。
I did a number of Googling around, but there's a lot of people talking about Yeah.
如果你有类似 React 修复工具，或者 Vue 的最佳实践检查工具，能发现那些难以通过 Lint 检测的问题，欢迎在评论区分享。
So leave a comment below if you have a specific React fixer type of deal or a Vue fixer for things that might be considered not best practices that might be hard to lint about.
Project Wallace 在检测 AI 常犯的错误上特别有用，比如它总喜欢给每个元素都手动设置字体大小和行高。
Man, the project wallace is really good for finding, like, one thing that AI loves to do is set font sizes and line heights explicitly on every single thing, you know?
天哪。
And my god.
你想想，它连背景、文字这些元素都一一设置行高、字体大小和字间距，简直成了三件套。
It's like, why did you set like, it's the the trifecta is line height, font size, and letter spacing on every single background
全都设在每一个文字元素上。
color text element in there.
对。
Yeah.
Project Wallace 能很好地找出这些问题，定位哪里出了错。
And project wallace is is excellent at like hunting those out and figuring out where that's gone wrong.
这通常是因为你根本没做任何设定。
And generally that's because you haven't set up anything in the first place.
如果你只说‘做个酷炫的界面’，它就会在这类事情上失控。
If you just tell it make a cool UI, and it goes nuts with those types of things.
如果你提前把这些规范定好了，可能就不会这么频繁地出问题。
If you have those things in place beforehand, maybe it doesn't happen as often.
是的。
Yeah.
就像我们在 Codex 系统提示里看到的，它建议用渐变和富有表现力的 CSS 之类的东西。
As we saw it in the Codex system prompt and the open code Codex system prompt, it says use gradients and expressive CSS and stuff.
所以嘛。
So yeah.
没错。
Yeah.
就是这类东西。
That stuff.
我明白。
I get.
因为它的效果比那些乱七八糟的东西好多了。
Because it looks better than some of the crap that gets pushed out.
是的。
Yeah.
对。
Yeah.
但它就是一直这么干，你知道的？
But then it it just does it all the time, you know?
然后大家都过度使用，搞到最后就腻了，看起来特别糟。
And then everyone overdoes it and it becomes played out and it looks awful.
所有这些都很难维持。
It's hard to maintain, all that.
就是这些。
All that.
是的。
Yeah.
下一个是要找和使用组件。
Next one here is for finding and using components.
这个工具需要一定的投入。
Now this is a tool that requires a bit of buy in.
但AI面临的一个问题，确实是很难找到合适的组件，也不知道什么时候该单独测试组件。
But one of the problems that AI has is certainly like looking up and finding appropriate components, knowing when like testing components in isolation.
我们在Syntax网站上实际用了Storybook，它现在内置了一些很棒的AI工具，特别在查找和索引组件、测试组件方面。
We actually use Storybook on the syntax website, and Storybook has some really good new AI tools, specifically around finding and indexing your components, testing your components.
所以现在有个Storybook MCP服务器，我最喜欢的是，它确实需要你先用上Storybook。
So there is a Storybook MCP server that the thing that I I like most about the Storybook MCP server now does require buy in to storybook.book.
但如果你已经在用Storybook了，它就能帮你做很多事，比如列出所有文档、获取文档之类的。
But if you're already using Storybook, this gives you a number of things like list all documentation, get documentation, those types of things.
这样一来，当你说到‘我需要这个组件’的时候，它就不是简单地在代码里搜索组件然后瞎猜了。
So that way, like, when you say I need this component or whatever, it's not just doing a find in your code base looking for components and then trying to guess here.
实际上是这样，这里列出了所有组件，直接获取它们的文档就行。
It's actually like, okay, here are all of the components, get that components documentation.
更厉害的是，由于用故事来展示组件的用法，这就形成了标准示例。
And one of the more powerful things is that there becomes canonical examples because you're using stories to show how the component's used.
通常来说，AI 只能靠类型签名或者组件之前的使用记录来推测。
Because typically the AI is going to use the, what, like the type signature and or maybe other prior usage of that component.
但有了这个，它就能看到真实的使用方式，知道该怎么用。
But this gives it like a real, here's how you use this thing.
这样它就能直接把组件插进去了。
Way it can it can plop it in there.
如果你有一个很棒的设计系统，还有一整套现成的组件，那和 AI 配合起来简直无敌，尤其是当你只是想快速搭出一个新界面的时候。
Man, if you have a really good design system and a whole suite of components that you can then use, Unstoppable with with AI stuff, especially when you're, like, simply just clicking together, like, a new view.
对，没错。
Yes.
所有零件都已经备齐了，你只需要把它们连起来，再写点逻辑，处理一下交互就行。
You already have all the pieces for that, and you just need to, like, wire them up, maybe write a bit of logic and how to how to interact with it.
这个用例太棒了。
Great use case.
自从有了AI，我对Storybook的信心更强了。
I've become more of a believer in the Storybook stuff since all of the AI.
我一直都喜欢它，但现在有了清晰规范的示例，能清楚看到组件的外观和交互方式，体验好太多了。
I always have enjoyed it, but now where you have a nice clean example of how it works and you feel comfortable about how it looks on its own and how it works and interacts, so much better.
没错。
Yes.
而且我发现，就算有AI，Storybook也没那么烦人了，因为我不用再手动写所有故事组件了。
And I and I find that like, man, even with AI, Storybook becomes a little bit less annoying because I'm not having to hand author all the story components.
对啊。
Like Oh, yeah.
唉，真头疼。
Just, oh, no.
以前还得为每个组件配一个配套的，复制粘贴，搞这搞那，你知道的。
I gotta make a companion component for all this and copy and paste and do this and that, you know, so
测试也是这样。
Testing is like that as well.
没错。
Right.
突然间，大家都喜欢上测试了，因为不用再手动做这么多事了。
All a sudden, everybody loves testing because you don't have to do all this
但说真的，喜欢测试是因为有了AI，我的测试总能通过，AI会自动让它们通过。
Well, like, love testing do because with AI, my tests always pass because AI will just make them pass.
是的。
Yeah.
也不是完全那样，主要是省去了搭建测试框架、编写测试用例、设想各种可能出错的场景这些麻烦。
Well, like, not not exactly that, like, the just the work of of, like, scaffolding them out and writing them and coming up with potential, use cases where things will break.
就算遇到bug，直接把bug放进去，写个测试就行。
Or even if you have a bug, you know, just throw that bug in there, write a test.
对。
Yeah.
我觉得测试以前从未像现在这么有价值，但同时也变得特别容易被忽视——反正测试都通过了，是AI写的嘛，管它呢。
I think testing has never been more valuable, but also more disposable in a way where it's really easy to just be like, I don't know, tests are passing because the AI wrote them, whatever.
但另一方面，能这么轻松地完成测试流程，确实也很方便。
At the same time, it's also really handy to be able to easily move through testing.
接下来是找bug。
Next one here is bug finding.
我现在就用这两个Sentry工具。
Now I just have these two Sentry tools.
Sentry这个工具，嗯，它提供语法分析功能。
Sentry, which is well, Sentry presents syntax.
去sentry.io/syntax注册，用优惠码tastytreat（全小写，连在一起），能免费用两个月。
Head on over to sentry./syntax and I'm gonna get two months for free with the coupon code tastytreat, all lowercase, all one word.
我觉得这两个工具真的特别棒。
But these two tools, I think, are really fantastic.
一个是Sentry命令行工具，现在啥都搞命令行，但这个Sentry CLI能让你轻松登录自己的Sentry账户。
One is the Sentry CLI, which everything CLI these days, but the Sentry CLI allows you to authenticate with your Sentry.
你可以通过 Sentry 找到任何错误的根本原因。
You can get the root cause of any error in your Sentry.
你可以直接通过命令行工具查看项目中的所有相关错误。
You can see all of the relevant errors in your project directly from your CLI.
智能代理可以连接到命令行工具，查询你的错误信息，找出真正的原因，然后帮你修复。
Agents can connect to the CLI and therefore the agents can look up what your errors are and get the actual root cause and then fix the thing for you.
整个过程非常顺畅。
It's very seamless.
如果你已经在用 Sentry，就把命令行工具集成到你的工作流里。
So, you're using Sentry already, plug in the CLI to whatever you're
非常好。
Super good.
没错。
Yeah.
对。
Yeah.
你去看看。
Check it out.
另一个我觉得被低估的工具是 Sentry 的 Spotlight 工具。
Another tool that I think has gone under the radar a bit is the Spotlight tool from Sentry.
Spotlightjs.com 是一个 MCP 服务器，能实时显示本地的错误、追踪信息和日志。
Spotlightjs.com is an MCP server that gives you real time local errors, traces, logs.
它为你提供了一个本地调试的界面，特别适合开发时用。
And it gives you essentially a local interface for debugging in development.
这样一来，开发时你和代理之间沟通更顺畅，代理不用再去浏览器日志或终端日志里翻找信息。
And so, this is a tool that is primarily used for while you're in dev, you're talking back and forth and the agent isn't having to hunt in the browser logs, it's not having to hunt in your terminal logs.
所有相关信息都整齐地集中在一个地方。
It has all of that information directly in an organized way.
所以你不用来回复制粘贴给代理，也不用靠无头浏览器去抓取错误。
So that way, again, you're not copying and pasting back and forth with the agent or you're not having to use a headless browser that then has to scoop up the errors.
对。
Yeah.
开发工具和粘贴日志太麻烦了。
Dev tools and pasting your logs.
这里有个整洁的地方，集中展示你可能关心的所有信息，不管是开发还是生产环境都适用，对吧？
Just a nice tidy spot for all of your info that you're probably interested in that info in in prod, right?
你用Sentry来处理生产环境的问题。
You're using Sentry for that.
但在开发阶段，这些信息也特别有用，尤其是用代理的时候。
But in development as well, sometimes that or often that info is extremely helpful, especially when you're using agents.
没错。
Yeah.
而且你还能看到根本原因分析，我觉得这特别有帮助。
And you still get that root cause analysis, which I think is super helpful.
另外还有性能数据，比如数据库查询耗时、API请求的瀑布图、组件渲染时间等等。
But there's also performance, So you can get database query timing, API request waterfall, component render times.
所有这些都能直接融入你的本地开发流程。
Like, get all of this in your local dev flow.
我觉得这个工具说得太少了，我觉得它真的特别有用。
And I don't feel like enough people talk about this tool because I'd I'd find it to be very helpful.
安装很简单，兼容所有项目，我特别喜欢Spotlight。
So it's easy to install, works with everything, and I like Spotlight.
接下来，一般就是代码格式化和语法检查了。
Next step on the list is generally formatting and linting.
这些工具，我们很多人早就用惯了，不管是格式化、语法检查，还是像TypeScript这样的类型检查工具。
These are tools that, again, we many of us have just always used formatting and linting tools or even type checking tools like just TypeScript.
但当你想让AI代理在完成每个功能后自动执行类型检查、语法检查这些操作时，这些工具就变得特别关键。
But, like, these things become very important when you are wanting to tell your agent to always run, you know, type checking, always run linting after completing a feature, all this stuff.
把AI扫描代码时脑子里的‘这有问题吗？’，变成一份明确的‘改这个、改这个、改这个’的清单。
Moving again, general like, is this a problem or not out of the brain of an AI scanning your code for problems and into a checklist of fix this, fix this, fix this.
在这方面，我特别喜欢VitePlus用的VP check，它能根据你的设置自动运行语法检查、格式化和类型检查。
One thing I really like in this regard is VitePlus uses VP check to run linting and formatting and type checking if you want it to.
而且它还带缓存机制。
It does so with caching.
这种事用它再合适不过了。
It's just the best for this type of thing.
所以如果你在用 VitePlus，就用 VP check 就对了。
So if you're using VitePlus, the VP check is the one to use.
真的特别好用。
It's really great.
但如果不使用 VitePlus，像 ESLint 这样的工具就越来越重要了。
But otherwise, using something like ESLint is just becoming more and more important.
不过我觉得这里有个被严重忽视的点：我们很多人遇到的问题，AI 总是反复犯同样的错。
Now, one thing I think that's really underutilized here is that a lot of us, as we've mentioned, have issues that AI just continues to do.
比如在 Svelte 里，它动不动就用 effect 来处理一切。
Like, in Svelte, it's a problem where it just uses effect for everything.
老兄，这根本不是 React 的用法嘛。
It's like, brother, if this ain't type react
effect 只是强行转换值，或者干脆自己瞎搞一套类型。
effect just coerces the value, you know, it uses as or it just like makes up its own types.
哦，对了。
Oh, right.
我原以为模板就是这样的。
I expect that this is what the template looks like.
我直接在上面加个类型声明。
I'll just throw a type above it.
但其实这类型应该从数据库里自动推断出来，类似这样。
And it's like, no, that that should be inferred from from like the database, something like that.
说到 TypeScript，它虽然很强大，但很多时候其实是在打擦边球。
And it I feel like with TypeScript a lot it as good as good as it is a TypeScript, it cheats it quite a bit.
很多人也说，我不确定测试到底有没有通过，反正类型没报错。
And yeah, a lot of people are just like, I don't know if test pass, you know, the types.
类型检查没发现问题。
There's no type errors.
是的。
Yeah.
因为你到处都在用断言。
Because you just use assertions everywhere.
是的。
Yeah.
我知道。
I know.
所以我觉得，像Vibe Cutters这样的团队在这种情况下，可能会在agents.md里写上一句：别这么干。
And so one of the things that, like, I think vibe cutters might do in this situation is just put it in their agents.md saying, hey.
别这样。
Don't do that.
求你了，别这样。
Please, no.
别做。
Don't.
但这就像一块写着‘禁止通行’的牌子，大家照样视而不见，对吧？
But that's like a sign that says don't that you can just walk past, right?
AI代理根本不会遵守这个规定。
Like the AI agents won't adhere to that.
它们只会把它当回事儿。
They're going to consider it.
但如果你把它集成到这种工具里，情况就完全不同了。
But if you put it into a tool like this, then that changes things quite a bit.
我记得Svelte团队的Kevin说过，他在ESLint配置里加了规则，只要代理在SvelteKit里用了effect，构建就会报错，因为这种情况实在太常见了。
So I think Kevin from the Svelte team was saying that he even put in his ESLint setup, it would fail if the agent used effect in SvelteKit, just because of how much it was doing it.
所以他专门写了一个自定义的ESLint插件来检测这类问题。
So, he wrote a custom ESLint plugin just to check for those types of things.
我觉得这种做法被严重低估了。
And I think that's really underutilized.
与其把规则随便丢进代理里，不如写个自定义的ESLint插件。
Writing custom ESLint plugins instead of just tossing stuff into your agents.
是的。
Md Yeah.
我觉得这事大家做得太少了。
I think is something that people don't do enough.
让它变得确定性更强，你知道的。
Make it deterministic, you know?
别写那种模棱两可的检查规则。
Don't write a wishy watcher rule.
妙就妙在，让AI写一个确定性的插件其实特别简单。
And the beautiful thing about that is that it is so easy to get the AI to write a deterministic plugin.
对吧？
Right?
然后你还能给它写测试，确认它真的能正常工作。
And and then you can write tests against it and see that it actually works.
说实话，我过去六个月里已经写了三个Vite插件，因为上手实在太容易了。
It's man, I've written, like, three Vite plugins in the last, like, six months as well just because it's so easy to spin one up.
没错。
Yes.
我知道确实如此。
I know it's it is.
至于CSS方面，StyleLint依然非常好用。
And then on the CSS tip of things, StyleLint is still great.
这个工具被严重低估了。
It's something that is so underutilized.
我觉得我在这档播客里已经说过上百遍了。
I think I've said that about a 100 times on this podcast.
StyleLint其实就是对CSS做类似代码检查的工作。
StyleLint is basically CSS linting in the same type of way.
它能帮你发现那些具体的问题。
It helps you find those exact type of things.
比如，提示你自定义属性名称不规范、禁止使用某些单位，或者你给背景色、阴影时没用我们预设的变量值，又或者用了不在变量体系里的颜色，它都会报错。
Expected custom property name, disallowed unit, like again, like, alright, you are assigning a background color or you're assigning a box shadow without using one of our predefined shadows that's in a variable or you're giving a color that's not in our variables, it's gonna error on this.
而且，它还可以和其他工具配合使用。
And then, you know, that can be used in addition to actual, like, agents.
MD 文件里会说明在这些情况下该怎么做。
Md files about saying what to do in those types of situations.
我自己在用 StyleLint，它确实不错，但我更希望有个更省事的工具。
I am working on my own because StyleLint is great, but I would rather a tool that was more effortless.
所以我用 Lightning CSS 解析器做了一个，就是想让它更快。
So I made one using the Lightning CSS parser because I wanted it to be faster.
我想让它更贴合现代 CSS 的习惯和风格。
I wanted it to be, you know, tuned to kind of modern CSS sensibilities.
对。
Yeah.
那 StyleLint 有什么问题呢？
So what's what's wrong with StyleLint?
我觉得 StyleLint 用起来挺麻烦的。
I find StyleLint to be difficult to work in.
我觉得它有点臃肿。
I find it to be a bit bloated.
这东西已经存在很久了。
It's been around forever.
功能特别全。
It's very full featured.
但我更希望它像 Parcel，或者新版本的 Vite 那样，默认设置就特别智能。
But I'd rather it be like Parcel or even like with the new Vite stuff, right, where it is just really smart defaults.
对。
Yeah.
不用任何配置。
No configuration.
直接放进去就行。
Throw it in there.
只要你能接受，就直接用。
Just throw long as you're okay with it.
速度简直快得离谱。
It works fast as hell.
展开剩余字幕（还有 325 条）
是的。
Yeah.
我一直在跟人说，比如 AuxLint 和 Aux 格式这些东西。
That's what that's what I've been telling people with, like, AuxLint and Aux format and stuff.
大多数情况下，我已经把之前那些 ESLint 和 Prettier 的配置都收起来了。
In most cases, like, I just put my I've put so much of my like ESLint and prettier config away.
我就直接用这个了，尤其是新项目，或者那些需要大改的项目，我最多加个两三条自定义，就不会再有那种一次性改动整个代码库的大提交了。
And I was like, I'll just I'll just use this, you know, and for for newer projects or projects where like a massive changing thing, maybe two or three changes I added to it, I wouldn't have this massive commit that just changed the entire code base.
但要是的话。
But if yeah.
只要你能放下身段，接受默认设置，有时候反而更好。
As long as you can just like lay down and accept the defaults, sometimes that's better.
没错。
Yes.
这正是我们讨论的核心。
And so that's really what this is about.
而且，速度快不快？
And man, is it fast?
它能兼容我所有的工具。
It works with all my stuff.
它叫 Clint，就像 CSS Lint 那样，叫 Clint。
It's called clint, like CSS Lint, clint.
你去看看吧。
Check it out.
虽然现在还早，但它能检查出未知属性、无效值、重复选择器、重复声明、空规则集这类问题。
And I I it's still early, but it does no unknown properties, invalid values, duplicate selectors, duplicate declarations, empty rule sets, those types of things.
我觉得它运行起来又快又流畅。
And I think it does so very fast and nice.
不妨试试看，也欢迎贡献代码。
So give it a try and accepting contributions to it.
那会很棒。
That'd be great.
接下来这个是让浏览器以无头模式运行。
Next one here is making your browser usage headless.
这个领域里的王者是 Vercel 的 Agent Browser。
The king of this area is the agent browser from Vercel.
Agent Browser 很棒，因为它功能非常全面。
Agent browser is great because it's very full featured.
你可以让代理浏览器去检查某个网页在浏览器里的表现。
You can tell agents to, Hey, check this in the browser.
它能截屏，还能做各种类似的操作。
It can do screenshots and those types of things.
说到底，它几乎能处理浏览器能做的所有事情。
It can handle anything that a browser would be able to, really, is what it comes down to.
是的。
Yeah.
总的来说，我对 Agent Browser 没什么不满的地方。
And for the most part, I don't have a lot of complaints with agent browser.
不，这功能太棒了，尤其是因为代理浏览器可以和任何 Electron 应用连接。
No, it's great, especially because like one cool thing with agent browser is that you can hook it up to any electron application.
启动 Electron 应用时，你只需要加一个远程调试端口的参数就行。
And all you have to do when you're starting the electron application is you have to start it with like a remote debugging port, which is an argument.
比如你可以打开 Slack，加上 --remote-debugging-port 9222 这个参数。
So you can open Slack and patch it dash dash remote debugging port 9,222.
然后你的代理浏览器就能连上它了。
And then your agent browser skill will be able to connect to it.
我之前给 Scott 发了消息，他惊讶地说：‘你用的是啥？’
Like I sent Scott, Scott's like, Woah, what were you using?
我就告诉他：我用的是代理浏览器。
I was like, I use agent browser.
我还发了条消息给他，说我就直接进了云端。
And I sent him a message from I just went into cloud.
然后我说：你试试用代理浏览器。
And I was like, use the agent browser.
你得带着那个参数重启 Slack，不过它能做到，因为它能运行终端命令，对吧？
You have to restart Slack with the with the flag, but it can do that because it can run terminal commands, right?
然后它就给 Scott 发了条消息。
And then it just sent like Scott a little message.
我前几天刚设置好，因为当时我和 CJ 在打一场对决。
And I set that up the other day because we were doing a battle with CJ Scott and myself.
那场对决规定不能用鼠标。
We were doing a battle where we like couldn't use the mouse.
我当时以为 Randy 会在 Slack 里发个截图之类的东西。
And I thought that Randy was gonna post something in Slack, like a screenshot or something like that.
而且我们还不允许复制粘贴。
And we weren't allowed to like, copy paste it.
所以我心想，得把我的代理浏览器调好。
So I was like, I'm gonna get my agent browser dialed in.
这样只要 Randy 在 Slack 里发了东西，我就能把图片从 Slack 里提取出来，直接放到编辑器里。
So that if Randy posts something in Slack, I'm gonna be able to get that image out of Slack into my editor.
结果倒是能用，但跟Randy原本打算的完全不一样。
And it ended up working, but ended up not being what Randy had planned for us.
所以我已经准备好迎接下一个挑战了。
So I'm ready for the next one.
是的。
Yeah.
对。
Yeah.
还有Chrome DevTools MCP，这个工具也很适合做这种事。
There's also Chrome DevTools MCP, which is great for this as well.
我喜欢Chrome DevTools MCP的一点是，它会弹出一个独立的Chrome窗口，让你清楚地看到代码在怎么运行。
The thing I like about Chrome DevTools MCP is that it pops open a little Chrome that you can see it executing your stuff on nice and easily.
我觉得这应该是它的默认行为。
I think that's the default way that it works.
说实话，我都不确定能不能关掉这个功能，但我就是喜欢能亲眼看到它在做什么。
I don't know if you can even turn that off, if we're being honest, but I like that I can see what it's doing.
有时候AI会直接默认这是一个Vite项目，用原始方式处理。
Like, sometimes sometimes the AI uses, like, the raw like, it just assumes it's like, oh, this is a Vite site.
当然，默认端口就是5173。
Of course, it's on Port 5173.
明白了。
Okay.
结果打开的却是另一个网站，莫名其妙地显示了一些奇怪的内容。
Let me and then it's like the wrong site, and it's like, for some reason, the app is showing something weird here.
这其实是因为你跑错了项目，也没检查端口。
I'm like, that's because you're at the wrong app, and you didn't check the port.
所以，Chrome DevTools MCP 用在这里也特别合适。
So, yeah, chrome-devtools m c p, great, great usage for that as well.
但这些工具确实很棒，因为你可以看到它们截取的屏幕截图，清楚地知道页面长什么样。
But having these tools are great because again, you can look at the they can take screenshots and see what it looks like.
它还能读取控制台日志和网络面板的信息，诸如此类的功能都有。
It can read the console log and and it can read the network panel and those types of things.
另一个选择是 Lightpanda。
Another option here is Lightpanda.
你听说过 Lightpanda 吗？
Have you seen Lightpanda?
对。
Yeah.
Wes？
Wes?
我之前把这个工具列在另一个节目的备选清单里，一直没决定。
I had this on a list for another show that I've been mulling around.
他们重新打造了一个基于 V8 的工具，据说在无头模式下快很多。
So they rebuilt an entire It uses V eight, but it's apparently way faster for headless.
我回头看了下介绍，上面写着：‘为机器设计的浏览器，而非人类。’
And I went back and I looked at it, it says the first browsers for machines, not humans.
我当时就想，哇，他们真是在全力打造智能代理型浏览器，因为这正是 Puppeteer 这类无头浏览器的短板。
And I was like, wow, they're like, they really are going hard on this like agentic browser, which apparently is it makes it faster for interacting because that's the one thing about these like puppeteer and these headless browsers.
它们太慢了。
They're slow.
慢得像糖浆一样，因为得截屏、访问 DOM，然后发送点击事件，简直慢得离谱。
Yeah, as molasses because they got to like, take a screenshot or go to the DOM and then send a click event absolutely so brutally slow.
Lightpanda 是个新浏览器，他们直接用了 V8 引擎，就是那个能运行 JavaScript 的引擎。
So Lightpanda is like new browser that they basically just took v eight, which is like the engine, it can run JavaScript.
我不确定它支不支持 CSS。
I don't know if it runs CSS or not.
但因为它只需要 HTML 结构就行。
But because it just needs like the markup.
对吧？
Right?
而且我们好像已经
And then we apparently had
运行得更快了。
a run faster.
我查了一下，当时就在想，这到底是个啥东西？
I looked into it because I was like, what is this?
我当时就觉得，他们不可能是从零开始造个浏览器吧，那也太疯狂了。
I was like, they didn't just build a browser from scratch, you know, like, that's crazy.
Ladybird 确实是这么干的，但他们确实够疯狂。
Ladybird is doing that, but they are crazy.
对。
Yeah.
因为它只说是一个浏览器引擎。
Because it just says a browser engine.
哦，这样啊。
So, okay.
嗯，明白了。
Yeah.
它确实提到 Lightpanda 是用 Zig 写的，还用了为 Zig 定制的 V8 引擎版本来运行 JavaScript。
It does say Lightpanda is written with Zig, and it uses build of the v eight engine for Zig JS runtime.
挺有意思的。
Interesting.
对。
Yeah.
明白了。
Okay.
是的。
Yeah.
我后来查了一下。
And I looked into it.
我去了时光机网站，发现这东西不是最近半年才突然冒出来的，现在人人都在搞智能代理。
I went on way back machine, and I was like, this is not just something that someone vibed up in the last, like, six months because everything everything is agents.
他们以前是
And they it they used to
一个用于网页抓取的浏览器，这倒说得通。
be a browser for scraping, which makes sense.
对。
Mhmm.
所以他们以前是做网站爬取的，专门快速抓取数据。
So they they were they used to be this thing that, like, scraped websites and got data, and it was as fast as possible.
我猜他们后来有所转变，不过抓取网页数据应该还是主要用途，对吧？
And I guess they've sort of changed I guess it still is a big use case, right, is visiting websites and scraping.
是的。
Yeah.
你知道这里的价格是怎么定的吗？
You know what there's pricing on here?
这个价格是只针对他们的云专业版，还是说用Lightpanda本身也要收费？
Is the pricing only for their cloud pro- or is it just using Lightpanda in Yeah.
你可以直接安装这个工具，自己运行，完全没问题。
You can install this thing and run it, no problem.
我觉得——明白了。
I think the- Okay.
关于这些AI代理，没人提到的是，你需要大量IP地址和大量计算资源才能运行这些浏览器。
The thing that nobody is talking about with these AI agents and whatever is that you need a lot of IP addresses, and you need a lot of compute to actually run these browsers.
通常来说，在无头服务器函数里运行浏览器根本不太划算，对吧？
And often it doesn't make sense to like, run a headless browser inside of like a serverless function, right?
你看Cloudflare就推出了自己的浏览器工具，可以用来截屏，而且和Puppeteer兼容。
So you see like Cloudflare has their own like browser thing that you can use to take screenshots and it's it's like it's puppeteer compatible.
他们还提供另一个这样的工具。
And then they have this thing as well.
但我认为，很多做这行的公司都没说的一点是，他们很可能把这些程序部署在普通人家的电脑上。
But I think the other thing that a lot of these companies that do this are not talking about is that they probably run them on either in like people's houses.
我不确定这到底是不是真的。
Think I don't I don't know if this is true or not.
但我听过一集特别棒的《暗网日记》，讲的是那种直播盒子的事。
But I listened to this really good darknet diaries about these like streaming boxes.
而且我也收到过很多邮件，说有人手上有住宅IP可以提供。
And I've also gotten lots of emails from people saying I have residential IPs available.
因为你不可能只靠一个VPN就去抓取上千个网站。
It's because you can't just use a VPN and scrape a thousand websites.
他们肯定会封你。
They're gonna block you.
他们不希望你这么做。
They don't want you doing that.
很多地方都不允许你这样操作。
Many of these places don't want you doing that.
你真正需要的，其实是像Lightpanda这样的程序，运行在某人的非法直播设备上。
What you need, really, is something like Lightpanda running on somebody's illegal streaming box.
这样你就能用一个干净的IP地址，代表别人发出请求。
And you have like a nice clean IP address that you're able to send requests out on behalf of someone.
我不确定这种事是不是真的在发生。
I don't know that that's actually happening.
我不确定Lightpanda是不是在这么做，但我敢打赌，现在我们这个行业里，肯定有人在干这种事。
But and I don't know that this is Lightpanda is doing this, but I guarantee that's happening in some regard right now in our industry.
这真的很有趣。
It's very interesting.
另外，如果你感兴趣的话，可以用 Agent Browser 把 Lightpanda 当作引擎来用。
And also, if you're curious out there, you can have agent browser use Lightpanda as the engine.
如果你们想的话
If that's
对的。
Yeah.
就像和 Puppeteer 兼容，对吧？
Like It's like puppeteer compatible, right?
没错。
Yeah.
如果你已经有一整套 Agent Browser 的配置，想直接换成 Lightpanda 作为引擎，只需要改个配置就行。
If you wanna just have your whole setup with agent browser that you already have and then pop in Lightpanda as the engine, it's a simple config change.
还有就是任务和待办事项，说实话，AI 总是喜欢一堆待办清单，但从来都不去完成，每个 AI 系统都有自己的待办机制，五花八门，还都不存到你的数据库里。
Another thing here we have is tasks and to dos, which man, AI loves to, like, lift a bunch of to dos and then, like, not check them off or not do them, or every single AI harness has its own to do system, and they're all crazy, and they don't get saved to your database.
所以我这里有几个工具，它们不太适合用来精确扫描你的代码库，更适合用来做一般性的工作流程。
So, I have a couple of tools here and this is less for deterministically scanning your code base, but this is more for a general workflow type of thing.
我用的是 dex.dot.rip，它会把所有内容保存成 JSON 文件。
I use dex, dex dot rip, which saves everything to a JSON file.
还有 beads，这个工具挺流行的，能把任务整理进数据库，还用 Git 钩子。
And then there's beads, which is one that's popular that sorts things into a database and uses get hooks.
不过不管用哪个，它们的好处都是支持阻塞式执行。
But either way, the thing that are nice about these is that they can be blocking.
你可以让某些任务阻塞其他任务的运行。
You could have tasks that are blocking other tasks.
你可以清晰地定义先做这个，再做那个，然后接着做下一个。
You could have a clear execution of this, then this, then this.
而且，这些操作都会提交到你的 GitHub 仓库。
And again, it's commits to your GitHub repo.
你可以随时带着这些设置走。
You can take it with you.
这 again 更像是一个计划导向的东西，而不是纯粹靠代码分析。
This is, again, less of a a code deterministic thing, but more of a plan deterministic thing.
这样一来，当系统问你‘下一个任务是什么’时，它不会只是笼统地问‘我们该做什么’。
That way, if it's saying, give me the next task to do, it's not just like, what should we do?
而是明确地说：好吧。
It's like, okay.
这个任务依赖于这个，而这个又依赖于那个。
This is blocked by this, which is blocked by this.
我先选这个，然后我们来实现它。
Let me pick this, and then let's implement this.
而且你还可以加上描述，直接传入具体的代码路径之类的细节。
And then again, you can have descriptions where you're passing in actual code paths and stuff.
所以我挺喜欢 dex 的。
So I I like dex.
用 rip 来做这个，不光是因为我老板开发的。
Rip for this, and not just because it was made by my boss.
接下来是用于文档的 Context7。
Next one here is Context7 for docs.
我到现在还是经常用 Context7，因为在 AI 代理这个平台上，虽然你可以设定最佳实践、提供各种技能来指导它，但很多时候，直接通过 MCP 把文档放进 Context7，依然是最有效的办法。
I still use Context7 quite a bit because in this this whole platform of AI agents knowing what to do, you can have best practices, you can have skills that are telling it this or that, but a lot of times, just having the docs in Context7 via MCP, I find to be still the best.
它会自动查找文档，获取答案，甚至参考使用模式，然后基于这些信息判断出更合适的实现方式——因为我手头有完整的文档。
It just looks it up, gets the answers, possibly usage patterns and stuff like that, and then is able to assess a better version of like, okay, this is what it should be done like, because I have the docs.
这个话题已经被说烂了，而且它跟当前代码质量或具体实现关系不大，但当你想找模式和示例的时候，Context7 真的很管用。
So that one's been talked about to death, and again, less deterministic about your current code and your current quality, but when you're looking up patterns and examples, Context7, great.
你有没有注意到 TanStack 最近推出了代码模式？
Did you see TanStack had code mode they released the other day?
我觉得这个
I I think this
跟 Cloudflare 刚刚发布的代码模式挺像的。
is similar to the Cloudflare code mode that they came out there.
Cloudflare 把他们原来的 MCP 服务器全换掉了，以前他们有七八个不同的 MCP 服务器可以调用。
Cloudflare replaced their entire MCP server, which was they had like seven or eight different MCP servers that you could hit.
问题是，上下文太多反而成了负担，模型得费老大劲儿才能决定该调用哪个工具。
What happens is that you get so much context bloat and it has to work really hard to figure out which tools to call whatever.
他们干脆把整套系统换掉了，直接给它一个沙盒来运行 TypeScript——因为大模型写 TypeScript 的能力其实比调用工具强多了，对吧？
And they replace the whole thing with with simply just like giving it a sandbox to run some TypeScript because the LLM is it's pretty good at running tool calls, but it's really good at just simply writing TypeScript that can can be run, right?
这跟大家常说的别用 MCP，直接让模型跑命令行是一个道理。
It's the same idea that everybody is saying, don't use MCP, just let it run CLI.
模型跑命令行确实很在行。
The agent is very good at running CLI calls.
同样地，模型写 TypeScript 也特别拿手。
So in the same way, the agent is very good at writing TypeScript.
如果你给它一个能运行 TypeScript 的沙盒，具体细节我就不展开了。
And if you give it this sandbox where it can run TypeScript, I won't get into it.
这个我们以后专门做一期节目聊。
We'll do a whole show on it.
你只要提供接口规范，它就能调用各种工具，然后直接执行出来。
But you get like the schema, you can call all these different tools and then it will then execute it.
对吧？
Right?
它可能会返回文档，也可能更新你的 Cloudflare 控制面板之类的。
It might return documentations, it might update your your Cloudflare dashboard or whatever.
要搭建一个 MCP 服务器，其实很简单，就是给大模型一个能运行代码的隔离环境。
And it's like a really interesting way to make an MCP server is basically just giving the LLM a little spot to run some code that is in sandbox.
Cloudflare 的动态工作区就是这么回事。
That's what the Cloudflare dynamic workers are.
现在 TanStack 也推出了自己的代码运行模式，挺厉害的，提供了一个专门执行这些代码的空间。
Now, TanStack came out with their own code mode, which is really cool, a spot to like run this all.
我觉得我们真该专门做一期节目来聊聊这个。
So I think we should probably do a whole show on this.
这真的很有趣。
This is very interesting.
我们都在摸索这些工具到底是什么，该怎么用才最有效。
We're all trying to figure out what all these tools are and how they best work.
我觉得这个代码模式确实触及了其中一些要点。
And I think this Code Mode certainly hits on some of those.
把这叫作‘代码模式’，这名字还挺有意思的。
Code Mode is an interesting name for that.
我有点不太理解这名字的意思，不过我还是保持开放态度。
I don't know if I get the name, but I'm keeping an open mind here.
归根结底，我们该怎么让AI去使用这些工具呢？
So, at the end of the day, how do we get AI to use these tools?
我们求它。
We beg them.
我们把它集成到智能体里。
We put them into our agents.
写进MD文件。
Md file.
我们把它放进技能模块。
We put it into skills.
我们会告诉它：嘿，每次完成一个功能，都记得执行这个流程，对吧？
We tell it, Hey, always Yeah, I've had good luck with saying, Upon completion of any feature, always run the sequence, right?
先跑一遍质量检查、类型检查或者VP检查，然后跑一遍Fallow检查，接着做这个，再做那个。
Run fallow quality run first run type checking or VP check, then run fallow checking, then do this, then do that.
我用这个方法效果不错。
I've had good luck with that.
但归根结底，你也可以自己先跑一遍，把结果给AI代理，然后说：嘿，把这些地方改一下。
But at the end of the day, you can run them yourself and give the output to the AI agent and say, hey, fix these things.
或者你直接在代理里设定：请执行这些操作。
Or you can say, in your agents, please do this.
又或者你用技能，比如我的质量检查技能——
Or you can have skills, which is like my quality check skill-
是的。
Yeah.
就是那些用来运行质量检查命令的指令。
Commands that run the quality check commands.
但除此之外，这事儿挺难的。
But it's very difficult besides that.
你可以把这些检查全都打包成一个质量检查脚本，一次性运行所有检查。
You can always wrap this all up into one quality check script that then runs all of your quality checks.
对。
Yeah.
你可以在提交代码时自动运行，这其实挺常见的。
You could run it on like a commit, which is pretty common thing to do.
对吧？
Right?
如果这些检查没通过，就不允许提交代码。
Like, you're not allowed to commit any code if these things are failing.
有些检查挺烦人的，因为它们会冒出一些你根本不在意的问题。
Some of them are a little bit more like annoying because you're like, oh, it surfaced that.
我其实并不关心这些。
I don't necessarily care about that.
然后我还得在代码里加个奇怪的注释来忽略它。
And then I'll have to go and put this weird comment in my code to ignore that.
不过在提交时运行检查可能是个好办法。
But running it on commit is maybe a good idea.
这样就确保了，只要检查没通过，代码就根本进不了仓库。
That means that it will never actually make its way into your your code base until things pass.
是的。
Yeah.
说实话，我更倾向于自己掌控这些检查的输出，而不是随便怎么搞，只要能通过就行。
And honestly, I found it to be better to be in control of the output of these things rather than just being like, oh, go ahead and just do whatever you gotta do to get these things passing or fixed, etcetera.
我觉得我这边提到的工具和方法就这些了。
But I think that's it for all of the the tools and things that I have here.
韦斯，你平时还有没有别的工具，能让你的AI更稳定可预测？
Wes, is there anything else in your toolbox that you use to make AI more deterministic?
主要是靠骂人。
Just swearing, mostly.
是的。
Yeah.
当初光标功能泄露的时候，我们发现，对光标骂脏话真的会被记录到Anthropic的内部仪表盘，他们还有一张图表，能看用户有多生气。
We did find out via when the cursor thing leaked, that we did find out that swearing at cursor does log into an internal anthropic dashboard, and they have an f chart that they can see how angry their users are.
所以，对着大语言模型骂脏话，确实有用。
So swearing does swearing at your LM does work.
我只想知道，我是不是在排行榜上。
I wonder if I'm on the leaderboard, that's all I gotta say.
肯定有人排第一。
There certainly is the top.
那可太搞笑了。
Oh, that be hilarious.
好了，咱们来聊聊好物推荐和硬广吧。
Alright, let's get into sick picks and shameless plugs.
我有个好物推荐，是一把剃须刀。
I have a sick pick, which is a razor.
我不太喜欢这个，我得说点实话。
I I I don't like, I'm gonna be real.
我不清楚他们是用直剃刀，还是那些人特别讲究的玩意儿。
I don't know if they're like straight razor or like whatever people are snobbish.
我猜应该是吧。
I would assume they are.
我对这些不太了解。
I'm not clued into that.
我在Instagram上看到好多广告，推荐这款Leaf剃须刀，全金属的。
I have been advertised this leaf razor on Instagram a whole ton, and it's all metal.
它用的是单片刀片，就是那种半片刀片之类的。
It uses single blades, like half blades or whatever.
而且刀片便宜得离谱。
And and the blades are just so incredibly cheap.
你可以在不同地方买到质量很好的刀片。
You can get really nice blades from different places.
你没必要非买他们家专用的刀片。
You don't have to buy their specific ones.
尺寸是通用的。
It's standardized.
但这款剃须刀用的是双刀片设计。
But this razor in particular is a two blade razor.
因为刀片便宜又通用，所以每次刮胡子，你直接换上两片新刀片就行。
And because the blades are so cheap and standardized, the idea is that every time you're shaving, you're just popping two new blades in there.
完全不用丢塑料垃圾，不会给 landfill 增加负担。
There's like no disposable plastic, anything that's getting tossed in the landfill somewhere.
整个设计真的特别棒。
It's all just really great.
我之前用过单刀片的那款，好像叫 Thorn 或者 Twig，适合修边、勾勒轮廓这类精细活。
So I had the prior single blade one called the I believe it's called the thorn or the twig, and that's for, like, using, like, edge like, lining up things and stuff.
我用了这么久，后来就想着：不如试试看？
And I I liked it for so long that I was like, you know what?
我就买双刀片的吧。
I'll just get the two blade one
普通的就行。
for And normal
天哪，这感觉完全不一样，每次换上的刀片都锋利得刚刚好。
my god, I it's it's just like a completely different experience because every single time he got these just beautifully sharp blades.
贵一倍。
Twice as much.
是啊。
Yeah.
哎呀。
Oh, man.
新刀片。
A fresh blade.
我不用剃须刀刮胡子，因为一用皮肤就发红发烫。
Man, I don't I don't use razors to shave because my skin gets on fire.
对吧？
Right?
我一剃就满脸通红，但用新刀片切东西，真爽。
I just turn into like a red tomato, but I cut things with razor blades and fresh one, man.
我买了一百片那种通用刀片。
I bought a 100 pack for my, like, utility blades.
再好不过了。
Nothing better.
是的。
Yeah.
再好不过了。
Nothing better.
剃须现在舒服多了，而且也快。
Man, it just like and shaving has gotten so much nicer and it's fast.
你用那种老式的，比如
Do you have the old timey, like,
你刷过吗？
you brush No?
没问题。
It Okay.
没有。
No.
我对这些没那么讲究，正因如此，我才担心有人会说：‘你居然买那种剃须刀。’
I'm not that snobbish about it, which is why I'm concerned that there are people who'd be like, oh, you buy the leaf razor.
你懂的。
You Yeah.
但用起来真的很好。
But it works great.
特别棒，手感也好，我非常满意。
So really cool, really nice, and happy with it for sure.
我要挑个特别傻的问题问一下。
I'm gonna sick pick something really silly.
拼图。
Puzzles.
最近我们和孩子一起玩拼图。
We've been doing puzzles with our kids lately.
是的。
Yes.
我特别喜欢拼图。
I love puzzles.
特别有意思。
They're a hoot.
对吧？
Right?
挺有意思的，我老想着，要是能做个机器人来解拼图该多好。
It's fun to like, think about how I can't get it out of my brain that I would love to build a bot that could solve the puzzle.
我知道，我知道，Mark Rober 在他的一个视频里已经做过这个了。
I know I know Mark Rober did it on one of his videos.
自从他做了那个之后，我就觉得，哇，这太酷了。
Ever since he did that, I was just like, man, that would be so cool.
然后我看着那些拼图块，每一块都不一样。
And then I look at the the puzzle pieces, and they're all different.
我就想，这些曲线是怎么设计出来的？
I was like, what's the algorithm for making these swoops?
你知道吧？
You know?
我特别想多了解一些关于拼图的知识，但我的孩子简直爱死了。
I just wanna learn so much more about puzzles, but my kids absolutely love them.
真的特别有意思。
It's super fun.
所以一般就买个拼图吧。
So just generally get a puzzle.
买个拼图。
Get a puzzle.
是的
Yeah.
我女儿特别有工程思维，拼图特别拿手。
My my daughter is she's got the engineering brain, and she is really good at puzzles.
拼图水平出乎意料地好。
Shockingly good at puzzles.
这几乎是她最喜欢做的事情之一。
So that's like one of her favorite things to do.
真的挺有意思的。
So it's it's so funny.
我以前从来不爱拼图，但现在我和她经常一起坐下来拼。
I've never been into doing puzzles, but now her and I sit down and do puzzles all the time.
这成了我们特别好的相处时光，说实话，她真的特别喜欢。
And it's so such a good time to connect and like, man, she really loves it.
对
Yeah.
就连拼图上的内容本身都很有意思。
Even just like the content of the puzzle.
我们有一款是关于欧洲二十个国家的，类似这样的。
Like, we got one which is like like 20 countries in in Europe or something like that.
就是欧洲各国的拼图。
It's like the the countries of Europe.
上面会画着地标，比如埃菲尔铁塔和法棍面包。
And it just shows like a monument and like something like like the Eiffel Tower and a baguette.
那代表的就是法国，对吧？
And that's France, right?
还有国旗。
And the flag.
特别有趣的是，我们会说，哎，我们去过那儿，或者真想去看看这个地方。
And my it's so fun to like be like, oh, we've been there or like, that'd be kind of cool to visit that.
是啊，我们还有一款是太空主题的。
Yeah, we got an outer space one.
她能把所有行星的名字都报出来。
She's naming all the planets.
她知道一大堆东西，一直在给我讲各种知识点。
She knows all the She's giving me facts about all kinds of stuff.
不过没错，我们确实也在不断升级难度。
But yeah, no, they're they're And we push it too.
每次我们都决定，这次要玩得更疯狂一点。
So every single time, we're like, Alright, we're gonna go a little bit crazier with this one.
她现在正在做呢。
And, she's doing
我可以设计一个编程主题的拼图，来一个代码模式的。
some I should make a syntax My man, yes, count me Or like a code mode puzzle.
对。
Yes.
因为你可以通过拼图块上的代码内容，判断它们该放在哪儿。
Where, like, because you could read the code on the pieces and know where that goes.
那其实还挺有意思的。
That would actually be kinda funny.
确实，做个代码谜题，然后代码本身还能带点幽默感。
That actually would be, yeah, code puzzle, and then the code could be funny in some sort of way.
对。
Yeah.
在咱们结束之前，我想顺便提一下我老婆的播客，phases.fm。
Real quick before we get out of here, I do wanna shamelessly plug my wife's podcast, phases.fm.
她为这个项目付出了很多努力，这是她的第一个视频集，会在YouTube上发布，叫Phases FM。网站是phases.dotfm，不过你也能在任何主流播客应用里找到它。
Man, she she's been working really hard on this, and it's just her first video episode, which is gonna be on YouTube, Phases FM, or it's on phases.dotfm is the website, but you can find it in any major podcast app.
直接去网站，上面有所有相关链接。
Just go to the website, and there's links to all that stuff there.
我还想特别提一下transistor.fm，我觉得网址就是这个。
I wanna also shout out the transistor.fm, I believe is the URL.
Transistor.fm是一个播客托管平台。
Transistor.fm as a podcast hosting platform.
这真的很不错，韦斯。
It's really good, Wes.
而且我知道我们自己用的是Megaphone。
And I know we we we use Megaphone for ours.
以前我们用的是Libsyn。
We use Libsyn before.
他们这里有个很实用的功能，能显示发布窗口内的下载量。
They have a really neat feature on here, which is, like, showing you amount of downloads in the release window.
不只是第一天的下载数据。
So it's not just, like, day one downloads.
你可以看到整个发布周期的热度分布。
It's, like, you can get hot spots for seeing what the release window looks like.
他们现在正在新增一个可能你会感兴趣的功能：视频分发，因为苹果已经支持视频播客了。
And one interesting thing that they're adding right now that you might be curious about is video distribution, where now that Apple's added video
这就是我们当初没选他们的原因，因为当时视频播客还没有统一标准。
That's podcast why we didn't go with them, cause there was no standard for There's video, standard.
是的。
Yes.
所以他们正在推出这个功能。
And so they're implementing that.
我很想看看，我已经报名排队了，贾斯汀，如果你在听的话，麻烦帮我加个号，我想试试——
And I'm curious to see, I've signed up for the waiting list, so Justin, if you're listening, please get me on that waiting list, cause I wanna try- I
几个月前我跟他一起吃过午饭，我帮你安排。
went out for lunch with him a couple months So, I'll get you in.
我帮我安排。
I'll get me in.
对。
Yeah.
因为我确实感兴趣。
Because I'm interested.
这产品确实不错。
It's good product though, man.
真的特别棒。
It's really good.
给这位跨性别姐妹点个赞。
So, shout out to trans sister.
去看看吧。
Check it out.
当然，产品本身也不错。
Product as well, of course.
所有好东西都是加拿大的。
All good things are Canadian.
我都没说我家老婆的播客是做什么的。
I didn't even say what my wife's podcast was.
是关于育儿的播客。
It's a parenting podcast.
她是个心理学家。
She's a psychologist.
她是心理学博士。
She's a doctor of psychology.
她曾教授硕士级别的儿童发展课程。
She taught master's level human development courses.
所以她非常出色，而且
So she's brilliant and
我知道她在做什么。
I know what she's doing.
她讲的是儿童发展和神经多样性。
She's talking about human development, neurodiversity.
她用科学依据支持、轻松有趣的方式谈论育儿和孩子。
She's talking about kids and parenting in a, like, a scientifically backed, lighthearted, fun way.
所以你一定要去看看。
So check it out.
不错。
Cool.
好的
Alright.
谢谢收听
Thanks for tuning in.
回头见
Catch you later.
再见
Peace.
再见
Peace.
关于 Bayt 播客
Bayt 提供中文+原文双语音频和字幕，帮助你打破语言障碍，轻松听懂全球优质播客。