# vscode-codecv

**Repository Path**: SfishEgg/vscode-codecv

## Basic Information

- **Project Name**: vscode-codecv
- **Description**: codecv 项目的 VS Code 插件版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-03
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[CodeCV](https://github.com/acmenlei/codecv) Markdown 简历转换能力的 VC Code 扩展封装，支持：

- 编辑 Markdown 时实时刷新 A4 简历预览
- 使用普通 CSS 文件自定义简历样式，CSS 未保存时也会实时刷新
- 在预览控制台中显式调整常用简历元素的上、下边距
- Markdown 原文与简历预览双向同步上下滚动
- 解析 Markdown 文件中的相对图片路径
- 将当前渲染结果按 A4 自动分页并导出为图片型 PDF


## 项目结构

```text
src/
├─ store/                         # 业务数据模型、消息协议和静态数据
├─ hooks/                         # CSS、Markdown、边距和滚动业务逻辑
├─ views/                         # Vue 3 页面组件、样式和页面组织
├─ webview/                       # Vue 应用入口与 Webview 消息 API 适配
├─ host/                          # VS Code Host 命令、事件、文件和页面逻辑
├─ types/                         # 外部依赖和静态资源类型声明
└─ extension.ts                   # Extension Host 组合入口
```

代码按职责分层。Host 与 Webview 保持运行时隔离，只通过 `store/protocol.ts` 中的可序列化消息通信；视图使用 hooks 组织业务行为。完整依赖规则见 [应用架构](./doc/应用架构.md)。


## 使用

1. 打开一个 `.md` 文件。
2. 点击编辑器标题栏的预览按钮，或从命令面板运行 `CodeCV: 打开简历预览`。
3. 在预览工具栏点击“编辑 CSS”，或运行 `CodeCV: 编辑简历 CSS`。首次执行会在 Markdown 同目录创建 `<文件名>.resume.css`。
4. 点击“调整元素上下边距”，可分别设置子模块、二级标题、多列布局、段落、强调文本和列表等元素的上、下边距；留空即使用输入框提示的当前默认值。改动会自动写入并保存该 Markdown 对应的 CSS 文件，已有声明原位更新，缺少的声明自动追加。
5. 点击预览工具栏的“导出 PDF”，或运行 `CodeCV: 导出简历为 PDF`；扩展会等待字体和图片加载完成，以 300 DPI（每页约 2480 × 3508 像素）将当前预览按 A4 自动分页，并提示选择 PDF 保存位置。

内容类控制项按结构层级生效：“二级标题”仅指子模块直属 `h2`，“普通文本”和“无序列表”仅指简历根、主布局或子模块的直接子级，“列表项”仅指这些顶层列表的直属 `li`。因此不会连带修改多列布局、嵌套列表、引用、表格等结构内部的同名标签；`strong` 仍按强调语义作用于所有上下文。

自定义样式最好限定在 `.markdown-transform-html` 下，例如：

```css
.markdown-transform-html {
  --markdown-primary-color: #263238;
  --markdown-primary-bg-color: #2457a6;
  font-family: 'Noto Sans SC', sans-serif;
}

.markdown-transform-html h2 {
  color: #2457a6;
  border-bottom: 2px solid #2457a6;
}
```

如需多份简历共用一个 CSS，可配置：

```json
{
  "codecv.customCssFile": ".codecv/resume.css"
}
```

相对路径从 Markdown 所在工作区根目录解析。留空时使用 Markdown 同目录的 `<文件名>.resume.css`。


## 开发

需要 Node.js 18 或更高版本。

```bash
npm install
npm test
npm run check
npm run compile
```

在 VS Code 中按 `F5` 启动 Extension Development Host。发布前会通过 `vscode:prepublish` 自动执行测试、类型检查和生产构建。

Webview 使用 Vue 3 单文件组件、Composition API 和 `<template>` 模板语法实现。构建时通过 Vue SFC 编译器把 `.vue` 文件转换并打包到 `dist/webview.js`，浏览器端不进行模板编译。插件自带的预览、简历和图标 CSS 会作为文本打进扩展并内联到 Webview。