How to integrate syntax check in Ace Editor using custom mode?

后端 未结 1 861
你的背包
你的背包 2021-01-04 11:10

I\'m new to ace-editor and I have included custom mode to validate my code and every line should end up with semicolon, If semicolon is not present in my query by mistake th

1条回答
  •  南方客
    南方客 (楼主)
    2021-01-04 11:39

    Ace editor widely support this kind analysis for JavaScript by default:

    #editor {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    function foo() { ; // unnessesary semicolon var x = "bar" // missing semicolon return x; // semicolon in place }

    Just make sure that worker file worker-javascript.js is available for your code. In code snippet above I use CDN to get Ace build, so worker is always available. You can configure JSHint via worker options.

    Update: But if really need something beyond that you will need to do the following as my understanding goes:

    1. Create Worker and Mode for you kind of analysis
    2. Download Ace source code and install NodeJS
    3. Put your new files within correspond Ace source code folders
    4. Build Ace
    5. Add build files to your project
    6. Use new mode: editor.getSession().setMode("ace/mode/semicolonlineend");

    Worker that perform line ending check will look something like that:

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

    New mode that uses 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;
    });
    

    0 讨论(0)
提交回复
热议问题