安装“CodePen”插件后，可在vscode中右键选中代码选择“Upload to CodePen”，自动将html、css、JS代码同步至CodePen网站对应面板并支持自定义模板设置。

VSCode 中可以直接将代码片段分享到 CodePen，借助专用插件能快速完成这一操作，省去手动复制粘贴的麻烦。最常用且支持良好的插件是 “CodePen” by andy-code-de。

安装 CodePen 插件

打开 VSCode，进入扩展商店（快捷键 Ctrl+Shift+X），搜索 “CodePen”。找到由 andy-code-de 开发的官方插件，点击安装。

配置并使用插件分享代码

安装完成后，按照以下步骤操作：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

• 在 VSCode 中打开你想要分享的代码文件（支持 HTML、CSS、JS）
• 选中需要发送到 CodePen 的代码片段，或不选择以发送整个文件内容
• 右键点击选中的代码，选择 “Upload to CodePen”
• 插件会自动打开 CodePen 网站，并将你的代码填充到对应的 HTML、CSS 或 JS 面板中

自定义默认设置（可选）

你可以在 VSCode 设置中配置默认的 CodePen 模板行为，比如是否自动添加基础 HTML 结构、预处理器选项等。打开设置（Ctrl+,），搜索 “codepen”，根据需要调整如下选项：

• Codepen: Open in New Tab – 控制是否在新标签页打开
• Codepen: include Base HTML – 是否包含默认的 HTML 模板
• Codepen: Prefill Data – 是否自动填充标题、描述等元信息

基本上就这些。只要插件启用，上传过程几秒内完成，非常适合快速演示前端小功能或与他人协作调试。注意确保网络通畅，且浏览器已登录 CodePen 账户以便保存笔片。