[{"data":1,"prerenderedAt":1699},["ShallowReactive",2],{"content-query-8TAqvTdkkU":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"lastUpdated":10,"body":11,"_type":1693,"_id":1694,"_source":1695,"_file":1696,"_stem":1697,"_extension":1698},"\u002Fparadigms\u002Fcode-completion","paradigms",false,"","Code Completion 代码补全","AI预测代码的智能输入法","2026-04-23",{"type":12,"children":13,"toc":1677},"root",[14,23,29,41,46,50,55,62,67,73,78,84,89,92,98,203,206,211,256,259,264,287,290,295,338,341,346,351,363,366,371,470,473,479,488,493,1628,1638,1641,1646,1671],{"type":15,"tag":16,"props":17,"children":19},"element","h1",{"id":18},"code-completion代码补全",[20],{"type":21,"value":22},"text","Code Completion（代码补全）",{"type":15,"tag":24,"props":25,"children":27},"h2",{"id":26},"定义",[28],{"type":21,"value":26},{"type":15,"tag":30,"props":31,"children":32},"p",{},[33,39],{"type":15,"tag":34,"props":35,"children":36},"strong",{},[37],{"type":21,"value":38},"Code Completion",{"type":21,"value":40},"（代码补全）是AI编程最基础的形态——AI根据光标周围的上下文，预测你下一步要写的代码，开发者按Tab接受即可。",{"type":15,"tag":30,"props":42,"children":43},{},[44],{"type":21,"value":45},"如果说传统IDE的自动补全是\"查字典\"，那AI代码补全就是\"读心术\"——它不只补全一个方法名，而是能补全整个函数体、测试用例，甚至跨文件的逻辑。",{"type":15,"tag":47,"props":48,"children":49},"hr",{},[],{"type":15,"tag":24,"props":51,"children":53},{"id":52},"核心特征",[54],{"type":21,"value":52},{"type":15,"tag":56,"props":57,"children":59},"h3",{"id":58},"_1-被动响应",[60],{"type":21,"value":61},"1. 被动响应",{"type":15,"tag":30,"props":63,"children":64},{},[65],{"type":21,"value":66},"AI不会主动介入开发流程，只在开发者输入时触发。你停下来，它也停下来。",{"type":15,"tag":56,"props":68,"children":70},{"id":69},"_2-局部感知",[71],{"type":21,"value":72},"2. 局部感知",{"type":15,"tag":30,"props":74,"children":75},{},[76],{"type":21,"value":77},"通常只关注当前文件或当前函数的上下文，不理解项目的整体架构和跨文件依赖。",{"type":15,"tag":56,"props":79,"children":81},{"id":80},"_3-逐块建议",[82],{"type":21,"value":83},"3. 逐块建议",{"type":15,"tag":30,"props":85,"children":86},{},[87],{"type":21,"value":88},"补全粒度从一行代码到一个完整函数不等。现代AI补全能根据函数签名自动生成实现，根据注释生成代码块。",{"type":15,"tag":47,"props":90,"children":91},{},[],{"type":15,"tag":24,"props":93,"children":95},{"id":94},"与传统ide补全的区别",[96],{"type":21,"value":97},"与传统IDE补全的区别",{"type":15,"tag":99,"props":100,"children":101},"table",{},[102,126],{"type":15,"tag":103,"props":104,"children":105},"thead",{},[106],{"type":15,"tag":107,"props":108,"children":109},"tr",{},[110,116,121],{"type":15,"tag":111,"props":112,"children":113},"th",{},[114],{"type":21,"value":115},"维度",{"type":15,"tag":111,"props":117,"children":118},{},[119],{"type":21,"value":120},"传统IDE",{"type":15,"tag":111,"props":122,"children":123},{},[124],{"type":21,"value":125},"AI代码补全",{"type":15,"tag":127,"props":128,"children":129},"tbody",{},[130,149,167,185],{"type":15,"tag":107,"props":131,"children":132},{},[133,139,144],{"type":15,"tag":134,"props":135,"children":136},"td",{},[137],{"type":21,"value":138},"依据",{"type":15,"tag":134,"props":140,"children":141},{},[142],{"type":21,"value":143},"类型系统 + API签名",{"type":15,"tag":134,"props":145,"children":146},{},[147],{"type":21,"value":148},"上下文语义 + 模式学习",{"type":15,"tag":107,"props":150,"children":151},{},[152,157,162],{"type":15,"tag":134,"props":153,"children":154},{},[155],{"type":21,"value":156},"范围",{"type":15,"tag":134,"props":158,"children":159},{},[160],{"type":21,"value":161},"符号级（变量名、方法名）",{"type":15,"tag":134,"props":163,"children":164},{},[165],{"type":21,"value":166},"逻辑级（整个函数体、代码块）",{"type":15,"tag":107,"props":168,"children":169},{},[170,175,180],{"type":15,"tag":134,"props":171,"children":172},{},[173],{"type":21,"value":174},"个性化",{"type":15,"tag":134,"props":176,"children":177},{},[178],{"type":21,"value":179},"无",{"type":15,"tag":134,"props":181,"children":182},{},[183],{"type":21,"value":184},"学习项目编码风格",{"type":15,"tag":107,"props":186,"children":187},{},[188,193,198],{"type":15,"tag":134,"props":189,"children":190},{},[191],{"type":21,"value":192},"推理能力",{"type":15,"tag":134,"props":194,"children":195},{},[196],{"type":21,"value":197},"基于静态分析",{"type":15,"tag":134,"props":199,"children":200},{},[201],{"type":21,"value":202},"基于语义理解",{"type":15,"tag":47,"props":204,"children":205},{},[],{"type":15,"tag":24,"props":207,"children":209},{"id":208},"代表工具",[210],{"type":21,"value":208},{"type":15,"tag":212,"props":213,"children":214},"ul",{},[215,226,236,246],{"type":15,"tag":216,"props":217,"children":218},"li",{},[219,224],{"type":15,"tag":34,"props":220,"children":221},{},[222],{"type":21,"value":223},"GitHub Copilot",{"type":21,"value":225}," — 最广泛使用的AI补全工具，深度集成VS Code和JetBrains",{"type":15,"tag":216,"props":227,"children":228},{},[229,234],{"type":15,"tag":34,"props":230,"children":231},{},[232],{"type":21,"value":233},"Tabnine",{"type":21,"value":235}," — 注重隐私的本地化AI补全方案",{"type":15,"tag":216,"props":237,"children":238},{},[239,244],{"type":15,"tag":34,"props":240,"children":241},{},[242],{"type":21,"value":243},"Codeium（Windsurf内置）",{"type":21,"value":245}," — 免费且支持多IDE",{"type":15,"tag":216,"props":247,"children":248},{},[249,254],{"type":15,"tag":34,"props":250,"children":251},{},[252],{"type":21,"value":253},"JetBrains AI Assistant",{"type":21,"value":255}," — JetBrains生态的原生集成",{"type":15,"tag":47,"props":257,"children":258},{},[],{"type":15,"tag":24,"props":260,"children":262},{"id":261},"适用场景",[263],{"type":21,"value":261},{"type":15,"tag":212,"props":265,"children":266},{},[267,272,277,282],{"type":15,"tag":216,"props":268,"children":269},{},[270],{"type":21,"value":271},"日常编码效率提升",{"type":15,"tag":216,"props":273,"children":274},{},[275],{"type":21,"value":276},"重复性代码（样板代码、getter\u002Fsetter、测试用例）",{"type":15,"tag":216,"props":278,"children":279},{},[280],{"type":21,"value":281},"学习新语言\u002FAPI时的实时辅助",{"type":15,"tag":216,"props":283,"children":284},{},[285],{"type":21,"value":286},"快速编写常见算法和数据结构",{"type":15,"tag":47,"props":288,"children":289},{},[],{"type":15,"tag":24,"props":291,"children":293},{"id":292},"局限性",[294],{"type":21,"value":292},{"type":15,"tag":212,"props":296,"children":297},{},[298,308,318,328],{"type":15,"tag":216,"props":299,"children":300},{},[301,306],{"type":15,"tag":34,"props":302,"children":303},{},[304],{"type":21,"value":305},"无法理解业务意图",{"type":21,"value":307},"：只能根据上下文模式补全，不理解\"为什么写这段代码\"",{"type":15,"tag":216,"props":309,"children":310},{},[311,316],{"type":15,"tag":34,"props":312,"children":313},{},[314],{"type":21,"value":315},"可能生成\"看起来对\"的错误代码",{"type":21,"value":317},"：语法正确但逻辑错误的补全难以察觉",{"type":15,"tag":216,"props":319,"children":320},{},[321,326],{"type":15,"tag":34,"props":322,"children":323},{},[324],{"type":21,"value":325},"安全风险",{"type":21,"value":327},"：可能复制训练数据中的漏洞模式或不安全写法",{"type":15,"tag":216,"props":329,"children":330},{},[331,336],{"type":15,"tag":34,"props":332,"children":333},{},[334],{"type":21,"value":335},"上下文窗口有限",{"type":21,"value":337},"：无法看到项目全貌，跨文件推理能力弱",{"type":15,"tag":47,"props":339,"children":340},{},[],{"type":15,"tag":24,"props":342,"children":344},{"id":343},"在范式演进中的位置",[345],{"type":21,"value":343},{"type":15,"tag":30,"props":347,"children":348},{},[349],{"type":21,"value":350},"Code Completion 是AI编程的起点——它让开发者第一次感受到\"AI在帮我写代码\"。但从交互模式上看，人类仍然是100%主导的：你决定写什么，AI只是帮你少敲几个键。",{"type":15,"tag":30,"props":352,"children":353},{},[354,356,361],{"type":21,"value":355},"下一步跃迁：",{"type":15,"tag":34,"props":357,"children":358},{},[359],{"type":21,"value":360},"Vibe Coding",{"type":21,"value":362},"——从\"AI帮你打字\"到\"AI帮你实现想法\"。",{"type":15,"tag":47,"props":364,"children":365},{},[],{"type":15,"tag":24,"props":367,"children":369},{"id":368},"适用场景对照",[370],{"type":21,"value":368},{"type":15,"tag":99,"props":372,"children":373},{},[374,388],{"type":15,"tag":103,"props":375,"children":376},{},[377],{"type":15,"tag":107,"props":378,"children":379},{},[380,384],{"type":15,"tag":111,"props":381,"children":382},{},[383],{"type":21,"value":115},{"type":15,"tag":111,"props":385,"children":386},{},[387],{"type":21,"value":38},{"type":15,"tag":127,"props":389,"children":390},{},[391,407,423,439,454],{"type":15,"tag":107,"props":392,"children":393},{},[394,402],{"type":15,"tag":134,"props":395,"children":396},{},[397],{"type":15,"tag":34,"props":398,"children":399},{},[400],{"type":21,"value":401},"人类角色",{"type":15,"tag":134,"props":403,"children":404},{},[405],{"type":21,"value":406},"打字员——决定每一行代码的内容",{"type":15,"tag":107,"props":408,"children":409},{},[410,418],{"type":15,"tag":134,"props":411,"children":412},{},[413],{"type":15,"tag":34,"props":414,"children":415},{},[416],{"type":21,"value":417},"AI角色",{"type":15,"tag":134,"props":419,"children":420},{},[421],{"type":21,"value":422},"智能输入法——预测下一段代码",{"type":15,"tag":107,"props":424,"children":425},{},[426,434],{"type":15,"tag":134,"props":427,"children":428},{},[429],{"type":15,"tag":34,"props":430,"children":431},{},[432],{"type":21,"value":433},"核心优势",{"type":15,"tag":134,"props":435,"children":436},{},[437],{"type":21,"value":438},"减少重复劳动，提升编码速度",{"type":15,"tag":107,"props":440,"children":441},{},[442,449],{"type":15,"tag":134,"props":443,"children":444},{},[445],{"type":15,"tag":34,"props":446,"children":447},{},[448],{"type":21,"value":261},{"type":15,"tag":134,"props":450,"children":451},{},[452],{"type":21,"value":453},"日常编码、学习新语言、编写样板代码",{"type":15,"tag":107,"props":455,"children":456},{},[457,465],{"type":15,"tag":134,"props":458,"children":459},{},[460],{"type":15,"tag":34,"props":461,"children":462},{},[463],{"type":21,"value":464},"代码质量",{"type":15,"tag":134,"props":466,"children":467},{},[468],{"type":21,"value":469},"人工完全负责，AI只做建议",{"type":15,"tag":47,"props":471,"children":472},{},[],{"type":15,"tag":24,"props":474,"children":476},{"id":475},"实战示例同一需求的-code-completion-写法",[477],{"type":21,"value":478},"实战示例：同一需求的 Code Completion 写法",{"type":15,"tag":480,"props":481,"children":482},"blockquote",{},[483],{"type":15,"tag":30,"props":484,"children":485},{},[486],{"type":21,"value":487},"需求：构建一个天气查询页面，调用 OpenWeatherMap API 显示当前天气",{"type":15,"tag":30,"props":489,"children":490},{},[491],{"type":21,"value":492},"开发者手写组件结构和逻辑框架，AI 在每一步补全细节：",{"type":15,"tag":494,"props":495,"children":499},"pre",{"className":496,"code":497,"language":498,"meta":7,"style":7},"language-tsx shiki shiki-themes github-dark","\u002F\u002F 开发者手动写组件骨架\nimport { useState } from 'react'\n\nexport function WeatherApp() {\n  const [city, setCity] = useState('')\n  \u002F\u002F AI 补全 ↓（根据上下文推断需要 loading 和 error 状态）\n  const [weather, setWeather] = useState\u003CWeatherData | null>(null)\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState\u003Cstring | null>(null)\n\n  const fetchWeather = async () => {\n    \u002F\u002F 开发者写到这里，AI 补全下面的逻辑 ↓\n    setLoading(true)\n    setError(null)\n    try {\n      const res = await fetch(\n        `https:\u002F\u002Fapi.openweathermap.org\u002Fdata\u002F2.5\u002Fweather?q=${city}&appid=${API_KEY}&units=metric`\n      )\n      if (!res.ok) throw new Error('城市未找到')\n      setWeather(await res.json())\n    } catch (err) {\n      setError(err instanceof Error ? err.message : '查询失败')\n    } finally {\n      setLoading(false)\n    }\n  }\n\n  return (\n    \u002F\u002F 开发者写 \u003Cdiv className=\"，AI 补全完整样式 ↓\n    \u003Cdiv className=\"p-6 max-w-md mx-auto\">\n      \u003Cinput value={city} onChange={e => setCity(e.target.value)} \u002F>\n      \u003Cbutton onClick={fetchWeather}>查询\u003C\u002Fbutton>\n      {loading && \u003Cp>加载中...\u003C\u002Fp>}\n      {error && \u003Cp className=\"text-red-400\">{error}\u003C\u002Fp>}\n      {weather && (\n        \u003Cdiv>\n          \u003Ch2>{weather.name}\u003C\u002Fh2>\n          \u003Cp>{Math.round(weather.main.temp)}°C\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002Fdiv>\n  )\n}\n","tsx",[500],{"type":15,"tag":501,"props":502,"children":503},"code",{"__ignoreMap":7},[504,516,543,553,578,638,647,719,770,837,845,883,892,914,935,948,981,1009,1018,1070,1103,1122,1169,1186,1207,1216,1225,1233,1247,1256,1290,1353,1388,1425,1472,1489,1506,1532,1567,1584,1593,1610,1619],{"type":15,"tag":505,"props":506,"children":509},"span",{"class":507,"line":508},"line",1,[510],{"type":15,"tag":505,"props":511,"children":513},{"style":512},"--shiki-default:#6A737D",[514],{"type":21,"value":515},"\u002F\u002F 开发者手动写组件骨架\n",{"type":15,"tag":505,"props":517,"children":519},{"class":507,"line":518},2,[520,526,532,537],{"type":15,"tag":505,"props":521,"children":523},{"style":522},"--shiki-default:#F97583",[524],{"type":21,"value":525},"import",{"type":15,"tag":505,"props":527,"children":529},{"style":528},"--shiki-default:#E1E4E8",[530],{"type":21,"value":531}," { useState } ",{"type":15,"tag":505,"props":533,"children":534},{"style":522},[535],{"type":21,"value":536},"from",{"type":15,"tag":505,"props":538,"children":540},{"style":539},"--shiki-default:#9ECBFF",[541],{"type":21,"value":542}," 'react'\n",{"type":15,"tag":505,"props":544,"children":546},{"class":507,"line":545},3,[547],{"type":15,"tag":505,"props":548,"children":550},{"emptyLinePlaceholder":549},true,[551],{"type":21,"value":552},"\n",{"type":15,"tag":505,"props":554,"children":556},{"class":507,"line":555},4,[557,562,567,573],{"type":15,"tag":505,"props":558,"children":559},{"style":522},[560],{"type":21,"value":561},"export",{"type":15,"tag":505,"props":563,"children":564},{"style":522},[565],{"type":21,"value":566}," function",{"type":15,"tag":505,"props":568,"children":570},{"style":569},"--shiki-default:#B392F0",[571],{"type":21,"value":572}," WeatherApp",{"type":15,"tag":505,"props":574,"children":575},{"style":528},[576],{"type":21,"value":577},"() {\n",{"type":15,"tag":505,"props":579,"children":581},{"class":507,"line":580},5,[582,587,592,598,603,608,613,618,623,628,633],{"type":15,"tag":505,"props":583,"children":584},{"style":522},[585],{"type":21,"value":586},"  const",{"type":15,"tag":505,"props":588,"children":589},{"style":528},[590],{"type":21,"value":591}," [",{"type":15,"tag":505,"props":593,"children":595},{"style":594},"--shiki-default:#79B8FF",[596],{"type":21,"value":597},"city",{"type":15,"tag":505,"props":599,"children":600},{"style":528},[601],{"type":21,"value":602},", ",{"type":15,"tag":505,"props":604,"children":605},{"style":594},[606],{"type":21,"value":607},"setCity",{"type":15,"tag":505,"props":609,"children":610},{"style":528},[611],{"type":21,"value":612},"] ",{"type":15,"tag":505,"props":614,"children":615},{"style":522},[616],{"type":21,"value":617},"=",{"type":15,"tag":505,"props":619,"children":620},{"style":569},[621],{"type":21,"value":622}," useState",{"type":15,"tag":505,"props":624,"children":625},{"style":528},[626],{"type":21,"value":627},"(",{"type":15,"tag":505,"props":629,"children":630},{"style":539},[631],{"type":21,"value":632},"''",{"type":15,"tag":505,"props":634,"children":635},{"style":528},[636],{"type":21,"value":637},")\n",{"type":15,"tag":505,"props":639,"children":641},{"class":507,"line":640},6,[642],{"type":15,"tag":505,"props":643,"children":644},{"style":512},[645],{"type":21,"value":646},"  \u002F\u002F AI 补全 ↓（根据上下文推断需要 loading 和 error 状态）\n",{"type":15,"tag":505,"props":648,"children":650},{"class":507,"line":649},7,[651,655,659,664,668,673,677,681,685,690,695,700,705,710,715],{"type":15,"tag":505,"props":652,"children":653},{"style":522},[654],{"type":21,"value":586},{"type":15,"tag":505,"props":656,"children":657},{"style":528},[658],{"type":21,"value":591},{"type":15,"tag":505,"props":660,"children":661},{"style":594},[662],{"type":21,"value":663},"weather",{"type":15,"tag":505,"props":665,"children":666},{"style":528},[667],{"type":21,"value":602},{"type":15,"tag":505,"props":669,"children":670},{"style":594},[671],{"type":21,"value":672},"setWeather",{"type":15,"tag":505,"props":674,"children":675},{"style":528},[676],{"type":21,"value":612},{"type":15,"tag":505,"props":678,"children":679},{"style":522},[680],{"type":21,"value":617},{"type":15,"tag":505,"props":682,"children":683},{"style":569},[684],{"type":21,"value":622},{"type":15,"tag":505,"props":686,"children":687},{"style":528},[688],{"type":21,"value":689},"\u003C",{"type":15,"tag":505,"props":691,"children":692},{"style":569},[693],{"type":21,"value":694},"WeatherData",{"type":15,"tag":505,"props":696,"children":697},{"style":522},[698],{"type":21,"value":699}," |",{"type":15,"tag":505,"props":701,"children":702},{"style":594},[703],{"type":21,"value":704}," null",{"type":15,"tag":505,"props":706,"children":707},{"style":528},[708],{"type":21,"value":709},">(",{"type":15,"tag":505,"props":711,"children":712},{"style":594},[713],{"type":21,"value":714},"null",{"type":15,"tag":505,"props":716,"children":717},{"style":528},[718],{"type":21,"value":637},{"type":15,"tag":505,"props":720,"children":722},{"class":507,"line":721},8,[723,727,731,736,740,745,749,753,757,761,766],{"type":15,"tag":505,"props":724,"children":725},{"style":522},[726],{"type":21,"value":586},{"type":15,"tag":505,"props":728,"children":729},{"style":528},[730],{"type":21,"value":591},{"type":15,"tag":505,"props":732,"children":733},{"style":594},[734],{"type":21,"value":735},"loading",{"type":15,"tag":505,"props":737,"children":738},{"style":528},[739],{"type":21,"value":602},{"type":15,"tag":505,"props":741,"children":742},{"style":594},[743],{"type":21,"value":744},"setLoading",{"type":15,"tag":505,"props":746,"children":747},{"style":528},[748],{"type":21,"value":612},{"type":15,"tag":505,"props":750,"children":751},{"style":522},[752],{"type":21,"value":617},{"type":15,"tag":505,"props":754,"children":755},{"style":569},[756],{"type":21,"value":622},{"type":15,"tag":505,"props":758,"children":759},{"style":528},[760],{"type":21,"value":627},{"type":15,"tag":505,"props":762,"children":763},{"style":594},[764],{"type":21,"value":765},"false",{"type":15,"tag":505,"props":767,"children":768},{"style":528},[769],{"type":21,"value":637},{"type":15,"tag":505,"props":771,"children":773},{"class":507,"line":772},9,[774,778,782,787,791,796,800,804,808,812,817,821,825,829,833],{"type":15,"tag":505,"props":775,"children":776},{"style":522},[777],{"type":21,"value":586},{"type":15,"tag":505,"props":779,"children":780},{"style":528},[781],{"type":21,"value":591},{"type":15,"tag":505,"props":783,"children":784},{"style":594},[785],{"type":21,"value":786},"error",{"type":15,"tag":505,"props":788,"children":789},{"style":528},[790],{"type":21,"value":602},{"type":15,"tag":505,"props":792,"children":793},{"style":594},[794],{"type":21,"value":795},"setError",{"type":15,"tag":505,"props":797,"children":798},{"style":528},[799],{"type":21,"value":612},{"type":15,"tag":505,"props":801,"children":802},{"style":522},[803],{"type":21,"value":617},{"type":15,"tag":505,"props":805,"children":806},{"style":569},[807],{"type":21,"value":622},{"type":15,"tag":505,"props":809,"children":810},{"style":528},[811],{"type":21,"value":689},{"type":15,"tag":505,"props":813,"children":814},{"style":594},[815],{"type":21,"value":816},"string",{"type":15,"tag":505,"props":818,"children":819},{"style":522},[820],{"type":21,"value":699},{"type":15,"tag":505,"props":822,"children":823},{"style":594},[824],{"type":21,"value":704},{"type":15,"tag":505,"props":826,"children":827},{"style":528},[828],{"type":21,"value":709},{"type":15,"tag":505,"props":830,"children":831},{"style":594},[832],{"type":21,"value":714},{"type":15,"tag":505,"props":834,"children":835},{"style":528},[836],{"type":21,"value":637},{"type":15,"tag":505,"props":838,"children":840},{"class":507,"line":839},10,[841],{"type":15,"tag":505,"props":842,"children":843},{"emptyLinePlaceholder":549},[844],{"type":21,"value":552},{"type":15,"tag":505,"props":846,"children":848},{"class":507,"line":847},11,[849,853,858,863,868,873,878],{"type":15,"tag":505,"props":850,"children":851},{"style":522},[852],{"type":21,"value":586},{"type":15,"tag":505,"props":854,"children":855},{"style":569},[856],{"type":21,"value":857}," fetchWeather",{"type":15,"tag":505,"props":859,"children":860},{"style":522},[861],{"type":21,"value":862}," =",{"type":15,"tag":505,"props":864,"children":865},{"style":522},[866],{"type":21,"value":867}," async",{"type":15,"tag":505,"props":869,"children":870},{"style":528},[871],{"type":21,"value":872}," () ",{"type":15,"tag":505,"props":874,"children":875},{"style":522},[876],{"type":21,"value":877},"=>",{"type":15,"tag":505,"props":879,"children":880},{"style":528},[881],{"type":21,"value":882}," {\n",{"type":15,"tag":505,"props":884,"children":886},{"class":507,"line":885},12,[887],{"type":15,"tag":505,"props":888,"children":889},{"style":512},[890],{"type":21,"value":891},"    \u002F\u002F 开发者写到这里，AI 补全下面的逻辑 ↓\n",{"type":15,"tag":505,"props":893,"children":895},{"class":507,"line":894},13,[896,901,905,910],{"type":15,"tag":505,"props":897,"children":898},{"style":569},[899],{"type":21,"value":900},"    setLoading",{"type":15,"tag":505,"props":902,"children":903},{"style":528},[904],{"type":21,"value":627},{"type":15,"tag":505,"props":906,"children":907},{"style":594},[908],{"type":21,"value":909},"true",{"type":15,"tag":505,"props":911,"children":912},{"style":528},[913],{"type":21,"value":637},{"type":15,"tag":505,"props":915,"children":917},{"class":507,"line":916},14,[918,923,927,931],{"type":15,"tag":505,"props":919,"children":920},{"style":569},[921],{"type":21,"value":922},"    setError",{"type":15,"tag":505,"props":924,"children":925},{"style":528},[926],{"type":21,"value":627},{"type":15,"tag":505,"props":928,"children":929},{"style":594},[930],{"type":21,"value":714},{"type":15,"tag":505,"props":932,"children":933},{"style":528},[934],{"type":21,"value":637},{"type":15,"tag":505,"props":936,"children":938},{"class":507,"line":937},15,[939,944],{"type":15,"tag":505,"props":940,"children":941},{"style":522},[942],{"type":21,"value":943},"    try",{"type":15,"tag":505,"props":945,"children":946},{"style":528},[947],{"type":21,"value":882},{"type":15,"tag":505,"props":949,"children":951},{"class":507,"line":950},16,[952,957,962,966,971,976],{"type":15,"tag":505,"props":953,"children":954},{"style":522},[955],{"type":21,"value":956},"      const",{"type":15,"tag":505,"props":958,"children":959},{"style":594},[960],{"type":21,"value":961}," res",{"type":15,"tag":505,"props":963,"children":964},{"style":522},[965],{"type":21,"value":862},{"type":15,"tag":505,"props":967,"children":968},{"style":522},[969],{"type":21,"value":970}," await",{"type":15,"tag":505,"props":972,"children":973},{"style":569},[974],{"type":21,"value":975}," fetch",{"type":15,"tag":505,"props":977,"children":978},{"style":528},[979],{"type":21,"value":980},"(\n",{"type":15,"tag":505,"props":982,"children":984},{"class":507,"line":983},17,[985,990,994,999,1004],{"type":15,"tag":505,"props":986,"children":987},{"style":539},[988],{"type":21,"value":989},"        `https:\u002F\u002Fapi.openweathermap.org\u002Fdata\u002F2.5\u002Fweather?q=${",{"type":15,"tag":505,"props":991,"children":992},{"style":528},[993],{"type":21,"value":597},{"type":15,"tag":505,"props":995,"children":996},{"style":539},[997],{"type":21,"value":998},"}&appid=${",{"type":15,"tag":505,"props":1000,"children":1001},{"style":594},[1002],{"type":21,"value":1003},"API_KEY",{"type":15,"tag":505,"props":1005,"children":1006},{"style":539},[1007],{"type":21,"value":1008},"}&units=metric`\n",{"type":15,"tag":505,"props":1010,"children":1012},{"class":507,"line":1011},18,[1013],{"type":15,"tag":505,"props":1014,"children":1015},{"style":528},[1016],{"type":21,"value":1017},"      )\n",{"type":15,"tag":505,"props":1019,"children":1021},{"class":507,"line":1020},19,[1022,1027,1032,1037,1042,1047,1052,1057,1061,1066],{"type":15,"tag":505,"props":1023,"children":1024},{"style":522},[1025],{"type":21,"value":1026},"      if",{"type":15,"tag":505,"props":1028,"children":1029},{"style":528},[1030],{"type":21,"value":1031}," (",{"type":15,"tag":505,"props":1033,"children":1034},{"style":522},[1035],{"type":21,"value":1036},"!",{"type":15,"tag":505,"props":1038,"children":1039},{"style":528},[1040],{"type":21,"value":1041},"res.ok) ",{"type":15,"tag":505,"props":1043,"children":1044},{"style":522},[1045],{"type":21,"value":1046},"throw",{"type":15,"tag":505,"props":1048,"children":1049},{"style":522},[1050],{"type":21,"value":1051}," new",{"type":15,"tag":505,"props":1053,"children":1054},{"style":569},[1055],{"type":21,"value":1056}," Error",{"type":15,"tag":505,"props":1058,"children":1059},{"style":528},[1060],{"type":21,"value":627},{"type":15,"tag":505,"props":1062,"children":1063},{"style":539},[1064],{"type":21,"value":1065},"'城市未找到'",{"type":15,"tag":505,"props":1067,"children":1068},{"style":528},[1069],{"type":21,"value":637},{"type":15,"tag":505,"props":1071,"children":1073},{"class":507,"line":1072},20,[1074,1079,1083,1088,1093,1098],{"type":15,"tag":505,"props":1075,"children":1076},{"style":569},[1077],{"type":21,"value":1078},"      setWeather",{"type":15,"tag":505,"props":1080,"children":1081},{"style":528},[1082],{"type":21,"value":627},{"type":15,"tag":505,"props":1084,"children":1085},{"style":522},[1086],{"type":21,"value":1087},"await",{"type":15,"tag":505,"props":1089,"children":1090},{"style":528},[1091],{"type":21,"value":1092}," res.",{"type":15,"tag":505,"props":1094,"children":1095},{"style":569},[1096],{"type":21,"value":1097},"json",{"type":15,"tag":505,"props":1099,"children":1100},{"style":528},[1101],{"type":21,"value":1102},"())\n",{"type":15,"tag":505,"props":1104,"children":1106},{"class":507,"line":1105},21,[1107,1112,1117],{"type":15,"tag":505,"props":1108,"children":1109},{"style":528},[1110],{"type":21,"value":1111},"    } ",{"type":15,"tag":505,"props":1113,"children":1114},{"style":522},[1115],{"type":21,"value":1116},"catch",{"type":15,"tag":505,"props":1118,"children":1119},{"style":528},[1120],{"type":21,"value":1121}," (err) {\n",{"type":15,"tag":505,"props":1123,"children":1125},{"class":507,"line":1124},22,[1126,1131,1136,1141,1145,1150,1155,1160,1165],{"type":15,"tag":505,"props":1127,"children":1128},{"style":569},[1129],{"type":21,"value":1130},"      setError",{"type":15,"tag":505,"props":1132,"children":1133},{"style":528},[1134],{"type":21,"value":1135},"(err ",{"type":15,"tag":505,"props":1137,"children":1138},{"style":522},[1139],{"type":21,"value":1140},"instanceof",{"type":15,"tag":505,"props":1142,"children":1143},{"style":569},[1144],{"type":21,"value":1056},{"type":15,"tag":505,"props":1146,"children":1147},{"style":522},[1148],{"type":21,"value":1149}," ?",{"type":15,"tag":505,"props":1151,"children":1152},{"style":528},[1153],{"type":21,"value":1154}," err.message ",{"type":15,"tag":505,"props":1156,"children":1157},{"style":522},[1158],{"type":21,"value":1159},":",{"type":15,"tag":505,"props":1161,"children":1162},{"style":539},[1163],{"type":21,"value":1164}," '查询失败'",{"type":15,"tag":505,"props":1166,"children":1167},{"style":528},[1168],{"type":21,"value":637},{"type":15,"tag":505,"props":1170,"children":1172},{"class":507,"line":1171},23,[1173,1177,1182],{"type":15,"tag":505,"props":1174,"children":1175},{"style":528},[1176],{"type":21,"value":1111},{"type":15,"tag":505,"props":1178,"children":1179},{"style":522},[1180],{"type":21,"value":1181},"finally",{"type":15,"tag":505,"props":1183,"children":1184},{"style":528},[1185],{"type":21,"value":882},{"type":15,"tag":505,"props":1187,"children":1189},{"class":507,"line":1188},24,[1190,1195,1199,1203],{"type":15,"tag":505,"props":1191,"children":1192},{"style":569},[1193],{"type":21,"value":1194},"      setLoading",{"type":15,"tag":505,"props":1196,"children":1197},{"style":528},[1198],{"type":21,"value":627},{"type":15,"tag":505,"props":1200,"children":1201},{"style":594},[1202],{"type":21,"value":765},{"type":15,"tag":505,"props":1204,"children":1205},{"style":528},[1206],{"type":21,"value":637},{"type":15,"tag":505,"props":1208,"children":1210},{"class":507,"line":1209},25,[1211],{"type":15,"tag":505,"props":1212,"children":1213},{"style":528},[1214],{"type":21,"value":1215},"    }\n",{"type":15,"tag":505,"props":1217,"children":1219},{"class":507,"line":1218},26,[1220],{"type":15,"tag":505,"props":1221,"children":1222},{"style":528},[1223],{"type":21,"value":1224},"  }\n",{"type":15,"tag":505,"props":1226,"children":1228},{"class":507,"line":1227},27,[1229],{"type":15,"tag":505,"props":1230,"children":1231},{"emptyLinePlaceholder":549},[1232],{"type":21,"value":552},{"type":15,"tag":505,"props":1234,"children":1236},{"class":507,"line":1235},28,[1237,1242],{"type":15,"tag":505,"props":1238,"children":1239},{"style":522},[1240],{"type":21,"value":1241},"  return",{"type":15,"tag":505,"props":1243,"children":1244},{"style":528},[1245],{"type":21,"value":1246}," (\n",{"type":15,"tag":505,"props":1248,"children":1250},{"class":507,"line":1249},29,[1251],{"type":15,"tag":505,"props":1252,"children":1253},{"style":512},[1254],{"type":21,"value":1255},"    \u002F\u002F 开发者写 \u003Cdiv className=\"，AI 补全完整样式 ↓\n",{"type":15,"tag":505,"props":1257,"children":1259},{"class":507,"line":1258},30,[1260,1265,1271,1276,1280,1285],{"type":15,"tag":505,"props":1261,"children":1262},{"style":528},[1263],{"type":21,"value":1264},"    \u003C",{"type":15,"tag":505,"props":1266,"children":1268},{"style":1267},"--shiki-default:#85E89D",[1269],{"type":21,"value":1270},"div",{"type":15,"tag":505,"props":1272,"children":1273},{"style":569},[1274],{"type":21,"value":1275}," className",{"type":15,"tag":505,"props":1277,"children":1278},{"style":522},[1279],{"type":21,"value":617},{"type":15,"tag":505,"props":1281,"children":1282},{"style":539},[1283],{"type":21,"value":1284},"\"p-6 max-w-md mx-auto\"",{"type":15,"tag":505,"props":1286,"children":1287},{"style":528},[1288],{"type":21,"value":1289},">\n",{"type":15,"tag":505,"props":1291,"children":1293},{"class":507,"line":1292},31,[1294,1299,1304,1309,1313,1318,1323,1327,1332,1338,1343,1348],{"type":15,"tag":505,"props":1295,"children":1296},{"style":528},[1297],{"type":21,"value":1298},"      \u003C",{"type":15,"tag":505,"props":1300,"children":1301},{"style":1267},[1302],{"type":21,"value":1303},"input",{"type":15,"tag":505,"props":1305,"children":1306},{"style":569},[1307],{"type":21,"value":1308}," value",{"type":15,"tag":505,"props":1310,"children":1311},{"style":522},[1312],{"type":21,"value":617},{"type":15,"tag":505,"props":1314,"children":1315},{"style":528},[1316],{"type":21,"value":1317},"{city} ",{"type":15,"tag":505,"props":1319,"children":1320},{"style":569},[1321],{"type":21,"value":1322},"onChange",{"type":15,"tag":505,"props":1324,"children":1325},{"style":522},[1326],{"type":21,"value":617},{"type":15,"tag":505,"props":1328,"children":1329},{"style":528},[1330],{"type":21,"value":1331},"{",{"type":15,"tag":505,"props":1333,"children":1335},{"style":1334},"--shiki-default:#FFAB70",[1336],{"type":21,"value":1337},"e",{"type":15,"tag":505,"props":1339,"children":1340},{"style":522},[1341],{"type":21,"value":1342}," =>",{"type":15,"tag":505,"props":1344,"children":1345},{"style":569},[1346],{"type":21,"value":1347}," setCity",{"type":15,"tag":505,"props":1349,"children":1350},{"style":528},[1351],{"type":21,"value":1352},"(e.target.value)} \u002F>\n",{"type":15,"tag":505,"props":1354,"children":1356},{"class":507,"line":1355},32,[1357,1361,1366,1371,1375,1380,1384],{"type":15,"tag":505,"props":1358,"children":1359},{"style":528},[1360],{"type":21,"value":1298},{"type":15,"tag":505,"props":1362,"children":1363},{"style":1267},[1364],{"type":21,"value":1365},"button",{"type":15,"tag":505,"props":1367,"children":1368},{"style":569},[1369],{"type":21,"value":1370}," onClick",{"type":15,"tag":505,"props":1372,"children":1373},{"style":522},[1374],{"type":21,"value":617},{"type":15,"tag":505,"props":1376,"children":1377},{"style":528},[1378],{"type":21,"value":1379},"{fetchWeather}>查询\u003C\u002F",{"type":15,"tag":505,"props":1381,"children":1382},{"style":1267},[1383],{"type":21,"value":1365},{"type":15,"tag":505,"props":1385,"children":1386},{"style":528},[1387],{"type":21,"value":1289},{"type":15,"tag":505,"props":1389,"children":1391},{"class":507,"line":1390},33,[1392,1397,1402,1407,1411,1416,1420],{"type":15,"tag":505,"props":1393,"children":1394},{"style":528},[1395],{"type":21,"value":1396},"      {loading ",{"type":15,"tag":505,"props":1398,"children":1399},{"style":522},[1400],{"type":21,"value":1401},"&&",{"type":15,"tag":505,"props":1403,"children":1404},{"style":528},[1405],{"type":21,"value":1406}," \u003C",{"type":15,"tag":505,"props":1408,"children":1409},{"style":1267},[1410],{"type":21,"value":30},{"type":15,"tag":505,"props":1412,"children":1413},{"style":528},[1414],{"type":21,"value":1415},">加载中...\u003C\u002F",{"type":15,"tag":505,"props":1417,"children":1418},{"style":1267},[1419],{"type":21,"value":30},{"type":15,"tag":505,"props":1421,"children":1422},{"style":528},[1423],{"type":21,"value":1424},">}\n",{"type":15,"tag":505,"props":1426,"children":1428},{"class":507,"line":1427},34,[1429,1434,1438,1442,1446,1450,1454,1459,1464,1468],{"type":15,"tag":505,"props":1430,"children":1431},{"style":528},[1432],{"type":21,"value":1433},"      {error ",{"type":15,"tag":505,"props":1435,"children":1436},{"style":522},[1437],{"type":21,"value":1401},{"type":15,"tag":505,"props":1439,"children":1440},{"style":528},[1441],{"type":21,"value":1406},{"type":15,"tag":505,"props":1443,"children":1444},{"style":1267},[1445],{"type":21,"value":30},{"type":15,"tag":505,"props":1447,"children":1448},{"style":569},[1449],{"type":21,"value":1275},{"type":15,"tag":505,"props":1451,"children":1452},{"style":522},[1453],{"type":21,"value":617},{"type":15,"tag":505,"props":1455,"children":1456},{"style":539},[1457],{"type":21,"value":1458},"\"text-red-400\"",{"type":15,"tag":505,"props":1460,"children":1461},{"style":528},[1462],{"type":21,"value":1463},">{error}\u003C\u002F",{"type":15,"tag":505,"props":1465,"children":1466},{"style":1267},[1467],{"type":21,"value":30},{"type":15,"tag":505,"props":1469,"children":1470},{"style":528},[1471],{"type":21,"value":1424},{"type":15,"tag":505,"props":1473,"children":1475},{"class":507,"line":1474},35,[1476,1481,1485],{"type":15,"tag":505,"props":1477,"children":1478},{"style":528},[1479],{"type":21,"value":1480},"      {weather ",{"type":15,"tag":505,"props":1482,"children":1483},{"style":522},[1484],{"type":21,"value":1401},{"type":15,"tag":505,"props":1486,"children":1487},{"style":528},[1488],{"type":21,"value":1246},{"type":15,"tag":505,"props":1490,"children":1492},{"class":507,"line":1491},36,[1493,1498,1502],{"type":15,"tag":505,"props":1494,"children":1495},{"style":528},[1496],{"type":21,"value":1497},"        \u003C",{"type":15,"tag":505,"props":1499,"children":1500},{"style":1267},[1501],{"type":21,"value":1270},{"type":15,"tag":505,"props":1503,"children":1504},{"style":528},[1505],{"type":21,"value":1289},{"type":15,"tag":505,"props":1507,"children":1509},{"class":507,"line":1508},37,[1510,1515,1519,1524,1528],{"type":15,"tag":505,"props":1511,"children":1512},{"style":528},[1513],{"type":21,"value":1514},"          \u003C",{"type":15,"tag":505,"props":1516,"children":1517},{"style":1267},[1518],{"type":21,"value":24},{"type":15,"tag":505,"props":1520,"children":1521},{"style":528},[1522],{"type":21,"value":1523},">{weather.name}\u003C\u002F",{"type":15,"tag":505,"props":1525,"children":1526},{"style":1267},[1527],{"type":21,"value":24},{"type":15,"tag":505,"props":1529,"children":1530},{"style":528},[1531],{"type":21,"value":1289},{"type":15,"tag":505,"props":1533,"children":1535},{"class":507,"line":1534},38,[1536,1540,1544,1549,1554,1559,1563],{"type":15,"tag":505,"props":1537,"children":1538},{"style":528},[1539],{"type":21,"value":1514},{"type":15,"tag":505,"props":1541,"children":1542},{"style":1267},[1543],{"type":21,"value":30},{"type":15,"tag":505,"props":1545,"children":1546},{"style":528},[1547],{"type":21,"value":1548},">{Math.",{"type":15,"tag":505,"props":1550,"children":1551},{"style":569},[1552],{"type":21,"value":1553},"round",{"type":15,"tag":505,"props":1555,"children":1556},{"style":528},[1557],{"type":21,"value":1558},"(weather.main.temp)}°C\u003C\u002F",{"type":15,"tag":505,"props":1560,"children":1561},{"style":1267},[1562],{"type":21,"value":30},{"type":15,"tag":505,"props":1564,"children":1565},{"style":528},[1566],{"type":21,"value":1289},{"type":15,"tag":505,"props":1568,"children":1570},{"class":507,"line":1569},39,[1571,1576,1580],{"type":15,"tag":505,"props":1572,"children":1573},{"style":528},[1574],{"type":21,"value":1575},"        \u003C\u002F",{"type":15,"tag":505,"props":1577,"children":1578},{"style":1267},[1579],{"type":21,"value":1270},{"type":15,"tag":505,"props":1581,"children":1582},{"style":528},[1583],{"type":21,"value":1289},{"type":15,"tag":505,"props":1585,"children":1587},{"class":507,"line":1586},40,[1588],{"type":15,"tag":505,"props":1589,"children":1590},{"style":528},[1591],{"type":21,"value":1592},"      )}\n",{"type":15,"tag":505,"props":1594,"children":1596},{"class":507,"line":1595},41,[1597,1602,1606],{"type":15,"tag":505,"props":1598,"children":1599},{"style":528},[1600],{"type":21,"value":1601},"    \u003C\u002F",{"type":15,"tag":505,"props":1603,"children":1604},{"style":1267},[1605],{"type":21,"value":1270},{"type":15,"tag":505,"props":1607,"children":1608},{"style":528},[1609],{"type":21,"value":1289},{"type":15,"tag":505,"props":1611,"children":1613},{"class":507,"line":1612},42,[1614],{"type":15,"tag":505,"props":1615,"children":1616},{"style":528},[1617],{"type":21,"value":1618},"  )\n",{"type":15,"tag":505,"props":1620,"children":1622},{"class":507,"line":1621},43,[1623],{"type":15,"tag":505,"props":1624,"children":1625},{"style":528},[1626],{"type":21,"value":1627},"}\n",{"type":15,"tag":30,"props":1629,"children":1630},{},[1631,1636],{"type":15,"tag":34,"props":1632,"children":1633},{},[1634],{"type":21,"value":1635},"关键特征",{"type":21,"value":1637},"：开发者主导每一行代码，AI 在输入过程中逐行\u002F逐块补全。你决定写什么，AI 帮你少敲几个键。",{"type":15,"tag":47,"props":1639,"children":1640},{},[],{"type":15,"tag":24,"props":1642,"children":1644},{"id":1643},"相关资源",[1645],{"type":21,"value":1643},{"type":15,"tag":212,"props":1647,"children":1648},{},[1649,1661],{"type":15,"tag":216,"props":1650,"children":1651},{},[1652],{"type":15,"tag":1653,"props":1654,"children":1658},"a",{"href":1655,"rel":1656},"https:\u002F\u002Fdocs.github.com\u002Fen\u002Fcopilot",[1657],"nofollow",[1659],{"type":21,"value":1660},"GitHub Copilot 官方文档",{"type":15,"tag":216,"props":1662,"children":1663},{},[1664],{"type":15,"tag":1653,"props":1665,"children":1668},{"href":1666,"rel":1667},"https:\u002F\u002Fwww.tabnine.com\u002F",[1657],[1669],{"type":21,"value":1670},"Tabnine AI Code Completion",{"type":15,"tag":1672,"props":1673,"children":1674},"style",{},[1675],{"type":21,"value":1676},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":545,"depth":545,"links":1678},[1679,1680,1685,1686,1687,1688,1689,1690,1691,1692],{"id":26,"depth":518,"text":26},{"id":52,"depth":518,"text":52,"children":1681},[1682,1683,1684],{"id":58,"depth":545,"text":61},{"id":69,"depth":545,"text":72},{"id":80,"depth":545,"text":83},{"id":94,"depth":518,"text":97},{"id":208,"depth":518,"text":208},{"id":261,"depth":518,"text":261},{"id":292,"depth":518,"text":292},{"id":343,"depth":518,"text":343},{"id":368,"depth":518,"text":368},{"id":475,"depth":518,"text":478},{"id":1643,"depth":518,"text":1643},"markdown","content:paradigms:code-completion.md","content","paradigms\u002Fcode-completion.md","paradigms\u002Fcode-completion","md",1777287374492]