ace编辑器中的空行显示“ x”。在自定义模式下标记 [英] Empty line in ace editor shows "x" mark in custom mode

问题描述

我已经处理了以下票证
如何使用自定义模式在Ace Editor中集成语法检查？

I already worked on the following ticket How to integrate syntax check in Ace Editor using custom mode?

我想为ace编辑器构建自定义模式（即每行必须包含除空行以外的分号），因此我根据上述故障单创建了工作程序和模式，但现在的问题是空行显示缺少分号错误

I want to build the custom mode for ace editor (i.e every lines must contains semi colon except empty lines), so I created worker and mode based on above ticket, but now the issue is "missing semicolon" error shown for empty lines

考虑示例：

1. 在ace编辑器中，分别在第1行和第2行中键入query1，query2


2. 将第三行留空


3. 现在在第四行中，键入不带分号的查询，x标记出现在第三行
   4中，当第五行为同样也没有分号，则在第四次查询时显示x标记

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

In the image "X" mark is shown for wrong line, How do I fix it?

推荐答案

要不显示空字符串错误，如果 lastLineCharacter 为空，则需要继续循环。因此，如果（lastLineCharacter ===‘;’）
继续，而不是

To not show error for empty strings you need to continue loop in the case if lastLineCharacter is empty. So instead of

     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>

这篇关于ace编辑器中的空行显示“ x”。在自定义模式下标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！