vscode 二开踩坑记录

开发环境准备

npm ci报错:gyp相关报错

  1. 注意检查python版本和node-gyp的版本安装情况,严格按照这个文档:
  • 建议:
    • python: >= v3.12x
    • node-gyp: >= v10
  • python版本尽量不要污染全局,可以采用pyenv来管理和设置当前终端的python版本
  1. 如果还报错, 实测如下方案:

最简修复:删坏缓存、重新拉取(走国内镜像秒下)

bash 复制代码
# 1. 清掉损坏的缓存
rm -rf ~/.cache/node-gyp/22.17.0

# 2. 国内镜像(任选其一)
export npm_config_disturl=https://cdn.npmmirror.com/binaries/node
# 或者
# export npm_config_disturl=https://npmmirror.com/mirrors/node

# 3. 重装
cd vscode
rm -rf build/node_modules build/package-lock.json
npm cache clean --force
npm install

如果镜像也 404,就再手动灌一次(保证完整性)

bash 复制代码
# 1. 删除坏目录
rm -rf ~/.cache/node-gyp/22.17.0

# 2. 重新下载并解压
mkdir -p ~/.cache/node-gyp/22.17.0
cd ~/.cache/node-gyp/22.17.0
wget https://nodejs.org/dist/v22.17.0/node-v22.17.0-headers.tar.gz
tar --strip-components=1 -xf node-v22.17.0-headers.tar.gz

# 3. 告诉 node-gyp 别联网
export npm_config_nodedir=$HOME/.cache/node-gyp/22.17.0

# 4. 重装
cd vscode
rm -rf build/node_modules build/package-lock.json
npm install

一键脚本(Ubuntu / Node 20+)

bash 复制代码
#!/usr/bin/env bash
set -e
cd vscode

# 1. 清理坏缓存
rm -rf ~/.cache/node-gyp/22.17.0

# 2. 国内镜像拉取
export npm_config_disturl=https://cdn.npmmirror.com/binaries/node

# 3. 重装
rm -rf build/node_modules build/package-lock.json
npm cache clean --force
npm install
echo "✅ tree-sitter rebuilt ok"

保存为 fix-tree-sitter.shchmod +x fix-tree-sitter.sh && ./fix-tree-sitter.sh 即可。 最简修复:删坏缓存、重新拉取(走国内镜像秒下)

bash 复制代码
# 1. 清掉损坏的缓存
rm -rf ~/.cache/node-gyp/22.17.0

# 2. 国内镜像(任选其一)
export npm_config_disturl=https://cdn.npmmirror.com/binaries/node
# 或者
# export npm_config_disturl=https://npmmirror.com/mirrors/node

# 3. 重装
cd vscode
rm -rf build/node_modules build/package-lock.json
npm cache clean --force
npm install

如果镜像也 404,就再手动灌一次(保证完整性)

bash 复制代码
# 1. 删除坏目录
rm -rf ~/.cache/node-gyp/22.17.0

# 2. 重新下载并解压
mkdir -p ~/.cache/node-gyp/22.17.0
cd ~/.cache/node-gyp/22.17.0
wget https://nodejs.org/dist/v22.17.0/node-v22.17.0-headers.tar.gz
tar --strip-components=1 -xf node-v22.17.0-headers.tar.gz

# 3. 告诉 node-gyp 别联网
export npm_config_nodedir=$HOME/.cache/node-gyp/22.17.0

# 4. 重装
cd vscode
rm -rf build/node_modules build/package-lock.json
npm install

一键脚本(Ubuntu / Node 20+)

bash 复制代码
#!/usr/bin/env bash
set -e
cd vscode

# 1. 清理坏缓存
rm -rf ~/.cache/node-gyp/22.17.0

# 2. 国内镜像拉取
export npm_config_disturl=https://cdn.npmmirror.com/binaries/node

# 3. 重装
rm -rf build/node_modules build/package-lock.json
npm cache clean --force
npm install
echo "✅ tree-sitter rebuilt ok"

保存为 fix-tree-sitter.shchmod +x fix-tree-sitter.sh && ./fix-tree-sitter.sh 即可。

npm run watch 报错

  • 一定使用 npm ci来安装依赖,严格遵循package-lock文件锁定的版本: 这些报错都是「TypeScript 类型对不上」------不是语法错误,而是 xterm 升级后接口变了 + Node.js 类型定义里 errundefined 变成 null | undefined
    解决思路:要么 回退依赖版本 (最快),要么 改源码适配新定义 (长期)。下面给出两套现成命令,按需求二选一即可让 npm run watch 重新变绿。

方案 1:回退到官方 lock 版本(1 分钟搞定)

  1. 把 node_modules 和编译缓存清掉

    rm -rf node_modules

    rm -rf out

    rm -rf .build-cache

  2. 用官方 lock 文件重新装

    npm ci # 必须 ci,不能用 install,否则 lock 被刷新

  3. 再 watch

    npm run watch

    → 官方 lock 里 xterm 与 @types/node 版本是匹配的,一般 0 错误。


方案 2:手动适配新类型(想保持最新依赖时用)

错误 1
fastScrollModifier 已在 xterm@5.3+ 被删除,直接删掉或加 as any 即可:

diff 复制代码
// src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts L226
- fastScrollModifier: 'alt',
+ // fastScrollModifier removed in xterm 5.3

错误 2 & 3

Node 18+ 的 err 回调签名变成 Error | null | undefined,把类型收窄即可:

diff 复制代码
// src/vs/workbench/api/node/extHostConsoleForwarder.ts L60
- (err?: Error | undefined) => void
+ (err?: Error | null | undefined) => void

// src/bootstrap-fork.ts L134 同理

改完保存,watch 会自动增量编译,3 个错误消失。


一句话总结

想继续开发 就用方案 1 回退依赖

想追新 xterm/Node 就 用方案 2 改三行代码

改完再 npm run watch,终端里应该出现
[watch-client] Finished compilation with 0 errors after xxxx ms

相关推荐
海石10 小时前
📱随时随地大小编:TraeSolo 移动端初体验
前端·ai编程·trae
爱滑雪的码农12 小时前
详细说说React大型项目结构以及日常开发核心语法
前端·javascript·react.js
七牛开发者12 小时前
HTML is the new Markdown:来自 Claude Code 团队的实践
前端·人工智能·语言模型·html
@大迁世界13 小时前
43.HTML 事件处理和 React 事件处理有什么区别?
前端·javascript·react.js·html·ecmascript
CloneCello13 小时前
AI时代程序员认知调整指南
前端
ZC跨境爬虫14 小时前
跟着 MDN 学 HTML day_38:(DocumentFragment 文档片段接口详解)
前端·javascript·ui·html·音视频
@大迁世界15 小时前
41.ShadCN 是什么?它如何和 Tailwind CSS 集成,从而更容易构建可访问且可自定义的 React 组件?
前端·javascript·css·react.js·前端框架
千叶风行15 小时前
Text-to-SQL 技术设计与注意事项
前端·人工智能·后端
软件开发技术深度爱好者15 小时前
HTML5+JavaScript读取DOCX 文档完整内容
前端·html5
幽络源小助理16 小时前
苹果CMS V10 MXPro V4.5模版下载, 自适应视频主题源码, 幽络源源码
前端·开源·源码·php源码