开源项目 vscode-front-matter 使用教程

开源项目 vscode-front-matter 使用教程

vscode-front-matterFront Matter is a CMS running straight in Visual Studio Code. Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...项目地址:https://gitcode.com/gh_mirrors/vs/vscode-front-matter

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

vscode-front-matter/
├── assets/
│   └── logo.png
├── dist/
│   └── extension.js
├── media/
│   └── screenshots/
├── src/
│   ├── commands/
│   │   ├── content.ts
│   │   ├── dashboard.ts
│   │   └── ...
│   ├── models/
│   │   └── content.ts
│   ├── services/
│   │   └── content.ts
│   ├── extension.ts
│   └── ...
├── .gitignore
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• assets/: 存放项目的静态资源，如logo等。
• dist/: 编译后的扩展文件，主要包含extension.js。
• media/: 存放项目的媒体文件，如截图等。
• src/: 源代码目录，包含扩展的主要逻辑。
  • commands/: 存放命令相关的代码。
  • models/: 存放数据模型相关的代码。
  • services/: 存放服务相关的代码。
  • extension.ts: 扩展的主入口文件。
• .gitignore: Git忽略文件配置。
• .vscodeignore: VS Code忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• package.json: 项目的npm配置文件，包含依赖和脚本等。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript配置文件。

2. 项目的启动文件介绍

项目的启动文件是src/extension.ts。这个文件是扩展的主入口点，负责注册命令和初始化扩展。

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

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

export function deactivate() {}

启动文件介绍

• activate: 当扩展被激活时调用，注册所有命令。
• deactivate: 当扩展被停用时调用，目前为空。

3. 项目的配置文件介绍

项目的配置文件主要是package.json。这个文件包含了扩展的所有配置信息，如名称、版本、依赖、命令等。

{
  "name": "vscode-front-matter",
  "displayName": "Front Matter",
  "version": "4.1.1",
  "description": "Front matter support for VS Code",
  "publisher": "estruyf",
  "engines": {
    "vscode": "^1.52.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:frontMatter.dashboard",
    "onCommand:frontMatter.content"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "frontMatter.dashboard",
        "title": "Front Matter: Dashboard"
      },
      {
        "command": "frontMatter.content",
        "title": "Front Matter: Content"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.52.0",
    "@types/glob": "^7.1.3",
    "@types/mocha": "^8.2.0",
    "@types/node": "^12.11.7",
    "eslint": "^7.19.0",
    "glob": "^7.1.6",
    "mocha": "^8.2.1",
    "typescript": "^4.1.3",
    "v

vscode-front-matterFront Matter is a CMS running straight in Visual Studio Code. Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...项目地址:https://gitcode.com/gh_mirrors/vs/vscode-front-matter