VSCode Markdown 样式插件使用教程

VSCode Markdown 样式插件使用教程

1. 项目的目录结构及介绍

vscode-markdown-style/
├── README.md
├── package.json
├── src/
│   ├── extension.ts
│   ├── styles/
│       ├── default.css
│       ├── dark.css
│       ├── light.css
├── test/
│   ├── extension.test.ts

• README.md: 项目说明文件，包含项目的基本信息和使用指南。
• package.json: 项目的配置文件，定义了项目的依赖、脚本和扩展信息。
• src/: 源代码目录。
  • extension.ts: 插件的主入口文件，负责注册和激活插件。
  • styles/: 样式文件目录，包含不同主题的CSS文件。
    • default.css: 默认样式文件。
    • dark.css: 暗色主题样式文件。
    • light.css: 亮色主题样式文件。
• test/: 测试文件目录，包含插件的单元测试。
  • extension.test.ts: 插件的单元测试文件。

2. 项目的启动文件介绍

src/extension.ts 是项目的启动文件，主要负责以下功能：

• 注册命令和事件监听器。
• 激活插件时加载相应的样式文件。
• 处理用户配置和主题切换。

以下是 extension.ts 的部分代码示例：

import * as vscode from 'vscode';
import { activateStyles } from './styles/styleManager';

export function activate(context: vscode.ExtensionContext) {
    activateStyles();
    vscode.workspace.onDidChangeConfiguration(() => {
        activateStyles();
    });
}

export function deactivate() {}

3. 项目的配置文件介绍

package.json 是项目的配置文件，包含了插件的元数据、依赖和命令等信息。以下是部分关键配置项的介绍：

• name: 插件的名称。
• displayName: 插件的显示名称。
• version: 插件的版本号。
• publisher: 插件的发布者。
• engines: 插件支持的VSCode版本。
• contributes: 插件的贡献点，定义了命令、配置项等。

以下是 package.json 的部分配置示例：

{
    "name": "vscode-markdown-style",
    "displayName": "Markdown Style",
    "version": "1.0.0",
    "publisher": "raycon",
    "engines": {
        "vscode": "^1.50.0"
    },
    "contributes": {
        "commands": [
            {
                "command": "markdown-style.applyStyle",
                "title": "Apply Markdown Style"
            }
        ],
        "configuration": {
            "title": "Markdown Style",
            "properties": {
                "markdown-style.theme": {
                    "type": "string",
                    "default": "default",
                    "description": "Select the theme for Markdown styling."
                }
            }
        }
    }
}

通过以上配置，用户可以在VSCode的设置中自定义Markdown样式主题。