如何使用自定义模式在 Ace Editor 中集成语法检查? [英] How to integrate syntax check in Ace Editor using custom mode?
本文介绍了如何使用自定义模式在 Ace Editor 中集成语法检查?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 ace-editor 的新手，我已经包含自定义模式来验证我的代码，每一行都应该以分号结尾，如果我的查询中错误地不存在分号，那么编辑器应该放弃警告，如缺少分号".
define('ace/mode/javascript-custom', [], function(require, export, 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 模式 = 函数(){this.HighlightRules = ExampleHighlightRules;};oop.inherits(Mode, TextMode);(功能() {this.lineCommentStart = "--";this.blockComment = {开始:->"，结束:<-"};}).call(Mode.prototype);出口.模式=模式；});定义('ace/mode/example_highlight_rules'，[]，函数(需要，导出，模块){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": "一|二","constant.language": "真|假|空"}, "文本", 真);this.$规则 = {开始": [{令牌:评论"，正则表达式:->"，下一个: [{正则表达式:<-"，令牌:评论"，下一个:开始"}, {默认令牌:评论"}]}, {正则表达式:"\w+\b",令牌:keywordMapper}, {令牌:评论"，正则表达式:--.*"}, {令牌:字符串"，正则表达式:'"',下一个: [{正则表达式:/\./,令牌:escape.character"}, {正则表达式:'"',令牌:字符串"，下一个:开始"}, {默认令牌:字符串"}]}, {令牌:数字"，正则表达式:/d+(?:[.](d)*)?|[.]d+/}]};this.normalizeRules()};oop.inherits(ExampleHighlightRules, TextHighlightRules);export.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: 真,enableLiveAutocompletion: 真});editor.setTheme("ace/theme/monokai");var 行 = editor.session.doc.getAllLines();var 错误 = [];for (var i = 0; i <script src="https://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></脚本><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 应用程序中，但功能(分号检查)似乎不起作用.
worker-semicolonlineend -
解决方案
Ace 编辑器默认广泛支持 JavaScript 的这种分析:
#editor {位置:绝对；顶部:0；右:0；底部:0；左:0；}function foo() { ;//不必要的分号var x = "bar"//缺少分号返回 x;//分号就位}<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js" type="text/javascript"></script><脚本>var editor = ace.edit("editor");editor.setTheme("ace/theme/monokai");editor.getSession().setMode("ace/mode/javascript");</script>
只需确保工作文件 worker-javascript.js 可用于您的代码.在上面的代码片段中，我使用 CDN 来构建 Ace，因此 worker 始终可用.您可以通过worker选项配置JSHint.
更新:但如果真的需要其他东西，您将需要按照我的理解执行以下操作:
- 创建
Worker和Mode为你分析 - 下载Ace 源代码 并安装NodeJS
- 将您的新文件放在相应的 Ace 源代码文件夹中
- 构建 Ace
- 将构建文件添加到您的项目
- 使用新模式:
editor.getSession().setMode("ace/mode/semicolonlineend");
执行行结束检查的工人看起来像这样:
define(function(require,exports,module){严格使用"；var oop = require("../lib/oop");var Mirror = require("../worker/mirror").Mirror;var SemicolonLineEndCheckWorker =exports.SemicolonLineEndCheckWorker = 函数(发送方){Mirror.call(this, sender);this.setTimeout(500);this.setOptions();};oop.inherits(SemicolonLineEndCheckWorker, Mirror);(功能() {this.onUpdate = 函数 () {var text = this.doc.getValue();var lines = text.replace(/^#!.*
/, "
").match(/[^
]+/g);var 错误 = [];for (var i = 0; i 使用工人的新模式:
define(function(require,exports,module){严格使用"；var oop = require("../lib/oop");var TextMode = require("./text").Mode;var Mode = function() { };oop.inherits(Mode, TextMode);(功能() {this.createWorker = 函数(会话){var worker = new WorkerClient(["ace"], "ace/mode/semicolonlineend_worker","分号线EndCheckWorker");worker.attachToDocument(session.getDocument());worker.on(注释"，函数(结果){session.setAnnotations(results.data);});worker.on(终止"，函数(){session.clearAnnotations();});返工；};this.$id = "ace/mode/semicolonlineend";}).call(Mode.prototype);出口.模式=模式；});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 then the editor should gives up the warning like "Missing Semicolon".
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>
UPDATE:
The following js files are generated from ace and added to my rails application, the files are loaded in rails app but the functionality (semicolon check) doesn't seem to be working.
worker-semicolonlineend - http://pastebin.com/2kZ2fYr9 mode-semicolonlineend - http://pastebin.com/eBY5VvNK
Update:
- In ace editor, type in a query1, query2 in line 1 and line 2 respectively
- Leave the third line blank
- Now in fourth line, type a query without semicolon in the end, x mark appears in third line 5 And when the fifth line is also without a semicolon, then the x mark is displayed at fourth query
解决方案
Ace editor widely support this kind analysis for JavaScript by default:
#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>
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:
- Create
WorkerandModefor you kind of analysis - Download Ace source code and install NodeJS
- Put your new files within correspond Ace source code folders
- Build Ace
- Add build files to your project
- 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(/^#!.*
/, "
").match(/[^
]+/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;
});
这篇关于如何使用自定义模式在 Ace Editor 中集成语法检查?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
