2015-06-22 14 views
14

Jestem nowy w edytorze asów i włączam tryb niestandardowy do sprawdzania poprawności kodu, a każda linia powinna kończyć się średnikiem, jeśli średnik nie jest obecny w moim zapytaniu przez pomyłkę, wówczas edytor powinien odrzucić ostrzeżenie takie jak "Brakujące Średnik".Jak zintegrować sprawdzanie składni w edytorze asów w trybie niestandardowym?

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:

Poniższe pliki js są generowane z asem i dodane do mojej aplikacji szyn, pliki są ładowane w szynach app ale funkcjonalność (check średnik) wydaje się nie działać.

pracownik-semicolonlineend - http://pastebin.com/2kZ2fYr9 Tryb semicolonlineend - http://pastebin.com/eBY5VvNK

Aktualizacja:

  1. W edytorze asa, typ w Kwerenda1, QUERY2 w linii 1 i linii 2 odpowiednio
  2. Leave trzecia linia pusta
  3. Teraz w czwartej linii wpisz zapytanie bez średnika na końcu, znak x pojawia się w trzeciej linii e 5 A gdy piąta linia jest również bez średnikiem, a następnie znak x jest wyświetlany w czwartym zapytania

enter image description here

Odpowiedz

3

Ace redaktor szeroko wspierać tę analizę rzeczowe dla JavaScriptu domyślnie:

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

Wystarczy upewnić się, że plik pracownik worker-javascript.js ja s dostępne dla twojego kodu. W fragmencie kodu powyżej używam CDN, aby uzyskać kompilację Ace, więc pracownik jest zawsze dostępny. Możesz skonfigurować JSHint via worker options.

Aktualizacja: Ale czy naprawdę trzeba coś poza tym trzeba będzie wykonać następujące czynności jako moje rozumienie idzie:

  1. Create Worker and Mode dla ciebie rodzaj analizy
  2. Pobierz Ace source code i zainstalować NodeJS
  3. Umieść swoje nowe pliki w korespondencji Ace foldery z kodem źródłowym
  4. Build Ace
  5. Dodaj zbudować plików do projektu
  6. używać nowego trybu: editor.getSession().setMode("ace/mode/semicolonlineend");

Pracownik które wykonują linię końcową kontrolę będzie wyglądać mniej więcej tak:

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

}); 

nowy tryb, który wykorzystuje pracowników:

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

Próbowałem załadować pliki js do zasobów rails, daje błąd 404 nie znaleziono, jak załadować te pliki w potoku aktywów rails? –

+0

@ M.R jakiego pliku nie ma? Czy dołączane pliki działają poza aplikacją RoR? Istnieją [szczegółowy przewodnik] (http://guides.rubyonrails.org/asset_pipeline.html) i powiązane SO [pytanie] (http://stackoverflow.com/questions/22158464/ace-editor-with-rails-4- precompiled-assets-madness) –

+0

Próbowałem załadować pliki js z folderu publicznego, ale wystąpił błąd NetworkError: 404 Not Found -http: // localhost: 3000/javascripts/mode-semicolonlineend.js ", ale skompilowany plik aktywów ("/assets /mode-semicolonlineend.self-95f9750784a4318e4229fe5c5fb2188a4952fa721854c4d06c246deb6c4c94dd.js?body=1 ") jest obecny wyświetleń: ace.config.set (" basePath”, "/ javascripts"); editor.session.setMode ("semicolonlineend") ; –

Powiązane problemy