在Ace Editor中实现代码完成

Ace (Ajax.org Cloud9 Editor) — -. , . — . , , . .

Ace Python, -, .

, , : Ace, Monaco, CodeMirror. CodeMirror , . Monaco, , , ce .

Ace , . (, if-else, try-except, class, def, etc). , , ? — ( ). . — , , . .

, , Ace . , Angular, , ng2-ace-editor .

npm install --save ng2-ace-editor brace ace-builds

.

Editor.component.html

<ace-editor
  id="editor"
  #scriptEditor
  [options]="options"
  [autoUpdateContent]="true"
  [mode]="'python'"
  [theme]="'github'"
  [(text)]="script"
  [style.height.px]="600"
></ace-editor>

editor.component.ts

import { Component } from '@angular/core';
import * as ace from 'brace';
//   
import 'brace/mode/python';
//  
import 'brace/snippets/python';
//  
import 'brace/theme/github';
import 'brace/ext/language_tools';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent {
  script = 'import sys\n\nprint("test")';
  options = {
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    enableSnippets: true
  };

  constructor() { }
}

, ace ng2-ace-editor.

, ace editor, - brace. , brace ace. , , ace.

“enableSnippets” , .

import 'brace/snippets/python'

, .

, , . .

, plunker, : name, value, score, meta. , . . ,

getCompletions: function(editor, session, pos, prefix, callback)

callback . Editor . Session — . Pos — , , prefix — .

, ace/ext/language_tools.js. ,

getDocTooltip: function(item)

innerHTML .

, :

export interface ICompleter {

  getCompletions(
    editor: ace.Editor,
    session: ace.IEditSession,
    pos: ace.Position,
    prefix: string,
    callback: (data: any | null, completions: CompletionModel[]) => void
  ): void;

  getTooltip(item: CompletionModel): void;

}

callback: completions . data — , null. , , :)

, caption. Name Meta. snippet, , . , , . : “{1:variable}”. 1 — (, 1), variable — -.

:

export interface CompletionModel {
  caption: string;
  description?: string;
  snippet?: string;
  meta: string;
  type: string;
  value?: string;
  parent?: string;
  docHTML?: string;
  //  .   -  ,  - 
  inputParameters?: { [name: string]: string };
}

InputParameters. , , :)

, :

export interface MetaInfoModel {
  //  
  Name: string;
  // 
  Description: string;
  //   
  Type: string;
  //   
  Children: MetaInfoModel[];
  //  ,   
  InputParameters?: { [name: string]: string };
}

, , . , , .

, . :

1. completions: { [name: string]: CompletionModel[] } — : . , . .
2. completionsTree: { [name: string]: string[] } : . .
3. roots: string[] — , .

-, getCompletions , , caption. . , , . . , - WebApi, GetRoleById. GetRoleById, . :

1. (.. WebApi.GetRoleById, GetRoleById)
2. , .

, - ( WebApi if. ). , .

. , ( ):

• — -.
• , , + .
• , , . , , , .

, . (, , ).

, , -. HTML , .

getDocTooltip completion. ( ) . :

如果类型指示snippet 且未指定docHTML，则我们认为这是一个简单的提示（关键字，snippet等），并按默认设置设置模板。

  item.docHTML = [
          '<b>',
          item.caption,
          '</b>',
          '<hr></hr>',
          item.snippet
        ].join('');

如果对象具有输入参数，则已经更加困难。必须收集输入参数，完整路径，添加描述并组装HTML。

//   
      let signature = Object.keys(item.inputParameters)
        .map(x => `${x} ${item.inputParameters[x]}`)
        .join(', ');

      if (signature) {
        signature = `(${signature})`;
      }

      const path = [];
      //     
      if (item.parent) {
        let parentId = item.parent;
        while (parentId) {
          path.push(parentId);
          parentId = this.completions[parentId][0].parent;
        }
      }
      const displayName =
        [...path.reverse(), item.caption].join('.') + signature;
      let type = item.type;
      if (item.meta === 'class') {
        type = 'class';
      }

      const description = item.description || '';
      let html = `<b>${type} ${displayName}</b><hr>`;
      if (description) {
        html += `<p style="max-width: 400px; white-space: normal;">${description}</p>`;
      }
      item.docHTML = html;

结果将是这样的。

对于干净的输入：

结论

我们有一个非常方便的自动完成功能，可以轻松地与实现一起使用：）

.