Как интегрировать проверку синтаксиса в Ace Editor с помощью пользовательского режима?

Я новичок в 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 (/[wd{(['"]/.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, но функциональность (точка с запятой), похоже, не работает.

работник-semicolonlineend - http://pastebin.com/2kZ2fYr9 режим-semicolonlineend - http://pastebin.com/eBY5VvNK

обновление:

  1. в Редакторе ace введите query1, query2 в строке 1 и строке 2 соответственно
  2. оставьте третью строку пустой
  3. теперь в четвертой строке введите запрос без точки с запятой, в конце появится знак x третья строка 5 и когда пятая строка также без точки с запятой, то знак x отображается при четвертом запросе

enter image description here

14
ace-editor jshint

1 ответов

Ace editor широко поддерживает этот вид анализа для 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 доступно для вашего кода. В приведенном выше фрагменте кода я использую CDN чтобы получить Ace build, поэтому worker всегда доступен. Вы можете настроить JSHint через функции работника.

обновление: но если действительно нужно что-то за этим, вам нужно будет сделать следующее мое понимание говорит:

  1. создать Worker и Mode для вас вид анализа
  2. скачать исходный код Ace и установить NodeJS
  3. поместите новые файлы в соответствующие папки исходного кода Ace
  4. Построить 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);

});

новый режим, который использует worker:

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