カスタムモードを使用してAceEditorに構文チェックを統合する方法は?

私は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アプリにロードされますが、機能(セミコロンチェック)が機能していないようです。

ワーカー-semicolonlineend- http://pastebin.com/2kZ2fYr9モード-semicolonlineend- http://pastebin.com/eBY5VvNK

更新:

  1. エースエディタで、1行目と2行目にそれぞれquery1、query2と入力します
  2. 3行目を空白のままにします
  3. 4行目に、最後にセミコロンなしでクエリを入力すると、3行目にxマークが表示されます5。5行目にもセミコロンがない場合は、4番目のクエリにxマークが表示されます。

ここに画像の説明を入力してください

レオニード・ヴァシレフ

エースエディタは、デフォルトで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ビルドを取得しているため、ワーカーはいつでも利用できます。JSHintは、ワーカーオプションを介して構成できます

更新:しかし、それ以上のことが本当に必要な場合は、私の理解に基づいて次のことを行う必要があります。

  1. 作成WorkerMode、あなたのために一種の分析
  2. AceソースコードダウンロードしてNodeJSをインストールします
  3. 対応するAceソースコードフォルダ内に新しいファイルを配置します
  4. エースを構築する
  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;
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

NOT構文を使用してレコードをフェッチする方法は?

分類Dev

カスタムフックを使用してコードを構造化する方法

分類Dev

フロータイプを使用してモカテストコードを静的にチェックする

分類Dev

Mock.Of <>構文を使用して、コンストラクターにパラメーターを持つクラスをモックする方法は?

分類Dev

特定の商品がWoocommerceのカートに入っている場合は、カスタムチェックアウトフィールドを表示します

分類Dev

カスタムタスクをaiogramexecutorに統合する方法は?

分類Dev

ハッキングに依存しない依存関係のカスタムバージョンを使用してサンドボックス化されたcabalプロジェクトを構築する方法(例:githubからのチェックアウト)

分類Dev

Bootstrapを使用してDjangoでチェックボックスとラジオをカスタムする方法は?

分類Dev

lib2to3のカスタム移行フィクサーを使用してメソッド呼び出しをフェッチする方法は?

分類Dev

カスタムフレームワークをバックボーンに統合する方法は?

分類Dev

シェルとしてカスタムノードスクリプトを使用してVisualStudioCode統合端末を作成する

分類Dev

SearchModuleBaseを使用して、DNNの検索インデックスのカスタムモジュールにAjaxコンテンツを統合しますか?

分類Dev

アスタリスクを使用してモバイル通話をチャットボットに統合する方法

分類Dev

MarshalJSONを使用して、カスタムフィールドタイプを持つ構造をパブリック構造に変換する方法

分類Dev

ヤーンクラスターモードで実行しているときにREST呼び出しを使用してSparkStreamingジョブ統計をフェッチする方法

分類Dev

WP_Queryを使用してWooCommerceカスタムチェックアウトフィールドを表示する

分類Dev

WooCommerce:特定の商品IDがカートに入っている場合、カスタムチェックアウトフィールドを表示します

分類Dev

カスタムリンク構造を使用してSquarespaceにファイルをアップロードする

分類Dev

Rおよびggplot2構文を使用してプロットにカスタムツールチップを追加する

分類Dev

複数のチェックボックスフォームデータを保存するためにMySQLデータベースを構造化し、後でphpで統計を行う方法は?

分類Dev

カスタムチェックアウトフィールドの文字列を空にする方法は?

分類Dev

jmsトピックを統合してストームスパウトにフィードする方法

分類Dev

sqldataproviderを使用してグリッドビューにチェックボックス列を追加する方法は?

分類Dev

spacemacsでグローバルにjs2モードの構文チェックを無効にする方法

分類Dev

infusionsoftにカスタムチェックボックスを追加する方法は?

分類Dev

debuildを使用してパッケージをビルドするときに構成するカスタムオプションを渡す方法は?

分類Dev

モデルdjangoのステータスフィールドをチェックしてユーザーにメールを送信する方法は?

分類Dev

BASH構文はデバッグモードの誤動作をチェックしていますか?

分類Dev

AnyLogicでカスタムオブジェクトを使用してデータをプロットする方法は?

Related 関連記事

  1. 1

    NOT構文を使用してレコードをフェッチする方法は?

  2. 2

    カスタムフックを使用してコードを構造化する方法

  3. 3

    フロータイプを使用してモカテストコードを静的にチェックする

  4. 4

    Mock.Of <>構文を使用して、コンストラクターにパラメーターを持つクラスをモックする方法は?

  5. 5

    特定の商品がWoocommerceのカートに入っている場合は、カスタムチェックアウトフィールドを表示します

  6. 6

    カスタムタスクをaiogramexecutorに統合する方法は?

  7. 7

    ハッキングに依存しない依存関係のカスタムバージョンを使用してサンドボックス化されたcabalプロジェクトを構築する方法(例:githubからのチェックアウト)

  8. 8

    Bootstrapを使用してDjangoでチェックボックスとラジオをカスタムする方法は?

  9. 9

    lib2to3のカスタム移行フィクサーを使用してメソッド呼び出しをフェッチする方法は?

  10. 10

    カスタムフレームワークをバックボーンに統合する方法は?

  11. 11

    シェルとしてカスタムノードスクリプトを使用してVisualStudioCode統合端末を作成する

  12. 12

    SearchModuleBaseを使用して、DNNの検索インデックスのカスタムモジュールにAjaxコンテンツを統合しますか?

  13. 13

    アスタリスクを使用してモバイル通話をチャットボットに統合する方法

  14. 14

    MarshalJSONを使用して、カスタムフィールドタイプを持つ構造をパブリック構造に変換する方法

  15. 15

    ヤーンクラスターモードで実行しているときにREST呼び出しを使用してSparkStreamingジョブ統計をフェッチする方法

  16. 16

    WP_Queryを使用してWooCommerceカスタムチェックアウトフィールドを表示する

  17. 17

    WooCommerce:特定の商品IDがカートに入っている場合、カスタムチェックアウトフィールドを表示します

  18. 18

    カスタムリンク構造を使用してSquarespaceにファイルをアップロードする

  19. 19

    Rおよびggplot2構文を使用してプロットにカスタムツールチップを追加する

  20. 20

    複数のチェックボックスフォームデータを保存するためにMySQLデータベースを構造化し、後でphpで統計を行う方法は?

  21. 21

    カスタムチェックアウトフィールドの文字列を空にする方法は?

  22. 22

    jmsトピックを統合してストームスパウトにフィードする方法

  23. 23

    sqldataproviderを使用してグリッドビューにチェックボックス列を追加する方法は?

  24. 24

    spacemacsでグローバルにjs2モードの構文チェックを無効にする方法

  25. 25

    infusionsoftにカスタムチェックボックスを追加する方法は?

  26. 26

    debuildを使用してパッケージをビルドするときに構成するカスタムオプションを渡す方法は?

  27. 27

    モデルdjangoのステータスフィールドをチェックしてユーザーにメールを送信する方法は?

  28. 28

    BASH構文はデバッグモードの誤動作をチェックしていますか?

  29. 29

    AnyLogicでカスタムオブジェクトを使用してデータをプロットする方法は?

ホットタグ

アーカイブ