Come integrare il controllo della sintassi in Ace Editor utilizzando la modalità personalizzata?

Question

Sono nuovo di ace-editor e ho incluso la modalità personalizzata per convalidare il mio codice e ogni riga dovrebbe finire con il punto e virgola, se il punto e virgola non è presente nella mia query per errore allora l'editor dovrebbe rinunciare all'avviso come "Mancante Punto e virgola".

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>

UPDATE:

i seguenti file js vengono generati da asso e aggiunti alla mia domanda rotaie, i file vengono caricati in rotaie app, ma la funzionalità (controllo e virgola) non sembra funzionare.

lavoratore-semicolonlineend - http://pastebin.com/2kZ2fYr9 mode-semicolonlineend - http://pastebin.com/eBY5VvNK

Aggiornamento:

1. In editor di asso, digitare un Query1, query2 in linea 1 e, rispettivamente, la linea 2
2. Leave la terza riga vuota
3. Ora nella quarta riga, digitare una query senza punto e virgola alla fine, il segno x viene visualizzato nella terza riga e 5 E quando la quinta riga è anche senza un punto e virgola, quindi il segno x è visualizzato in quarta interrogazione

Answer 1

Ace redattore ampiamente sostenere questa analisi genere per Javascript per impostazione predefinita:

#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>

Basta fare in modo che il file lavoratore worker-javascript.js i s disponibile per il tuo codice. Nello snippet di codice sopra, utilizzo CDN per ottenere Ace build, quindi worker è sempre disponibile. È possibile configurare JSHint via worker options.

Aggiornamento: Ma se davvero bisogno di qualcosa al di là che è necessario eseguire le seguenti operazioni come la mia comprensione va:

1. Create Worker and Mode per voi tipo di analisi
2. Scarica Ace source code ed installare NodeJS
3. Metti i tuoi nuovi file all'interno corrispondenti Cartelle del codice sorgente Ace
4. Build Ace
5. Aggiungi costruire file al progetto
6. Uso nuova modalità: editor.getSession().setMode("ace/mode/semicolonlineend");

lavoratori che svolgono linea che termina di controllo avrà un aspetto simile che:

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

}); 

Nuova modalità che utilizza lavoratori:

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