MJML Visual Studio Code 扩展教程

MJML Visual Studio Code 扩展教程

vscode-mjmlThis repo is archived. MJML preview, lint, compile for Visual Studio Code.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-mjml

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

vscode-mjml/
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── assets/
│   └── icon.png
├── out/
│   ├── commands/
│   ├── preview/
│   ├── util/
│   └── extension.js
├── src/
│   ├── commands/
│   ├── preview/
│   ├── util/
│   └── extension.ts
├── .gitignore
├── .vscodeignore
├── package.json
├── README.md
└── tsconfig.json

• .vscode/: 包含 Visual Studio Code 的配置文件。
  • extensions.json: 推荐的扩展列表。
  • launch.json: 调试配置。
  • settings.json: 工作区设置。
• assets/: 包含项目图标。
• out/: 编译后的 JavaScript 文件。
• src/: 源代码目录，包含 TypeScript 文件。
• .gitignore: Git 忽略文件列表。
• .vscodeignore: Visual Studio Code 忽略文件列表。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 编译配置。

2. 项目的启动文件介绍

项目的启动文件是 src/extension.ts，它负责注册命令和激活扩展。以下是 extension.ts 的主要内容：

import * as vscode from 'vscode';
import { activateCommands } from './commands';

export function activate(context: vscode.ExtensionContext) {
    activateCommands(context);
}

export function deactivate() {}

• activate(): 扩展激活时调用的函数，注册所有命令。
• deactivate(): 扩展停用时调用的函数。

3. 项目的配置文件介绍

• package.json: 包含扩展的元数据和依赖项。

{
  "name": "vscode-mjml",
  "displayName": "MJML",
  "description": "MJML preview, lint, compile for Visual Studio Code",
  "version": "1.0.0",
  "publisher": "attilabuti",
  "engines": {
    "vscode": "^1.50.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "activationEvents": [
    "onCommand:mjml.preview",
    "onCommand:mjml.beautify",
    "onCommand:mjml.copyHtml",
    "onCommand:mjml.exportHtml",
    "onCommand:mjml.migrate",
    "onCommand:mjml.multipleScreenshots",
    "onCommand:mjml.openPreviewToTheSide",
    "onCommand:mjml.screenshot"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "mjml.preview",
        "title": "MJML: Open Preview to the Side"
      },
      {
        "command": "mjml.beautify",
        "title": "MJML: Beautify or Format Document"
      },
      {
        "command": "mjml.copyHtml",
        "title": "MJML: Copy HTML"
      },
      {
        "command": "mjml.exportHtml",
        "title": "MJML: Export HTML"
      },
      {
        "command": "mjml.migrate",
        "title": "MJML: Migrate"
      },
      {
        "command": "mjml.multipleScreenshots",
        "title": "MJML: Multiple Screenshots"
      },
      {
        "command": "mjml.openPreviewToTheSide",
        "title": "MJML: Open Preview to the Side"
      },
      {
        "command": "mjml.screenshot",
        "title": "MJML: Screenshot"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",

vscode-mjmlThis repo is archived. MJML preview, lint, compile for Visual Studio Code.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-mjml