monaco-editor实现C#自定义语法的智能提示

Monaco  Editor 实现自定义C#方法的智能提示

1. 下载安装：  npm install monaco-editor
2. index.html内主体文件引入

• MonacoEditor加载器文件：<script src="./node_modules/monaco-editor/dev/vs/loader.js"></script>
• 配置编辑器文件：<script src="index.js"></script>
• C#自定义方法文件：<script src="csharpFn.js"></script>
• 编辑器容器：<div id="container" style="height: 1000px; width:100%;"></div>

1. index.js配置

//初始化配置路径
var monacoEditor;
require.config({//设置插件引用路径
     paths: {'vs': 'node_modules/monaco-editor/dev/vs'},
	     'vs/nls': { availableLanguages: {'*': 'zh-cn'}
     }
});

//实例化绑定对象并赋值
require(['vs/editor/editor.main'], function() {
	monacoEditor = monaco.editor.create(document.getElementById('container'), {
		value: "public void",//初始化赋值
		language: 'csharp',//编写的语言类型
		wordWrap: "on", //自动换行，注意大小写
		wrappingIndent: "indent",
		theme: "vs-dark" //皮肤设置  vs vs-dark hc-black
	});
					
	//自定义监听输入编写语法/
	monaco.languages.registerCompletionItemProvider('csharp', {
		provideCompletionItems: function(model, position) {
			//自定义匹配逻辑....
                        var textUntilPosition = model.getValueInRange({
                                startLineNumber: 1,
                                startColumn: 1,
                                endLineNumber: position.lineNumber,
                                endColumn: position.column
                        });
                        var match = textUntilPosition.match(/\s*$/);
                        var suggestions = match ? createDependencyProposals() : [];
                        
                       //点方法调用
                       if(textUntilPosition.charAt(textUntilPosition.length-1)=='.'){
                            //当是点时匹配自定义的方法 ...
                        }else{
                           return {suggestions: suggestions};
                        }

		}
		triggerCharacters: ['.'] // 写触发提示的字符，可以有多个
	})
})

1. csharpFn.js C#自定义方法文件配置

2. function createDependencyProposals() {
   	return [
   		{
   			label: 'context', //显示的提示名称
   			insertText: 'context' //选择后粘贴到编辑器中的文字
   		},
   		{
   			label: 'BuyGoods()', //显示的提示名称
   			kind: 1,//图标显示类型
   			insertText: 'BuyGoods(CSTradeScriptContext context, StockPrice price)',
   			childs: [//该方法的子类方法，可通过点语法调用
   					{
   						label: 'Goods1()',
   						insertText: 'Goods1()' 
   					},{
   						label: 'Goods2()',
   						insertText: 'Goods2()'
   					}
                                   ]
   		}
   }