在ace-editor中如何实现语法检查

Question

我在我的角度应用程序中使用ace编辑器作为JSON编辑器，ace编辑器有一个功能来检测任何丢失的符号([]，{}，""，等等)。根据https://ace.c9.io/build/kitchen-sink.html

结果剪影

我找到了一个帖子，它建议使用webpack，但我无法实现与屏幕截图显示的相同。添加了以下代码行

import "ace-builds/webpack-resolver";

ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader!ace-builds/src-noconflict/worker-json'))
ace.config.setModuleUrl('ace/mode/html', require('file-loader!ace-builds/src-noconflict/mode-html.js'))

有什么能帮我找出问题的吗，我是不是遗漏了任何导入或依赖？

1. https://github.com/ajaxorg/ace-builds/issues/129
2. https://github.com/ajaxorg/ace-builds/blob/7489e42c81725cd58d969478ddf9b2e8fd6e8aef/webpack-resolver.js#L234

editor.ts

import {
  Component, ViewChild, ElementRef, Input, Output, EventEmitter,
  OnChanges, SimpleChanges
} from '@angular/core';

import * as ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-github';
import "ace-builds/webpack-resolver";

ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader!ace-builds/src-noconflict/worker-json'))
ace.config.setModuleUrl('ace/mode/html', require('file-loader!ace-builds/src-noconflict/mode-html.js'))

const THEME = 'ace/theme/github';
const LANG = 'ace/mode/json';

export interface EditorChangeEventArgs {
  newValue: any;
}

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnChanges {
  @ViewChild('codeEditor') codeEditorElmRef: ElementRef;
  private codeEditor: ace.Ace.Editor;

  @Input() jsonObject;
  @Input() readMode;
  @Output() change = new EventEmitter();

  data: any;
  mode: any;

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    for (const properties of Object.keys(changes)) {
      if (properties == 'jsonObject') {
        const currentJSONObject = changes[properties];
        if (currentJSONObject.currentValue && currentJSONObject.firstChange == false)
          this.codeEditor.setValue(JSON.stringify(currentJSONObject.currentValue, null, '\t'), -1);
        else
          this.data = currentJSONObject.currentValue
      }
      if (properties == 'readMode') {
        const currentReadMode = changes[properties];
        if (currentReadMode.firstChange == false)
          this.codeEditor.setReadOnly(currentReadMode.currentValue);
        else
          this.mode = currentReadMode.currentValue
      }
    }
  }

  ngAfterViewInit() {
    const element = this.codeEditorElmRef.nativeElement;
    const editorOptions: Partial<ace.Ace.EditorOptions> = {
      highlightActiveLine: true,
      displayIndentGuides: true,
      highlightSelectedWord: true,
    };
    this.codeEditor = ace.edit(element, editorOptions);
    this.codeEditor.setTheme(THEME);
    this.codeEditor.getSession().setMode(LANG);
    this.codeEditor.setShowFoldWidgets(true);
    this.codeEditor.setHighlightActiveLine(true);
    this.codeEditor.setShowPrintMargin(false);
    if (this.data)
      this.codeEditor.setValue(JSON.stringify(this.data, null, '\t'), -1);
    this.codeEditor.setReadOnly(this.readMode);
    if (this.mode)
      this.codeEditor.setReadOnly(this.mode);
  }

  ngAfterViewChecked() {
    this.codeEditor.setOptions({
      maxLines: this.codeEditor.getSession().getScreenLength(),
      autoScrollEditorIntoView: true
    });
    this.codeEditor.resize();
  }

  onChange(updatedJSON) {
    this.change.emit({ newValue: updatedJSON });
  }

}

<div ace-editor #codeEditor [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange($event)"
    (change)="onChange(codeEditor.value)" class="editor">
</div>

Answer 1

我通过启用语法检查器来解决这个问题：

private getEditorOptions(): Partial<ace.Ace.EditorOptions> & { enableBasicAutocompletion?: boolean; } {
        const basicEditorOptions: Partial<ace.Ace.EditorOptions> = {
            useWorker:true,
            highlightSelectedWord: true,
            minLines: 20,
            maxLines: 35,
        };
        const margedOptions = Object.assign(basicEditorOptions);
        return margedOptions;
    }

在编辑器选项中，需要启用语法检查器以启用需要使用useWorker:true的语法检查器。