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

【问题标题】：How to achieve syntax check in ace-editor如何在 ace-editor 中实现语法检查
【发布时间】：2020-05-21 07:18:39
【问题描述】：

我在我的 Angular 应用程序中使用 ace-editor 作为 JSON 编辑器，ace 编辑器具有根据https://ace.c9.io/build/kitchen-sink.html 检测任何缺失符号（[]、{}、""、...）的功能

Result sceenshot

我发现了一篇建议使用 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'))

谁能帮我确定问题，我是否缺少任何导入或依赖项？

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 });
  }

}

HTML

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

【问题讨论】：

标签： javascript angularjs angular webpack ace-editor

【解决方案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

【讨论】：

感谢@amith，将 useWorker:true 添加到 editorOptions 部分，但这解决了问题，我是否缺少一些属性？