IDE-VS Code-Extension-Language User Defined

September 19, 2020 5:08 PM
上次想做vscode自定義語言的高亮顯示，最後調研結果事用vs cdoe的外掛實現，以下是總結。

官網介紹 https://code.visualstudio.com/api

按照官網操作基本就可以實現啦！~ 本文最後有參考的網站~

環境

• Node

• Git

• Yeoman&VS Code Extension Generator

  npm install -g yo generator-code
  

• 建立

  yo code
  code .
  

• 除錯 F5

Code

這次沒有按照官網去寫helloworld，而是直接建立的"New Language Support"
以下是完成的程式碼及相關配置：

Shell log

外掛目錄結構

其中.bak是我後面做的備份

Code

• package.json

{
    "name": "wellinos-yuan-lang",
    "displayName": "Wellinos Yuan Lang",
    "description": "Syntax highlighting for Wellinos Yuan Lang",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.49.0"
    },
    "categories": [
        "Programming Languages"
    ],
    "contributes": {
        "languages": [{
            "id": "wellinos",
            "aliases": ["WellinOS", "wellinos"],
            "extensions": [".wellinos"],
            "configuration": "./language-configuration.json"
        }],
        "grammars": [{
            "language": "wellinos",
            "scopeName": "source.wellinos",
            "path": "./syntaxes/wellinos.tmLanguage.json",
            "embeddedLanguages": {
                "meta.embedded.block.javascript": "javascript"
              }
        }]
    }
}
 

• language-configuration.json

{
    "comments": {
        // symbol used for single line comment. Remove this entry if your language does not support line comments
        "lineComment": "//",
        // symbols used for start and end a block comment. Remove this entry if your language does not support block comments
        "blockComment": [ "/*", "*/" ]
    },
    // symbols used as brackets
    "brackets": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"]
    ],
    // symbols that are auto closed when typing
    "autoClosingPairs": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"],
        ["\"", "\""],
        ["'", "'"],
        { "open": "/**", "close": " */", "notIn": ["string"] },
        ["Object<", ">"],
        ["ObjectHistory<", ">"],
        ["ObjectPlan<", ">"],
        ["ObjectAttribute<", ">"],
        ["ObjectHistoryAttribute<", ">"],
        ["ObjectPlanAttribute<", ">"],
        ["Event<", ">"],
        ["EventHistory<", ">"],
        ["EventPlan<", ">"],
        ["EventAttribute<", ">"],
        ["EventHistoryAttribute<", ">"],
        ["EventPlanAttribute<", ">"],
        ["CommonEvent<", ">"],
        ["CommonEventAttribute<", ">"],
        ["Enum<", ">"],
        ["Flow[", "]"],
        ["Interface[", "]"],
        ["Timeout[", "]"],
    ],
    // symbols that can be used to surround a selection
    "surroundingPairs": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"],
        ["\"", "\""],
        ["'", "'"],
        ["<", ">"]
    ],

    //Copy from https://github.com/microsoft/vscode-extension-samples/blob/master/language-configuration-sample/language-configuration.json
    "autoCloseBefore": ";:.,=}])>` \n\t",
    "folding": {
		"markers": {
			"start": "^\\s*//\\s*#?region\\b",
			"end": "^\\s*//\\s*#?endregion\\b"
		}
    },
    "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
    "indentationRules": {
        "increaseIndentPattern": "^((?!.*?\\/\\*).*\\*\/)?\\s*[\\}\\]].*$",
        "decreaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$"
    }
}
 

• wellinos.tmLanguage.json
  拷貝javascript的規則，然後修改了"support-objects",以適配wellinos的基本資料型別和系統函式

"support-objects": {
			"patterns": [{
				"name": "support.constant.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(=[ ]*)(null|undefined)\\b(?!\\$)"
			},{
				"name": "support.class.keyword.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(Object|ObjectHistory|ObjectPlan|ObjectAttribute|ObjectHistoryAttribute|ObjectPlanAttribute|\n  Event|EventHistory|EventPlan|EventAttribute|EventHistoryAttribute|EventPlanAttribute|CommonEvent|CommonEventAttribute|\n Enum|SizeF|Screen|Point3D)\\b(?!\\$)"
			},{
				"name": "support.class.builtin.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(bool|int8|uint8|int16|uint16|int32|uint32|int64|uint64|float|double|numeric|string)\\b(?!\\$)"
			},{
				"name": "support.class.builtin.object.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(datetime|timespan|JSONObject|Color|Pen|Brush|Front|Image)\\b(?!\\$)"
			},{
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(Abs|Sqrt|LogE|Log|Exp|Sin|Cos|Tan|ArcSin|ArcCos|ArcTan|Pow|Mod|Rand|\n  ShiftLeft|ShiftRight|RollLeft|RollRight|\n  RoundUp|RoundDown|Round)\\b(?!\\$)",
				"captures": {
					"1": {
						"name": "support.function.math.wellinos"
					},
					"2": {
						"name": "support.constant.math.wellinos"
					},
					"3": {
						"name": "support.constant.property.math.wellinos"
					},
					"4": {
						"name": "punctuation.accessor.wellinos"
					},
					"5": {
						"name": "punctuation.accessor.optional.wellinos"
					}
				}
			},{
				"name": "support.function.typeconversion.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(Number|Int|Intparse|String|StringFromInt|StringFromReal|Boolean)\\b(?!\\$)"
			},{
				"name": "support.function.json.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(JSONstringify|JSONparse)\\b(?!\\$)"
			},{
				"name": "support.function.screen.wellinos",
				"match": "(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(GetScreen|GetScreenResolution|GetScreenResource|GetScreenResourceSize|GetScreenResourceSize|GetScreenResourceLocation|PrintScreen)\\b(?!\\$)"
			}]
       }

參考網站

TypeScript 安裝 | 菜鳥教程
vs code設定自定義程式碼塊的方法_碼在當下的部落格-CSDN部落格
自定義visual studio code 語法高亮 | 幽幽過客
Contribution Points | Visual Studio Code Extension API
Language Extensions Overview | Visual Studio Code Extension API
microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
Extension API | Visual Studio Code Extension API
vscode-extension-samples/language-configuration.json at master · microsoft/vscode-extension-samples
YAML 入門教程 | 菜鳥教程
Language Grammars — TextMate 1.x Manual
Regular Expressions — TextMate 1.x Manual
Writing a TextMate Grammar: Some Lessons Learned