ace编辑器中的空行在自定义模式下显示“x”标记

Question

我已经处理了以下机票 How to integrate syntax check in Ace Editor using custom mode?

我想为ace编辑器构建自定义模式（即每行必须包含除空行之外的半冒号），所以我根据上面的票证创建了worker和mode，但现在问题是“缺少分号”错误显示为空线

考虑以下示例：

1. 在ace编辑器中，分别在第1行和第2行输入query1，query2
2. 将第三行留空
3. 现在在第四行，输入最后没有分号的查询，x标记出现在第三行 4当第五行也没有分号时，x标记显示在第四个查询

在图像中，“X”标记显示错误的行，我该如何解决？

Answer 1

如果lastLineCharacter为空，则在空字符串中不显示错误，需要继续循环。而不是

     if (lastLineCharacter === ';')
         continue;

使用

     if (!lastLineCharacter || lastLineCharacter === ';')
         continue;

或使用正则表达式

     if (/[^;\s]\s*$/.test(lines[i]))
         continue;

这是一个完整的工作示例

define('ace/mode/javascript-custom', [], function(require, exports, module) {

  var oop = require("ace/lib/oop");
  var TextMode = require("ace/mode/text").Mode;
  var Tokenizer = require("ace/tokenizer").Tokenizer;
  var ExampleHighlightRules = require("ace/mode/example_highlight_rules").ExampleHighlightRules;

  var UIWorkerClient = require("ace/worker/worker_client").UIWorkerClient

  var Mode = function() {
    this.HighlightRules = ExampleHighlightRules;
  };
  oop.inherits(Mode, TextMode);

  (function() {
    this.lineCommentStart = "--";
    this.blockComment = {
      start: "->",
      end: "<-"
    };


    this.createWorker = function(session) {
      // use UiWorkerClient for the demo
      var worker = new UIWorkerClient(["ace"], "ace/mode/semicolonlineend_worker",
        "SemicolonLineEndCheckWorker");
      debugger
      worker.attachToDocument(session.getDocument());

      worker.on("annotate", function(results) {
        session.setAnnotations(results.data);
      });

      worker.on("terminate", function() {
        session.clearAnnotations();
      });

      return worker;
    };


  }).call(Mode.prototype);

  exports.Mode = Mode;
});

define('ace/mode/example_highlight_rules', [], function(require, exports, module) {
  var oop = require("ace/lib/oop");
  var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;

  var ExampleHighlightRules = function() {

    var keywordMapper = this.createKeywordMapper({
      "variable.language": "this",
      "keyword": "one|two",
      "constant.language": "true|false|null"
    }, "text", true);

    this.$rules = {
      "start": [{
        token: "comment",
        regex: "->",
        next: [{
          regex: "<-",
          token: "comment",
          next: "start"
        }, {
          defaultToken: "comment"
        }]
      }, {
        regex: "\\w+\\b",
        token: keywordMapper
      }, {
        token: "comment",
        regex: "--.*"
      }, {
        token: "string",
        regex: '"',
        next: [{
          regex: /\\./,
          token: "escape.character"
        }, {
          regex: '"',
          token: "string",
          next: "start"
        }, {
          defaultToken: "string"
        }]
      }, {
        token: "numbers",
        regex: /\d+(?:[.](\d)*)?|[.]\d+/
      }]
    };
    this.normalizeRules()
  };

  oop.inherits(ExampleHighlightRules, TextHighlightRules);

  exports.ExampleHighlightRules = ExampleHighlightRules;

});

define("ace/mode/semicolonlineend_worker", [], function(require, exports, module) {
  "use strict";

  var oop = require("../lib/oop");
  var Mirror = require("../worker/mirror").Mirror;

  var SemicolonLineEndCheckWorker = exports.SemicolonLineEndCheckWorker = function(sender) {
    Mirror.call(this, sender);
    this.setTimeout(100);
  };

  oop.inherits(SemicolonLineEndCheckWorker, Mirror);

  (function() {

    this.onUpdate = function() {
      var lines = this.doc.getAllLines();
      var errors = [];

      for (var i = 0; i < lines.length; i++) {
        var lastLineCharacter = lines[i].trim().slice(-1);
        if (!lastLineCharacter || lastLineCharacter === ';')
          continue;

        errors.push({
          row: i,
          column: lines[i].length - 1,
          text: "Missing semicolon at the end of the line",
          type: "warning",
          raw: "Missing semicolon"
        });

      }

      this.sender.emit("annotate", errors);
    };

  }).call(SemicolonLineEndCheckWorker.prototype);

});


var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");

editor.session.setMode("ace/mode/javascript-custom");
editor.setOptions({
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  theme: "ace/theme/xcode"
});

<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>

<!-- included only for demo -->
<script src="https://ajaxorg.github.io/ace-builds/src/worker-json.js"></script>

<script src="https://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
<div id="editor" style="height: 200px; width: 400px">c d e; g
</div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>