ES2017环境下Figma插件出现TypeScript Token错误求助

环境前置检查 #

• 确认本地安装Node.js 16.x/18.x版本（适配项目依赖），执行以下命令验证：

  node -v
  npm -v
  

• VS Code中可安装ESLint插件辅助排查语法问题

依赖重置与安装 #

1. 进入项目根目录，清理旧依赖及缓存：

   rm -rf node_modules package-lock.json
   

2. 重新安装依赖：

   npm install
   

   若npm安装缓慢，可切换至yarn：yarn install（需提前安装yarn）

编译构建错误排查 #

• 执行项目编译命令（查看package.json的scripts字段，通常为npm run build或npm run watch）
  • 模块缺失错误：手动安装对应模块，例如npm install [缺失模块名]
  • 语法错误：根据终端报错的文件路径和行号，修正代码中的语法问题（如未定义变量、ES6+语法未转译）
  • Figma API不匹配：检查manifest.json中api字段版本，确保与代码调用的API版本一致

UI界面显示调试 #

1. 编译成功后，在Figma中导入插件：打开Figma → 插件 → 开发 → 导入已开发的插件，选择项目中的manifest.json
2. 若HTML UI未显示：
   • 检查manifest.json的ui字段路径，确认指向编译后的HTML文件（如dist/ui.html）
   • 右键插件UI区域选择「检查」，通过浏览器开发者工具查看控制台报错，排查资源加载失败、JS执行异常等问题
   • 验证UI与Figma主进程的通信逻辑：确保parent.postMessage和figma.ui.onmessage调用正确

常见问题快速修复 #

• 权限报错：以管理员权限运行终端，或确保项目目录有读写权限
• 依赖安装失败：配置npm镜像源解决网络问题：

  npm config set registry https://registry.npmmirror.com/
  

内容的提问来源于stack exchange，提问作者Nidhin Rajeevan