MJML Visual Studio Code 扩展教程
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",