vscode插件开发心得:RustedWarfareModSupport

发布时间：2025-03-10 02:57:06

更新时间：2025-05-11 18:42:49

我并没有重复造轮子,因为根本就没轮子 :(

时隔多年,我还是回到了我最喜欢的RTS游戏:Steam 上的 Rusted Warfare - RTS

这是我的插件地址 RustedWarfareModSupport - Visual Studio Marketplace

开发过程

起步,想使用yo code?

这脚手架有点太简陋了,所以我直接git clone 一下微软官方的lsp-sample插件来改一改,顺带学习一下lsp

:::tip 什么是lsp? LSP 通常指 语言服务器协议(Language Server Protocol) ，是一种用于在集成开发环境（IDE）和语言服务器之间通信的开放标准。它通过标准化的请求和响应机制，让开发者工具（如 VS Code、Emacs）与语言支持服务（如代码补全、语法检查、重构工具）解耦，从而实现跨平台、跨编辑器的语言功能支持。 :::

果然官方的就是好啊,注释什么的都一应俱全,但为什么不把这个作为yo code的选项之一呢?我还是不太明白不过,既然有了模板,那就开始改造!

代码表,数据从哪来?

倒是能看到许多excal表格,但这不是一个对js/ts友好的数据结构,找了一下,看到了一个插件仓库

Blackburn507/RWini_Plugin: A plugin improves coding for MODs of a RTS game Rusted Warfare.

但是我好奇为什么没在vscode插件市场上看到,看了一下是MIT协议,里面的/db/文件夹有三个数据json,看起来不方便,于是我开始拆分

拆分dataVAseKey.json

1
const fs = require('fs');
2
const path = require('path');
3

4
// 读取 dataBaseKey.json 文件内容
5
const dataBaseKeyJson = fs.readFileSync('dataBaseKey.json', 'utf-8');
6
const dataBaseKey = JSON.parse(dataBaseKeyJson);
7

8
// 定义 CompletionItemKind 常量
9
const CompletionItemKind = {
10
    Text: 1
11
};
12

13
// 定义一个函数来生成 CompletionItem[] 数据
14
function generateCompletionItems(section, items) {
15
    return Object.entries(items).map(([label, [type, descriptionSection, detail, documentation]], index) => ({
16
        label,
17
        insertText: `${label}:`,
18
        labelDetails: { description: `[${section}]` },
19
        kind: CompletionItemKind.Text,
20
        detail,
21
        documentation,
22
        type
23
    }));
24
}
25

26
// 遍历 dataBaseKey 中的每个 section
27
for (const [section, items] of Object.entries(dataBaseKey)) {
28
    const completionItems = generateCompletionItems(section, items);
29

30
    // 生成文件内容
31
    const importStatement = `import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';`;
32
    const exportStatement = `export const ${section.toUpperCase()}: CompletionItem[] = [`;
33
    const itemsContent = completionItems.map(item => `    {
34
        label: '${item.label||''}',
35
        insertText: '${item.insertText||''}',
36
        labelDetails: { detail :' ${(item.type||'')+' '+(item.detail||'').replace(/'/g, "\\'")}', description: '[${section}]' },
37
        kind: CompletionItemKind.Text,
38
        detail :'${(item.detail||'').replace(/'/g, "\\'")}',
39
        documentation :'${(item.documentation||'').replace(/'/g, "\\'")}',
40
        data: '${(item.type||'').replace(/'/g, "\\'")}'
41
    },`).join('\n');
42
    const closingBracket = `];`;
43

44
    const fileContent = `${importStatement}\n${exportStatement}\n${itemsContent}\n${closingBracket}`;
45

46
    // 写入文件
47
    const filePath = path.join(__dirname, `${section}.ts`);
48
    fs.writeFileSync(filePath, fileContent, 'utf-8');
49
}
50

51
console.log('文件生成完成');

拆分dataBaseValue.json

1
const fs = require('fs');
2
const path = require('path');
3

4
// 读取 dataBaseValue.json 文件内容
5
const dataBaseValueJson = fs.readFileSync('dataBaseValue.json', 'utf-8');
6
const dataBaseValue = JSON.parse(dataBaseValueJson);
7

8
// 定义 CompletionItemKind 常量
9
const CompletionItemKind = {
10
    Text: 1
11
};
12

13
// 定义一个函数来生成 CompletionItem[] 数据
14
function generateCompletionItems(section, items) {
15
    return Object.entries(items).map(([label, [type, description, detail]], index) => ({
16
        label,
17
        insertText: `${label}`,
18
        labelDetails: { description: `[${section}]` },
19
        kind: CompletionItemKind.Text,
20
        detail,
21
        documentation: description,
22
        type
23
    }));
24
}
25

26
// 遍历 dataBaseValue 中的每个 section
27
for (const [section, items] of Object.entries(dataBaseValue)) {
28
    const completionItems = generateCompletionItems(section, items);
29

30
    // 生成文件内容
31
    const importStatement = `import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';`;
32
    const exportStatement = `export const ${section.toUpperCase()}: CompletionItem[] = [`;
33
    const itemsContent = completionItems.map(item => `    {
34
        label: '${item.label || ''}',
35
        insertText: '${item.insertText || ''}',
36
        labelDetails: { detail :' ${(item.type || '') + ' ' + (item.detail || '').replace(/'/g, "\\'")}', description: '[${section}]' },
37
        kind: CompletionItemKind.Text,
38
        detail :'${(item.detail || '').replace(/'/g, "\\'")}',
39
        documentation :'${(item.documentation || '').replace(/'/g, "\\'")}',
40
        data: '${(item.type || '').replace(/'/g, "\\'")}'
41
    },`).join('\n');
42
    const closingBracket = `];`;
43

44
    const fileContent = `${importStatement}\n${exportStatement}\n${itemsContent}\n${closingBracket}`;
45

46
    // 写入文件
47
    const filePath = path.join(__dirname, `${section}.ts`);
48
    fs.writeFileSync(filePath, fileContent, 'utf-8');
49
}
50

51
console.log('文件生成完成');

现在获得了这些文件,对于这些文件,应该定义一下良好的数据结构

定义Completionitem[]

定义这个对象数组,方便补全,下面是其中的一个例子

1
import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
2
export const ACTION: CompletionItem[] = [
3
    {
4
        label: 'text',
5
        insertText: 'text:',
6
        labelDetails: { detail :' file-text 文本', description: '[action]' },
7
        kind: CompletionItemKind.Text,
8
        detail :'文本',
9
        documentation :'界面中显示的文字',
10
        data: 'file-text'
11
    },
12
    {
13
        label: 'textPostFix',
14
        insertText: 'textPostFix:',
15
        labelDetails: { detail :' file-text 文本动态更改', description: '[action]' },
16
        kind: CompletionItemKind.Text,
17
        detail :'文本动态更改',
18
        documentation :'显示为后缀的文本,与textAddUnitName一起用于创建文本UI',
19
        data: 'file-text'
20
    },
21
...
22
    ]

合在一起,方便调用

1
import { CompletionItem } from 'vscode-languageserver';
2
import { ACTION } from './action';
3
import { AI } from './ai';
4
import { ANIMATION } from './animation';
5
import { ATTACHMENT } from './attachment';
6
import { ATTACK } from './attack';
7
import { CANBUILD } from './canBuild';
8
import { CORE } from './core';
9
import { EFFECT } from './effect';
10
import { GRAPHICS } from './graphics';
11
import { LEG } from './leg';
12
import { MOVEMENT } from './movement';
13
import { PLACEMENTRULE } from './placementRule';
14
import { PROJECTILE } from './projectile';
15
import { RESOURCE } from './resource';
16
import { TURRET } from './turret';
17

18

19
export const ALLSECTIONS: Record<string, CompletionItem[]> ={
20
  ACTION,
21
  AI,
22
  ANIMATION,
23
  ATTACHMENT,
24
  ATTACK,
25
  CANBUILD,
26
  CORE,
27
  EFFECT,
28
  GRAPHICS,
29
  LEG,
30
  MOVEMENT,
31
  PLACEMENTRULE,
32
  PROJECTILE,
33
  RESOURCE,
34
  TURRET
35
};

关键在于connection.onCompletion函数的调用

1
connection.onCompletion(
2
  (_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
3
    const document = documents.get(_textDocumentPosition.textDocument.uri);
4
    if (!document) {return [];}
5

6
    // 获取当前行号
7
    const cursorLine = _textDocumentPosition.position.line;
8

9
    // 从当前行向上查找最近的一个节定义
10
    let currentSectionName = null;
11
    for (let i = cursorLine; i >= 0; i--) {
12
      const lineStart = document.positionAt(document.offsetAt({ line: i, character: 0 }));
13
      const lineEnd = document.positionAt(document.offsetAt({ line: i + 1, character: 0 }) - 1);
14
      const lineContent = document.getText({ start: lineStart, end: lineEnd }).trim();
15

16
      const sectionMatch = lineContent.match(/^\[(.+)\]$/);
17
      if (sectionMatch) {
18
        currentSectionName = sectionMatch[1];
19
        break;
20
      }
21
    }
22
    const cursorCharacter = _textDocumentPosition.position.character;
23

24
    // 获取当前行内容
25
    const lineStart = document.positionAt(document.offsetAt({ line: cursorLine, character: 0 }));
26
    const lineEnd = document.positionAt(document.offsetAt({ line: cursorLine + 1, character: 0 }) - 1);
27
    const currentLineContent = document.getText({ start: lineStart, end: lineEnd });
28

29
    // 判断光标是否在 [] 内
30
    const openBracketIndex = currentLineContent.lastIndexOf('[', cursorCharacter);
31
    const closeBracketIndex = currentLineContent.indexOf(']', cursorCharacter);
32
    const isInsideBrackets = openBracketIndex !== -1 && (closeBracketIndex === -1 || openBracketIndex > closeBracketIndex);
33

34
    if (isInsideBrackets) {
35
      return SECTIONSNAME;
36
    }
37
    // 判断光标是否在 :后
38
    const colonIndex = currentLineContent.indexOf(':');
39
    const pointIndex = currentLineContent.indexOf('.');
40
    if (!currentSectionName) {
41
      return [];
42
    }
43
    else if((colonIndex!==-1)&&(cursorCharacter>colonIndex)){
44

45
        if((pointIndex!==-1)&&(cursorCharacter==(pointIndex+1))){
46
          return ALLVALUES.UNITPROPERTY;
47
        }
48

49
        const key = currentLineContent.substring(0, colonIndex).trim();
50
        let sectionName=currentSectionName;
51
        sectionName=sectionName.toUpperCase();
52
        const sectionConfig = ALLSECTIONS[sectionName];
53
          let keyConfig = null;
54
          if (sectionConfig) {
55
            for (const item of sectionConfig) {
56
              if (item.label === key) {
57
                keyConfig = item;
58
                break;
59
              }
60
            }
61
          }
62
          if (keyConfig) {
63
            const data = keyConfig.data;
64
              if (data.includes('bool')) {
65
                return ALLVALUES.BOOL;
66
              } else if (data.includes('logicBoolean')) {
67
                return [...ALLVALUES.LOGICBBOOLEAN, ...ALLVALUES.BOOL,...ALLVALUES.FUNCTION,...ALLVALUES.UNITREF];
68
              } else if (key.includes('spawnUnits')){
69
                return [...ALLVALUES.LOGICBBOOLEAN,...ALLVALUES.BOOL,...ALLVALUES.FUNCTION,...ALLVALUES.UNITREF,...ALLVALUES.SPAWNUNIT];
70
              } else if (data.includes('projectileRef')){
71
                return [...ALLVALUES.PROJECTILE];
72
              } else if (data.includes('event')){
73
                return [...ALLVALUES.EVENTS];
74
              }
75
          }
76
        return [];;
77
    }
78
     else {
79
    // 根据节名返回相应的补全项
80
      switch (currentSectionName) {
81
        case 'core':
82
          return ALLSECTIONS.CORE;
83
        case 'graphics':
84
          return ALLSECTIONS.GRAPHICS;
85
        case 'attack':
86
          return ALLSECTIONS.ATTACK;
87
        case 'movement':
88
          return ALLSECTIONS.MOVEMENT;
89
        case 'ai':
90
          return ALLSECTIONS.AI;
91
        default:
92
          if (currentSectionName.startsWith('canBuild_')) {
93
            return ALLSECTIONS.CANBUILD;
94
          } else if (currentSectionName.startsWith('turret_')) {
95
            return ALLSECTIONS.TURRET;
96
          } else if (currentSectionName.startsWith('projectile_')){
97
            return ALLSECTIONS.PROJECTILE;
98
          } else if (currentSectionName.startsWith('arm_')){
99
            return ALLSECTIONS.ARM;
100
          } else if (currentSectionName.startsWith('leg_')){
101
            return ALLSECTIONS.LEG;
102
          } else if (currentSectionName.startsWith('attachment_')){
103
            return ALLSECTIONS.ATTACHMENT;
104
          } else if (currentSectionName.startsWith('effect_')){
105
            return ALLSECTIONS.EFFECT;
106
          } else if (currentSectionName.startsWith('animation_')){
107
            return ALLSECTIONS.ANIMATION;
108
          } else if (currentSectionName.startsWith('action_')){
109
            return ALLSECTIONS.ACTION;
110
          } else if (currentSectionName.startsWith('hiddenAction_')){
111
            return ALLSECTIONS.ACTION;
112
          } else if (currentSectionName.startsWith('placementRule_')){
113
            return ALLSECTIONS.PLACEMENTRULE;
114
          } else if (currentSectionName.startsWith('resource_')){
115
            return ALLSECTIONS.RESOURCE;
116
          } else if (currentSectionName.startsWith('global_resource_')){
117
            return ALLSECTIONS.RESOURCE;
118
          } else if (currentSectionName.startsWith('decal_')){
119
            return ALLSECTIONS.DECAL;
120
          } else if (currentSectionName.startsWith('commnet_')){
121
            return [];
122
          } else if (currentSectionName.startsWith('template_')){
123
            return ALLSECTIONS.TEMPLATE;
124
          }
125
          return [];
126
      }
127
    }
128
    return [];
129
  });

太长了不爱看?让我们分开来解析一下!

代码功能概述

这段代码是一个用于处理代码补全的函数，通过监听 connection 对象的 onCompletion 事件，根据用户在文本编辑器中的光标位置和上下文信息，提供相应的代码补全项。具体来说，它会根据当前所在的节（section）、光标位置是否在方括号内或冒号之后等条件，返回不同的补全项数组。

代码详细分析

1. 事件监听与回调函数

javascript

1
connection.onCompletion(
2
    (_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
3
        // 代码主体
4
    }
5
);

connection.onCompletion 是一个事件监听器，用于监听代码补全请求事件。
回调函数接收一个 TextDocumentPositionParams 类型的参数 _textDocumentPosition，该参数包含了当前文本文件的位置信息。
回调函数返回一个 CompletionItem 类型的数组，用于提供代码补全项。

2. 获取当前文档

javascript

1
const document = documents.get(_textDocumentPosition.textDocument.uri);
2
if (!document) { return []; }

通过 documents.get 方法根据当前文本文件的 URI 获取对应的文档对象。
如果文档对象不存在，则返回一个空数组，表示没有补全项。

3. 获取当前行号

javascript

1
const cursorLine = _textDocumentPosition.position.line;

从 _textDocumentPosition 参数中获取当前光标的行号。

4. 查找最近的节定义

javascript

1
let currentSectionName = null;
2
for (let i = cursorLine; i >= 0; i--) {
3
    const lineStart = document.positionAt(document.offsetAt({ line: i, character: 0 }));
4
    const lineEnd = document.positionAt(document.offsetAt({ line: i + 1, character: 0 }) - 1);
5
    const lineContent = document.getText({ start: lineStart, end: lineEnd }).trim();
6

7
    const sectionMatch = lineContent.match(/^\[(.+)\]$/);
8
    if (sectionMatch) {
9
        currentSectionName = sectionMatch[1];
10
        break;
11
    }
12
}

从当前行开始向上遍历，查找最近的一个节定义（以 [节名] 形式表示）。
使用正则表达式 /^\[(.+)\]$/ 匹配节定义，如果匹配成功，则将节名存储在 currentSectionName 变量中，并跳出循环。

5. 获取当前光标位置和行内容

javascript

1
const cursorCharacter = _textDocumentPosition.position.character;
2
const lineStart = document.positionAt(document.offsetAt({ line: cursorLine, character: 0 }));
3
const lineEnd = document.positionAt(document.offsetAt({ line: cursorLine + 1, character: 0 }) - 1);
4
const currentLineContent = document.getText({ start: lineStart, end: lineEnd });

获取当前光标的列号 cursorCharacter。
获取当前行的起始位置和结束位置，并提取当前行的内容 currentLineContent。

6. 判断光标是否在方括号内

javascript

1
const openBracketIndex = currentLineContent.lastIndexOf('[', cursorCharacter);
2
const closeBracketIndex = currentLineContent.indexOf(']', cursorCharacter);
3
const isInsideBrackets = openBracketIndex !== -1 && (closeBracketIndex === -1 || openBracketIndex > closeBracketIndex);
4

5
if (isInsideBrackets) {
6
    return SECTIONSNAME;
7
}

使用 lastIndexOf 和 indexOf 方法分别查找当前行中最后一个左方括号和第一个右方括号的位置。
根据左方括号和右方括号的位置判断光标是否在方括号内。
如果光标在方括号内，则返回 SECTIONSNAME 数组作为补全项。

7. 判断光标是否在冒号之后

javascript

1
const colonIndex = currentLineContent.indexOf(':');
2
const pointIndex = currentLineContent.indexOf('.');
3
if (!currentSectionName) {
4
    return [];
5
} else if ((colonIndex!== -1) && (cursorCharacter > colonIndex)) {
6
    if ((pointIndex!== -1) && (cursorCharacter == (pointIndex + 1))) {
7
        return ALLVALUES.UNITPROPERTY;
8
    }
9

10
    const key = currentLineContent.substring(0, colonIndex).trim();
11
    let sectionName = currentSectionName;
12
    sectionName = sectionName.toUpperCase();
13
    const sectionConfig = ALLSECTIONS[sectionName];
14
    let keyConfig = null;
15
    if (sectionConfig) {
16
        for (const item of sectionConfig) {
17
            if (item.label === key) {
18
                keyConfig = item;
19
                break;
20
            }
21
        }
22
    }
23
    if (keyConfig) {
24
        const data = keyConfig.data;
25
        if (data.includes('bool')) {
26
            return ALLVALUES.BOOL;
27
        } else if (data.includes('logicBoolean')) {
28
            return [...ALLVALUES.LOGICBBOOLEAN, ...ALLVALUES.BOOL, ...ALLVALUES.FUNCTION, ...ALLVALUES.UNITREF];
29
        } else if (key.includes('spawnUnits')) {
30
            return [...ALLVALUES.LOGICBBOOLEAN, ...ALLVALUES.BOOL, ...ALLVALUES.FUNCTION, ...ALLVALUES.UNITREF, ...ALLVALUES.SPAWNUNIT];
31
        } else if (data.includes('projectileRef')) {
32
            return [...ALLVALUES.PROJECTILE];
33
        } else if (data.includes('event')) {
34
            return [...ALLVALUES.EVENTS];
35
        }
36
    }
37
    return [];
38
}

查找当前行中冒号和点号的位置。
如果没有找到节名，则返回一个空数组。
如果光标在冒号之后，进一步判断：
- 如果光标在点号之后，则返回 ALLVALUES.UNITPROPERTY 数组作为补全项。
- 提取冒号之前的键名，并将节名转换为大写。
- 根据节名从 ALLSECTIONS 对象中获取对应的配置信息。
- 在配置信息中查找与键名匹配的项。
- 根据匹配项的 data 属性，返回不同的补全项数组。

8. 根据节名返回补全项

javascript

1
else {
2
    switch (currentSectionName) {
3
        case 'core':
4
            return ALLSECTIONS.CORE;
5
        case 'graphics':
6
            return ALLSECTIONS.GRAPHICS;
7
        case 'attack':
8
            return ALLSECTIONS.ATTACK;
9
        case 'movement':
10
            return ALLSECTIONS.MOVEMENT;
11
        case 'ai':
12
            return ALLSECTIONS.AI;
13
        default:
14
            if (currentSectionName.startsWith('canBuild_')) {
15
                return ALLSECTIONS.CANBUILD;
16
            } else if (currentSectionName.startsWith('turret_')) {
17
                return ALLSECTIONS.TURRET;
18
            } else if (currentSectionName.startsWith('projectile_')) {
19
                return ALLSECTIONS.PROJECTILE;
20
            } else if (currentSectionName.startsWith('arm_')) {
21
                return ALLSECTIONS.ARM;
22
            } else if (currentSectionName.startsWith('leg_')) {
23
                return ALLSECTIONS.LEG;
24
            } else if (currentSectionName.startsWith('attachment_')) {
25
                return ALLSECTIONS.ATTACHMENT;
26
            } else if (currentSectionName.startsWith('effect_')) {
27
                return ALLSECTIONS.EFFECT;
28
            } else if (currentSectionName.startsWith('animation_')) {
29
                return ALLSECTIONS.ANIMATION;
30
            } else if (currentSectionName.startsWith('action_')) {
31
                return ALLSECTIONS.ACTION;
32
            } else if (currentSectionName.startsWith('hiddenAction_')) {
33
                return ALLSECTIONS.ACTION;
34
            } else if (currentSectionName.startsWith('placementRule_')) {
35
                return ALLSECTIONS.PLACEMENTRULE;
36
            } else if (currentSectionName.startsWith('resource_')) {
37
                return ALLSECTIONS.RESOURCE;
38
            } else if (currentSectionName.startsWith('global_resource_')) {
39
                return ALLSECTIONS.RESOURCE;
40
            } else if (currentSectionName.startsWith('decal_')) {
41
                return ALLSECTIONS.DECAL;
42
            } else if (currentSectionName.startsWith('commnet_')) {
43
                return [];
44
            } else if (currentSectionName.startsWith('template_')) {
45
                return ALLSECTIONS.TEMPLATE;
46
            }
47
            return [];
48
    }
49
}

如果光标不在方括号内也不在冒号之后，则根据节名返回不同的补全项数组。
使用 switch 语句处理一些常见的节名，如 core、graphics 等。
对于以特定前缀开头的节名，也返回相应的补全项数组。
如果节名不匹配任何条件，则返回一个空数组。

9. 默认返回值

javascript

1
return [];

如果以上所有条件都不满足，则返回一个空数组，表示没有补全项。

总结

写的我有点神游了,本来想any一把梭的,但是想了想还是规范一下吧. 造轮子果然很难,但写完之后用轮子方便了不少,感慨那些写代码提示的人有多辛苦这学期要学编译原理,汇编语言,不知道这对我的插件开发会不会有更好的帮助呢?

xingwangzhe

随机文章

vscode插件开发心得:RustedWarfareModSupport

开发过程

起步,想使用yo code?

代码表,数据从哪来?

拆分dataVAseKey.json

拆分dataBaseValue.json

定义Completionitem[]

关键在于connection.onCompletion函数的调用

代码功能概述

代码详细分析

1. 事件监听与回调函数

2. 获取当前文档

3. 获取当前行号

4. 查找最近的节定义

5. 获取当前光标位置和行内容

6. 判断光标是否在方括号内

7. 判断光标是否在冒号之后

8. 根据节名返回补全项

9. 默认返回值

总结

留言评论

文章目录

文章分类

文章标签

站内搜索

xingwangzhe

随机文章

vscode插件开发心得:RustedWarfareModSupport

开发过程

起步,想使用yo code?

代码表,数据从哪来?

拆分dataVAseKey.json

拆分dataBaseValue.json

定义Completionitem[]

关键在于connection.onCompletion函数的调用

代码功能概述

代码详细分析

1. 事件监听与回调函数

2. 获取当前文档

3. 获取当前行号

4. 查找最近的节定义

5. 获取当前光标位置和行内容

6. 判断光标是否在方括号内

7. 判断光标是否在冒号之后

8. 根据节名返回补全项

9. 默认返回值

总结

留言评论

文章目录

文章分类

文章标签