Vetur 项目教程

Vetur 项目教程

vetur项目地址:https://gitcode.com/gh_mirrors/vet/vetur

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

Vetur 是一个为 VS Code 提供 Vue 工具的扩展。以下是 Vetur 项目的主要目录结构及其介绍：

vetur/
├── client/                # VS Code 客户端代码
├── server/                # Vue Language Server 代码
├── scripts/               # 脚本文件，用于构建和测试
├── syntaxes/              # 语法高亮定义
├── tools/                 # 工具代码
├── typings/               # TypeScript 类型定义
├── package.json           # 项目配置文件
├── README.md              # 项目说明文档
└── CONTRIBUTING.md        # 贡献指南

• client/：包含 VS Code 扩展的客户端代码，负责与 VS Code 集成。
• server/：包含 Vue Language Server 的代码，提供语言服务功能。
• scripts/：包含用于构建、测试和发布的脚本。
• syntaxes/：定义 Vue 文件的语法高亮规则。
• tools/：包含一些辅助工具和脚本。
• typings/：包含 TypeScript 类型定义文件。
• package.json：项目的配置文件，定义依赖、脚本和其他元数据。
• README.md：项目的说明文档，提供项目概述和使用指南。
• CONTRIBUTING.md：贡献指南，指导开发者如何参与项目。

2. 项目的启动文件介绍

Vetur 项目的启动文件主要位于 client/ 目录下，负责启动 Vue Language Server 并集成到 VS Code 中。以下是主要的启动文件：

• client/src/extension.ts：这是 Vetur 扩展的主入口文件，负责初始化并启动 Vue Language Server。

import * as path from 'path';
import { workspace, ExtensionContext } from 'vscode';
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind } from 'vscode-languageclient/node';

let client: LanguageClient;

export function activate(context: ExtensionContext) {
  // 服务器路径
  const serverModule = context.asAbsolutePath(path.join('server', 'out', 'vueServerMain.js'));
  // 服务器选项
  const serverOptions: ServerOptions = {
    run: { module: serverModule, transport: TransportKind.ipc },
    debug: { module: serverModule, transport: TransportKind.ipc, options: { execArgv: ['--nolazy', '--inspect=6009'] } }
  };

  // 客户端选项
  const clientOptions: LanguageClientOptions = {
    documentSelector: [{ scheme: 'file', language: 'vue' }],
    synchronize: {
      fileEvents: workspace.createFileSystemWatcher('**/.clientrc')
    }
  };

  // 创建语言客户端并启动服务器
  client = new LanguageClient('vue', 'Vue Language Server', serverOptions, clientOptions);
  client.start();
}

export function deactivate(): Thenable<void> | undefined {
  if (!client) {
    return undefined;
  }
  return client.stop();
}

3. 项目的配置文件介绍

Vetur 项目的主要配置文件是 package.json，它定义了项目的依赖、脚本和其他元数据。以下是 package.json 的主要内容：

{
  "name": "vetur",
  "displayName": "Vetur",
  "version": "0.35.0",
  "description": "Vue tooling for VS Code",
  "author": "Pine Wu <octref@gmail.com>",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/octref/vetur.git"
  },
  "engines": {
    "vscode": "^1.30.0"
  },
  "categories": [
    "Programming Languages",
    "Linters",
    "Formatters",
    "Snippets"
  ],
  "activationEvents": [
    "onLanguage:vue"
  ],
  "main": "./client/out/extension",
  "contributes": {
    "configuration": {
      "type": "object",
      "title": "Vetur",
      "properties": {

vetur项目地址:https://gitcode.com/gh_mirrors/vet/vetur