如何使用自定义模式在 Ace Editor 中集成语法检查？

Question

我是 ace-editor 的新手，我已经包含自定义模式来验证我的代码，并且每一行都应该以分号结尾，如果分号错误地出现在我的查询中，那么编辑器应该放弃类似“缺少分号”。

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 Mode = function() {
    this.HighlightRules = ExampleHighlightRules;
  };
  oop.inherits(Mode, TextMode);

  (function() {
    this.lineCommentStart = "--";
    this.blockComment = {
      start: "->",
      end: "<-"
    };
  }).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;

});

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
});
editor.setTheme("ace/theme/monokai");
var lines = editor.session.doc.getAllLines();
var errors = [];

for (var i = 0; i < lines.length; i++) {
  if (/[\w\d{(['"]/.test(lines[i])) {
    alert("hello");
    errors.push({
      row: i,
      column: lines[i].length,
      text: "Missing Semicolon",
      type: "error"
    });
  }
}

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

更新：

以下 js 文件从 ace 生成并添加到我的 rails 应用程序中，这些文件已加载到 rails 应用程序中，但功能（分号检查）似乎不起作用。

worker-semicolonlineend - http://pastebin.com/2kZ2fYr9 模式分号线结束 - http://pastebin.com/eBY5VvNK

更新：

1. 在 ace 编辑器中，分别在第 1 行和第 2 行输入 query1、query2
2. 第三行留空
3. 现在在第四行，键入一个末尾不带分号的查询，x 标记出现在第三行 5 并且当第五行也没有分号时，则在第四次查询时显示x标记

Answer 1

Ace 编辑器默认广泛支持 JavaScript 的这种分析：

#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div id="editor">function foo() { ; // unnessesary semicolon
    var x = "bar" // missing semicolon 
    return x; // semicolon in place
}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js" type="text/javascript"></script>
<script>
 var editor = ace.edit("editor");
 editor.setTheme("ace/theme/monokai");
 editor.getSession().setMode("ace/mode/javascript");
</script>

只需确保工作文件worker-javascript.js 可用于您的代码。在上面的代码 sn-p 中，我使用 CDN 来构建 Ace，因此 worker 始终可用。可以配置JSHintvia worker options。

更新：但如果真的需要除此之外的东西，您将需要按照我的理解执行以下操作：

1. Create Worker and Mode 给你分析一下
2. 下载Ace source code并安装NodeJS
3. 将新文件放入对应的 Ace 源代码文件夹中
4. Build Ace
5. 将构建文件添加到您的项目中
6. 使用新模式：editor.getSession().setMode("ace/mode/semicolonlineend");

执行行尾检查的工人看起来像这样：

define(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(500);
    this.setOptions();
};

oop.inherits(SemicolonLineEndCheckWorker, Mirror);

(function() {

    this.onUpdate = function () {
        var text = this.doc.getValue();
        var lines = text.replace(/^#!.*\n/, "\n").match(/[^\r\n]+/g);

        var errors = [];

        for (var i = 0; i < lines.length; i++) {
            var lastLineCharacter = lines[i].trim().slice(-1);
            if (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);

});

使用工作者的新模式：

define(function(require, exports, module) {
"use strict";

var oop = require("../lib/oop");
var TextMode = require("./text").Mode;

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

(function() {

    this.createWorker = function(session) {
        var worker = new WorkerClient(["ace"], "ace/mode/semicolonlineend_worker", 
            "SemicolonLineEndCheckWorker");
        worker.attachToDocument(session.getDocument());

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

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

        return worker;
    };

    this.$id = "ace/mode/semicolonlineend";
}).call(Mode.prototype);

exports.Mode = Mode;
});