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

相关推荐
酉鬼女又兒12 分钟前
零基础快速入门前端DOM 操作核心知识与实战解析(完整汇总版)(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·js
喝拿铁写前端1 小时前
一套面向 Web、H5、小程序与 Flutter 的多端一致性技术方案
前端·架构
yaaakaaang1 小时前
(一)前端,如此简单!---下载Nginx
前端·nginx
牛奶1 小时前
为什么全国人民都能秒开同一个视频?
前端·http·cdn
KongHen022 小时前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
汪子熙2 小时前
TS2320 错误的本质、触发场景与在 Angular / RxJS 项目中的系统化应对
前端·javascript·angular.js
我命由我123452 小时前
React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
Younglina2 小时前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen2 小时前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基2 小时前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript