36氪获悉，安琪酵母公告，公司子公司普洱公司拟投资2.22亿元实施年产1.2万吨酵母制品绿色制造项目，以满足海外市场对烘焙酵母的需求。项目已完成前期可行性研究，预计将于2026年8月开工，建设期为14个月。项目符合公司战略规划方向，预计可实现较好的投资回报，且有一定的抗风险能力。但项目实施可能存在市场销售不及预期的风险。

36氪获悉，1月23日，宜家携手京东在北京、广州、深圳、杭州、成都、武汉、济南、昆明、佛山9个城市探索即时零售业务，当地消费者可以通过京东平台秒送页面下单宜家产品，并实现最快一小时内送达。

近期证监会正在持续严查私募基金领域违规募集、侵占挪用、自融自用、利益输送等触犯私募基金监管“底线”“红线”的恶劣违法违规行为，严肃追究违法主体责任。2025年证监会组织了1.75万家机构开展自查评估和问题整改，对600余个机构、个人采取行政监管措施，立案稽查约30起，移送公安机关线索约40条。2026年，证监会还将督促私募机构自查自纠、抓紧整改通道化、违规代持等各类不规范行为。（第一财经）

36氪获悉，招商银行发布2025年度业绩快报。报告显示，2025年实现营业收入3375.32亿元，同比微增0.01%；归属于本行股东的净利润1501.81亿元，同比增长1.21%。

欧元区1月制造业PMI初值为49.4，前值为48.8。（界面）

36氪获悉，飞荣达发布2025年业绩预告。报告显示，预计2025年度归属于上市公司股东的净利润为3.60亿元-4.20亿元，比上年同期增长57.23%-83.43%。

36氪获悉，证监会对浙江瑞丰达资产管理有限公司及关联私募机构、实际控制人孙伟等相关责任人员违法违规行为作出行政处罚。经查，瑞丰达及关联私募机构、相关责任人员严重违反私募基金法律法规。上海证监局对瑞丰达及关联私募机构共罚没2800余万元，对5名责任人员罚款1300余万元，对瑞丰达实际控制人采取终身证券市场禁入措施。中国证券投资基金业协会注销相关私募机构管理人登记。对于相关违法行为可能涉及的犯罪问题线索，证券监管部门将坚持应移尽移的工作原则，依法依规移送公安机关。

高乐氏宣布，将以22.5亿美元现金收购Purell免洗洗手液制造商GOJO Industries，此举旨在扩充其消费健康与卫生品类的品牌矩阵。GOJO正考虑包括全盘出售或出让少数股权在内的多种选择。其旗下的明星洗手液品牌Purell在疫情期间销量飙升，此后已趋于平稳。（财联社）

36氪获悉，越剑智能公告称，经自查，公司生产经营正常，2025年前三季度营收87,237.78万元，同比降3.42%；扣非净利润6,450.31万元，同比降4.90%。截至公告披露日，公司不存在应披露未披露重大信息，未发现重大媒体报道、市场传闻及热点概念，相关人员在异常波动期间无买卖公司股票情况。公司提醒投资者注意交易风险。

🎯 流式布局实现方式概览

方式	适用场景	兼容性	复杂度
百分比布局	简单两栏、三栏布局	优秀	简单
Flexbox布局	一维布局、导航栏、卡片	现代浏览器	中等
CSS Grid布局	二维布局、复杂网格	现代浏览器	中等
浮动布局	传统多栏布局	优秀	复杂
视口单位布局	全屏应用、响应式组件	现代浏览器	简单
表格布局	等高列布局	优秀	简单

---

1️⃣ 百分比布局

基本原理

使用百分比作为宽度单位，元素宽度相对于父容器计算。

实现示例

经典两栏布局

HTML
<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="content">主内容</div>
</div>

CSS
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  width: 25%;           /* 占25%宽度 */
  float: left;
  background: #f0f0f0;
  min-height: 500px;
}

.content {
  width: 75%;           /* 占75%宽度 */
  float: right;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}

/* 清除浮动 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

三栏等宽布局

HTML
<div class="three-columns">
  <div class="column">列1</div>
  <div class="column">列2</div>
  <div class="column">列3</div>
</div>

CSS
.three-columns {
  width: 100%;
  display: flex;
}

.column {
  width: 33.333%;       /* 每列占33.333% */
  padding: 20px;
  box-sizing: border-box;
  background: #e9e9e9;
  margin-right: 1%;
}

.column:last-child {
  margin-right: 0;
}

优点：  简单易懂，兼容性好
缺点：  需要精确计算，处理间距复杂

---

2️⃣ Flexbox布局

基本原理

使用弹性盒子模型，容器内元素可以灵活伸缩。

实现示例

自适应导航栏

HTML
<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
  <div class="user-actions">
    <button>登录</button>
    <button>注册</button>
  </div>
</nav>

CSS
.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  background: #333;
  color: white;
}

.logo {
  flex: 0 0 auto;       /* 不伸缩，保持原始大小 */
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  flex: 1;              /* 占据剩余空间 */
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin: 0 20px;
}

.user-actions {
  flex: 0 0 auto;       /* 不伸缩 */
}

.user-actions button {
  margin-left: 10px;
  padding: 8px 16px;
}

卡片网格布局

HTML
<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
</div>

CSS
.card-container {
  display: flex;
  flex-wrap: wrap;      /* 允许换行 */
  gap: 20px;            /* 间距 */
  padding: 20px;
}

.card {
  flex: 1 1 300px;      /* 增长因子1，收缩因子1，基础宽度300px */
  min-height: 200px;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;     /* 移动端每行一个 */
  }
}

圣杯布局（Flexbox版本）

HTML
<div class="holy-grail">
  <header class="header">头部</header>
  <div class="body">
    <nav class="nav">导航</nav>
    <main class="content">主内容</main>
    <aside class="ads">广告</aside>
  </div>
  <footer class="footer">底部</footer>
</div>

CSS
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex: 0 0 auto;       /* 固定高度 */
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.body {
  display: flex;
  flex: 1;              /* 占据剩余空间 */
}

.nav {
  flex: 0 0 200px;      /* 固定宽度200px */
  background: #f0f0f0;
  padding: 20px;
}

.content {
  flex: 1;              /* 占据剩余空间 */
  padding: 20px;
  background: white;
}

.ads {
  flex: 0 0 150px;      /* 固定宽度150px */
  background: #e0e0e0;
  padding: 20px;
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .body {
    flex-direction: column;
  }
  
  .nav, .ads {
    flex: 0 0 auto;
  }
}

优点：  灵活强大，处理对齐和分布简单
缺点：  主要适用于一维布局

---

3️⃣ CSS Grid布局

基本原理

二维网格系统，可以同时控制行和列。

实现示例

响应式网格布局

HTML
<div class="grid-container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
  <div class="item">项目4</div>
  <div class="item">项目5</div>
  <div class="item">项目6</div>
</div>

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.item {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  min-height: 150px;
}

/* 自动响应效果：
   - 容器宽度 > 1000px: 4列
   - 容器宽度 750-1000px: 3列  
   - 容器宽度 500-750px: 2列
   - 容器宽度 < 500px: 1列
*/

复杂布局网格

HTML
<div class="layout-grid">
  <header class="header">头部</header>
  <nav class="sidebar">侧边栏</nav>
  <main class="content">主内容</main>
  <aside class="widget">小组件</aside>
  <footer class="footer">底部</footer>
</div>

CSS
.layout-grid {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content widget"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 10px;
}

.header { 
  grid-area: header; 
  background: #333;
  color: white;
  padding: 20px;
}

.sidebar { 
  grid-area: sidebar; 
  background: #f0f0f0;
  padding: 20px;
}

.content { 
  grid-area: content; 
  background: white;
  padding: 20px;
}

.widget { 
  grid-area: widget; 
  background: #e0e0e0;
  padding: 20px;
}

.footer { 
  grid-area: footer; 
  background: #333;
  color: white;
  padding: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .layout-grid {
    grid-template-areas: 
      "header"
      "content"
      "sidebar"
      "widget"
      "footer";
    grid-template-columns: 1fr;
  }
}

图片画廊网格

HTML
<div class="gallery">
  <img src="img1.jpg" alt="图片1" class="tall">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3" class="wide">
  <img src="img4.jpg" alt="图片4">
  <img src="img5.jpg" alt="图片5">
  <img src="img6.jpg" alt="图片6" class="big">
</div>

CSS
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
  padding: 20px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 特殊尺寸 */
.tall {
  grid-row: span 2;     /* 占据2行 */
}

.wide {
  grid-column: span 2;  /* 占据2列 */
}

.big {
  grid-column: span 2;
  grid-row: span 2;     /* 占据2x2网格 */
}

优点：  强大的二维布局能力，语义清晰
缺点：  学习曲线较陡，兼容性要求较高

---

4️⃣ 浮动布局

基本原理

使用float属性让元素脱离文档流，实现多栏布局。

实现示例

传统三栏布局

HTML
<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
  <div class="center">中间内容</div>
</div>

CSS
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.left {
  width: 20%;
  float: left;
  background: #f0f0f0;
  min-height: 500px;
}

.right {
  width: 25%;
  float: right;
  background: #e0e0e0;
  min-height: 500px;
}

.center {
  margin-left: 20%;     /* 为左侧栏留空间 */
  margin-right: 25%;    /* 为右侧栏留空间 */
  background: white;
  min-height: 500px;
  padding: 20px;
  box-sizing: border-box;
}

/* 清除浮动 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

响应式浮动网格

HTML
<div class="float-grid">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <div class="grid-item">项目4</div>
</div>

CSS
.float-grid {
  width: 100%;
}

.float-grid::after {
  content: "";
  display: table;
  clear: both;
}

.grid-item {
  width: 23%;           /* 4列布局 */
  margin-right: 2.666%; /* 间距 */
  float: left;
  background: #f9f9f9;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.grid-item:nth-child(4n) {
  margin-right: 0;      /* 每行最后一个不要右边距 */
}

/* 响应式 */
@media (max-width: 768px) {
  .grid-item {
    width: 48%;         /* 2列布局 */
    margin-right: 4%;
  }
  
  .grid-item:nth-child(4n) {
    margin-right: 4%;
  }
  
  .grid-item:nth-child(2n) {
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .grid-item {
    width: 100%;        /* 1列布局 */
    margin-right: 0;
  }
}

优点：  兼容性极好，支持所有浏览器
缺点：  需要清除浮动，布局复杂，难以维护

---

5️⃣ 视口单位布局

基本原理

使用vw、vh、vmin、vmax等视口单位，直接相对于浏览器视口尺寸。

实现示例

全屏分屏布局

HTML
<div class="viewport-layout">
  <div class="left-panel">左面板</div>
  <div class="right-panel">右面板</div>
</div>

CSS
.viewport-layout {
  display: flex;
  width: 100vw;         /* 占满视口宽度 */
  height: 100vh;        /* 占满视口高度 */
}

.left-panel {
  width: 40vw;          /* 占视口宽度40% */
  background: #f0f0f0;
  padding: 2vw;         /* 内边距也使用视口单位 */
}

.right-panel {
  width: 60vw;          /* 占视口宽度60% */
  background: #e0e0e0;
  padding: 2vw;
}

响应式卡片布局

HTML
<div class="vw-cards">
  <div class="vw-card">卡片1</div>
  <div class="vw-card">卡片2</div>
  <div class="vw-card">卡片3</div>
</div>

CSS
.vw-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  padding: 2vw;
}

.vw-card {
  width: calc(33.333vw - 4vw); /* 3列布局，减去间距 */
  min-width: 250px;            /* 最小宽度限制 */
  height: 30vh;                /* 高度相对视口 */
  background: #f9f9f9;
  border-radius: 1vw;
  padding: 2vw;
  box-sizing: border-box;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .vw-card {
    width: calc(50vw - 3vw);   /* 2列布局 */
  }
}

@media (max-width: 480px) {
  .vw-card {
    width: calc(100vw - 4vw);  /* 1列布局 */
  }
}

响应式字体和间距

HTML
<div class="responsive-content">
  <h1>响应式标题</h1>
  <p>这是一段响应式文本内容。</p>
</div>

CSS
.responsive-content {
  padding: 5vw;
  max-width: 80vw;
  margin: 0 auto;
}

.responsive-content h1 {
  font-size: clamp(24px, 5vw, 48px); /* 最小24px，最大48px */
  margin-bottom: 3vw;
}

.responsive-content p {
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.6;
  margin-bottom: 2vw;
}

优点：  真正的响应式，直接相对于视口
缺点：  在极端尺寸下可能过大或过小

---

6️⃣ 表格布局

基本原理

使用display: table相关属性模拟表格布局，实现等高列。

实现示例

等高列布局

HTML
<div class="table-layout">
  <div class="table-cell sidebar">侧边栏内容比较少</div>
  <div class="table-cell content">
    主内容区域内容很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多
  </div>
  <div class="table-cell ads">广告栏内容中等</div>
</div>

CSS
.table-layout {
  display: table;
  width: 100%;
  table-layout: fixed;  /* 固定表格布局算法 */
}

.table-cell {
  display: table-cell;
  vertical-align: top;  /* 顶部对齐 */
  padding: 20px;
}

.sidebar {
  width: 20%;
  background: #f0f0f0;
}

.content {
  width: 60%;
  background: white;
}

.ads {
  width: 20%;
  background: #e0e0e0;
}

/* 响应式处理 */
@media (max-width: 768px) {
  .table-layout {
    display: block;     /* 改为块级布局 */
  }
  
  .table-cell {
    display: block;
    width: 100%;
  }
}

优点：  天然等高，垂直居中简单
缺点：  语义不佳，响应式处理复杂

---

🎯 选择指南

根据项目需求选择

需求	推荐方案	备选方案
简单两栏布局	Flexbox	百分比 + 浮动
复杂网格布局	CSS Grid	Flexbox + 换行
导航栏	Flexbox	浮动
卡片网格	CSS Grid	Flexbox
等高列	Flexbox	表格布局
全屏应用	视口单位 + Grid	Flexbox
兼容老浏览器	浮动 + 百分比	表格布局

现代推荐组合

CSS
/* 现代流式布局最佳实践 */
.modern-layout {
  /* 使用CSS Grid作为主要布局方式 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 32px);
  
  /* 容器使用视口单位和限制 */
  width: min(95vw, 1200px);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px);
}

.modern-layout > * {
  /* 内部使用Flexbox处理对齐 */
  display: flex;
  flex-direction: column;
  
  /* 响应式内边距 */
  padding: clamp(12px, 3vw, 24px);
}

选择合适的流式布局方式关键在于理解项目需求、浏览器兼容性要求和团队技术水平，现代项目推荐优先使用CSS Grid和Flexbox组合。

36氪获悉，飞沃科技公告，市场近期高度关注商业航天热点概念。现阶段，公司的主营业务仍为风电高强度紧固件的研发、生产和销售，同时，正积极拓展航空航天、燃气轮机、石油装备等领域的紧固件及零部件业务。公司在商业航天领域的业务目前处于初始阶段，2025年该业务板块营业收入约123万元（不含航空板块营业收入），占总营业收入比例为0.05%（未经审计）。

在前端工程里，TypeScript 几乎已经成了默认配置。
类型提示、自动补全、编译期报错，极大提升了开发体验。

但随着项目开始接触更多运行时不确定的数据（接口返回、配置文件、iframe、AI 输出），一个问题逐渐显现：

TypeScript 的“类型安全”，只存在于编译期。

这也是 Zod 频繁出现在近几年项目和 demo 中的原因。

---

一、TS 和 Zod 各自解决什么问题？

先把两者的职责说清楚。

维度	TypeScript	Zod
作用阶段	编译期	运行时
是否参与打包后代码	❌ 不存在	✅ 存在
是否校验真实数据	❌	✅
是否影响开发体验	✅ 极强	⚠️ 辅助
主要目标	防止你写错代码	防止数据把程序搞崩

一句话总结：

TS 约束“你怎么写代码”，
Zod 约束“程序实际接收到什么数据”。

两者不是替代关系，而是分工关系。

---

二、有了 TS，为什么还需要 Zod？

这是很多人第一次看到 Zod 时的自然疑问。

关键原因在于：
TS 是静态的，Zod 是运行时的。

1️⃣ TypeScript 只存在于编译期

type User = {
  name: string;
  age: number;
};

这段类型：

• 在你写代码时存在
• 在 IDE 里给你提示
• 打包之后会被完全移除

也就是说，运行时根本不存在 User 这个概念。

---

2️⃣ 一个非常常见的错误直觉（90% TS 新手都会这样）

type User = {
  name: string;
  age: number;
};

const user: User = JSON.parse(localStorage.getItem('user')!);

TS：✔️ 没问题
运行时：❓ 完全未知

为什么这是危险的？

因为 localStorage 里的内容可能是：

{ "name": "Alice", "age": "18" }

或者：

null

甚至：

"hacked"

但 TS 不会、也不可能在运行时帮你检查这些。

---

三、Zod 在这里解决了什么？

Zod 的核心价值只有一个：

在运行时，对真实数据做结构校验，并在失败时明确抛错。

同样的逻辑，用 Zod 写是这样的：

const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
});

const raw = JSON.parse(localStorage.getItem('user')!);
const user = UserSchema.parse(raw);

如果数据不符合约定：

• 立即抛出错误
• 明确指出哪一项不合法
• 不会让 bug 延迟到某个业务逻辑里才爆炸

这一步，TS 是完全做不到的。

---

四、什么叫“不可信输入来源”？

简单说一句不抽象的定义：

任何不是你当前代码自己 new 出来的数据，都是不可信的。

在实际项目中，以下全部属于不可信输入：

• JSON.parse(...)
• fetch(...) / 接口返回
• postMessage
• localStorage
• 第三方 SDK 返回值
• iframe / Web Worker 通信
• AI 模型返回的 JSON

这些数据的共同点是：

它们的真实形状，TS 在运行时一无所知。

---

五、一个更直观的“跨边界”例子

postMessage 场景

window.addEventListener('message', (event) => {
  const data = event.data;
});

在这里：

• event.data 的类型是 any
• TS 无法保证它来自谁
• 也无法保证结构正确

如果你直接用：

data.type === 'LOGIN'
data.payload.userId

只要数据结构稍有变化，就会在运行时崩掉。

---

用 Zod 明确边界

const MessageSchema = z.object({
  type: z.literal('LOGIN'),
  payload: z.object({
    userId: z.string(),
  }),
});

window.addEventListener('message', (event) => {
  const msg = MessageSchema.parse(event.data);
  // 从这里开始，TS 才真正安全
});

这一步的意义是：

把“外部世界的数据”，转化成“TS 世界里可信的数据”。

---

六、Zod 一般会出现在什么项目里？

你在传统 CRUD 业务中很少看到 Zod，并不奇怪。

Zod 通常出现于这些场景：

• BFF / Node 服务
• 插件系统 / 扩展机制
• 配置驱动系统
• 微前端 / iframe 通信
• AI / Agent / Tool 调用
• MCP / function calling

它们的共同特征是：

数据频繁跨越系统、进程、运行时边界。

---

七、TS + Zod 的合理分工方式

一个成熟的工程里，两者的职责通常是：

• Zod：守住边界

  • 校验所有外部输入
  • JSON、接口、消息、AI 输出

• TypeScript：管理内部

  • 业务逻辑
  • 状态流转
  • 组件和函数之间的协作

可以用一句话概括：

Zod 负责“别让脏数据进来”，
TS 负责“进来之后别把代码写错”。

工具

ESLint

代码质量检查工具

• 检查 JavaScript/TypeScript 代码中的错误
• 发现潜在问题（未使用变量、错误的 API 使用等）
• 强制执行代码规范
• 包含一部分的代码格式功能

安装和使用

• 安装

npm install eslint -D

• 使用
  • 在项目目录下面创建 eslint.config.mjs 文件，配置eslint相关的规则(具体参考官网)
  • 创建index.js测试文件，书写一些代码
  • 在控制台通过 npx eslint index.js 检测当前文件是否符合规范
  • 如果不符合规范，通过 npx eslint --fix index.js 修复当前文件不合法的地方

Prettier

代码格式化工具

• 自动格式化代码（缩进、换行、引号等）
• 保持团队代码风格一致
• 不检查代码逻辑错误

安装和使用

• 安装

npm install prettier -D

• 使用
  • 在项目目录下面创建 .prettierrc 文件，可以配置相关规则，也可以不写，为空也行，后续再添加
  • 还是使用上面的index文件做测试
  • 在控制台通过 npx prettier index.js --check 检测当前文件是否符合规范
  • 如果不符合规范，通过 npx prettier index.js --write 修复当前文件不合法的地方

解决两者的冲突

eslint-config-prettier 官方地址

关闭所有与 Prettier 冲突的 ESLint 规则
具体说明：

1. 为什么需要它：
   • ESLint 有很多代码格式相关的规则（比如 indent、quotes、semi 等）
   • Prettier 也会处理这些格式问题
   • 两者规则可能会冲突，导致 ESLint 报错但 Prettier 又能自动修复
2. 它的作用：
   • 自动关闭所有可能与 Prettier 冲突的 ESLint 规则
   • 让 Prettier 专心负责格式化
   • ESLint 专注于代码质量检查（比如未使用变量、错误的 API 使用等）
3. 使用方式：

 // eslint.config.js (flat config)
   import eslintConfigPrettier from 'eslint-config-prettier'
   
    export default [
     // ...其他配置
     eslintConfigPrettier, // 必须放在最后，覆盖前面的格式规则
    ]

4. 实践
   未配置的情况下

抛出了自定义的不合法规则

配置之后，原来的自定义规则的报错也没了。关闭了eslint和prettier冲突的规则。

eslint-plugin-prettier 官方地址

将 Prettier 作为 ESLint 规则运行 具体来说：

1. 集成 Prettier 到 ESLint：让你可以在 ESLint 的规则体系中使用 Prettier 的代码格式化规则
2. 统一代码检查和格式化：不需要单独运行 Prettier，ESLint 就能同时做代码质量检查和格式化
3. 配合 prettier-eslint 使用：通常还会配合 eslint-config-prettier 来关闭所有与 Prettier 冲突的 ESLint 规则

简单说，它让你能在 ESLint 工作流中无缝使用 Prettier 的格式化能力，一次运行同时搞定代码质量和格式。

配置之后，抛出的错误提示里面指出了prettier的规则

使用npx eslint --fix index.js 修复之后，以prettier为准了，即使两者冲突了，还是以prettier的标准修复了代码。

为什么要使用

eslint-config-prettier 只做一件事：

• 关闭与 Prettier 冲突的 ESLint 规则
• 不会把 Prettier 集成到 ESLint 中

eslint-plugin-prettier 做的事：

• 把 Prettier 作为 ESLint 规则运行
• 在 ESLint 运行时自动格式化代码
• 可以在 ESLint 检查中看到 Prettier 的错误

最佳实践

• 两个一起使用。既能使用规则又能解决提示的报错
• 只使用eslint-config-prettier可能会导致规则遗漏。
• 只使用eslint-plugin-prettier某些报错可能还是提示

结合VS Code编辑器使用

通过终端输入命令行来执行操作也可以，但是很频繁，很麻烦。因此结合编辑器的插件，可以实现代码保存，自动检查和修复代码不符合规则的地方

VS Code编辑器安装如下两个插件

ESLint 插件

"source.fixAll.eslint": "explicit" 因为这个配置需要这个插件，所以必须安装，如果不用这个配置，可以卸载掉这个插件

安装之后，在index测试文件，直接会有红色提示，不用通过命令行来查看不符合的地方

会有红色波浪线

通过修改编辑器的配置文件 setting.json 文件，配置如下

{
  // 开启编辑器保存自动格式化
  "editor.formatOnSave": true,
  // 保存文件时，自动执行某些某些操作，比如：代码修复
  // 这个操作可以避免挨个手动修复
  "editor.codeActionsOnSave": {
     // 自动修复eslint抛出的问题
    "source.fixAll.eslint": "explicit"
  },
}

按照以上配置，保存代码时，会自动使用eslint来检查和修复代码不符合的地方

Prettier插件

"source.fixAll.prettier": "explicit" 因为这个配置需要这个插件，所以必须安装，如果不用这个配置，可以卸载掉这个插件

安装插件之后，通过配置setting.json 文件可以实现保存自动格式化代码

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
     // 自动修复prettier抛出的问题
    "source.fixAll.prettier": "explicit"
  },
}

两者同时配置

{
 "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",  // 先执行
    "source.fixAll.prettier": "explicit"  // 再执行
    // 执行顺序从上到下
  },
}

这样配置，执行会有重复性的问题，同理，安装 eslint-plugin-prettier
安装完之后，就不在需要配置 "source.fixAll.prettier": "explicit"相应的插件也可以卸载了
因为执行eslint格式化的时候，代码质量是按eslint来，格式化风格是按prettier
因此只要配置一个就可以了(同时编辑器的插件prettier也可以卸载了，用不到了)

36氪获悉，杭州四足机器人企业“具微科技”宣布完成近亿元A轮融资。本轮融资由正强股份领投，壹连科技、见素资本、鲁信创投跟投（排名不分先后）。本轮融资将用于产品研发生产、团队建设，以及应用场景拓展与生态构建等方面。

36氪获悉，光大证券发布2025年业绩快报。报告显示，2025年实现营业收入108.63亿元，同比增长13.18%，归属于上市公司股东的净利润为37.29亿元，同比增长21.92%。

36氪获悉，安记食品公告，控股股东、实际控制人、董事长林肖芳因自身资金需求，拟通过集中竞价和大宗交易方式减持公司股份合计不超过705.60万股（即不超过公司总股本的3%），其中集中竞价减持不超过235.20万股（不超过1%），大宗交易减持不超过470.40万股（不超过2%）。减持期间为2026年2月14日至2026年5月13日，股份来源为首次公开发行前取得。

36氪获悉，证监会同意南昌三瑞智能科技股份有限公司首次公开发行股票并在创业板上市的注册申请。

36氪获悉，恒盛能源公告，公司董事会同意聘任金海为公司董事会秘书，任期自董事会审议通过之日起至第三届董事会届满之日止。公司董事长余国旭将不再代行董事会秘书职责。

自从向公司申请下Cursor账号后，就开始鼓捣怎么能对接Figma，不过年底了才有空研究这。

大概做下介绍

Cursor Talk to Figma MCP 实现了 Cursor AI 和 Figma 之间的模型上下文协议（Model Context Protocol，MCP）集成，允许 Cursor 与 Figma 进行通信，以读取设计内容并以编程方式对其进行修改。

Cursor Talk to Figma MCP项目目前只能通过本地运行服务的方式启动，需要 克隆项目到本地、安装依赖、初始化项目、启动socket、启动MCP 等步骤来完成服务的启动。

一、克隆项目

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

二、安装bun

npm i bun -g

使用bun -v来看是否安装成功

三、初始化项目

我看网上都是bun setup，不过setup.sh我这边没执行成功,新建了一个setup.js

import { mkdirSync, writeFileSync } from 'fs';
import { join } from 'path';

// Create .cursor directory if it doesn't exist
const cursorDir = '.cursor';
try {
  mkdirSync(cursorDir, { recursive: true });
  console.log(`✓ Created ${cursorDir} directory`);
} catch (error) {
  if (error.code !== 'EEXIST') {
    throw error;
  }
}

// Create mcp.json with the current directory path
const mcpJson = {
  mcpServers: {
    TalkToFigma: {
      command: 'bunx',
      args: ['cursor-talk-to-figma-mcp@latest']
    }
  }
};

const mcpJsonPath = join(cursorDir, 'mcp.json');
writeFileSync(mcpJsonPath, JSON.stringify(mcpJson, null, 2), 'utf8');
console.log(`✓ Created ${mcpJsonPath}`);

console.log('\n✓ Setup completed! Run "bun install" if needed.');

package.json中的setup替换

"setup": "bun run scripts/setup.js && bun install",

四、启动 Websocket

bun scoket

默认端口是3055

五、在Cursor中配置Mcp

使用下面json替换

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}

显示绿色即为成功

六、配置Figma插件

需要安装Figma客户端，客户端里才能通过manifest添加Figma插件

如果没该figma权限时没有此功能，需要将项目给复制出来一份 找到找到 cursor-talk-to-figma-mcp -> src -> cursor_mcp_plugin -> manifest.json文件

加载完后会有这个

点击该插件就会弹出插件并连接到第四步启动的Websocket服务

可以通过对话栏直接建立通道

此时即可读到figma文档，通道链接成功！