记录 Monaco Editor

// 引入 Monaco Editor 的核心模块

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b14c6fe32d643ee94750f09e62852e7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3024&h=1583&s=115682&e=webp&b=fefefe)[](https://link.juejin.cn/?target=)

# shadcn-ui是什么?


const monaco = require('monaco-editor');
// 创建一个编辑器实例
const editor = monaco.editor.create(document.getElementById('container'), {
  value: '',
  language: 'javascript'
});
// 注册一个 CompletionItemProvider
monaco.languages.registerCompletionItemProvider('javascript', {
  // 定义提供属性提示的方法
  provideCompletionItems: function(model, position) {
    // 获取用户输入的文本
    const text = model.getValueInRange({
      startLineNumber: position.lineNumber,
      startColumn: 1,
      endLineNumber: position.lineNumber,
      endColumn: position.column
    });
    // 定义一个数组，存放属性提示的数据
    const suggestions = [];
    // 如果用户输入了 obj，就提供 obj 的属性提示
    if (text.endsWith('obj')) {
      // 添加 obj.name 的提示
      suggestions.push({
        label: 'name',
        kind: monaco.languages.CompletionItemKind.Property,
        insertText: 'name',
        detail: 'The name of the object',
        documentation: 'This is a string property that represents the name of the object.'
      });
      // 添加 obj.age 的提示
      suggestions.push({
        label: 'age',
        kind: monaco.languages.CompletionItemKind.Property,
        insertText: 'age',
        detail: 'The age of the object',
        documentation: 'This is a number property that represents the age of the object in years.'
      });
      // 添加 obj.sayHello 的提示
      suggestions.push({
        label: 'sayHello',
        kind: monaco.languages.CompletionItemKind.Method,
        insertText: 'sayHello()',
        detail: 'The sayHello method of the object',
        documentation: 'This is a function property that prints a greeting message to the console.'
      });
    }
    // 返回提示的数组
    return { suggestions: suggestions };
  }
});