前端代码编辑器ace 语法提示 代码提示

本文主要是介绍ace编辑器的语法提示,自动完成。其实没什么可特别介绍的,有始有终吧,把项目中使用到的ace的功能都介绍下。

{
    enableBasicAutocompletion: false, //boolea 或 completer数组,
    enableLiveAutocompletion: false, //boolean 或 completer数组,
    enableSnippets: false, // boolean
}

  completer,就是拥有一个getCompletions(editor, session, pos, prefix, callback)方法的object

  相关的配置逻辑,可以看下源代码https://github.com/ajaxorg/ace/blob/v1.1.4/lib/ace/ext/language_tools.js

  如果enableBasicAutocompletion, enableLiveAutocompletion的值为数组,就会覆盖编辑器默认的completers,不推荐使用。

  enableBasicAutocompletion 

  设置enableBasicAutocompletion = true,就会增加Autocomplete.startCommand命令。但是快捷键默认是如下配置,和现在的输入法存在冲突。

startCommand.bindKey = "Ctrl-Space|Ctrl-Shift-Space|Alt-Space"

  enableLiveAutocompletion

  设置enableLiveAutocompletion = true,就会在输入内容时,弹出语法提示框,但是逻辑代码中忽略了一些情况,如删除。
  所以如果交互要求变动就弹出提示的话,可以editor绑定change事件,触发命令

editor.on("change", function(e){
  editor.execCommand("startAutocomplete");
})

  项目中还有可能,变量在别的地方预设的,也希望能自动完成,需要通过language_tools,增加自定义的completer

var langTools = ace.acequire("ace/ext/language_tools");
langTools.addCompleter({
    getCompletions: function(editor, session, pos, prefix, callback) {
        console.log(editor, session, pos, prefix, callback);
        if (prefix.length === 0) { callback(null, []); return }
        callback(null, [{
            name: word, //显示的名称,‘奖金’
            value: word, //插入的值,‘100’
            score: 1000, //分数,越大的排在越上面
            meta: type //描述,‘我的常量’
        }]);
    }
});                

  enableSnippets

  设置enableSnippets = true;启用代码块提示的功能。
  如果是给自己新增的mode增加snippets,参照下面的文件配置下。

ace.define("ace/snippets/modeName",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="modeName"})

  snippets配置说明: https://cloud9-sdk.readme.io/docs/snippets
  snippets在线调试:https://ace.c9.io/build/kitchen-sink.html

  通过[TAB]在定义的${1},${2},${3}。。。跳转,最后回到${0},详细的就参照《snippets配置说明》配置,提到的Triggers & Guards,试了几种情况,也没搞明白具体有什么限制。

  

原文地址:https://www.cnblogs.com/legu/p/8360920.html

时间: 2024-10-15 16:28:40

前端代码编辑器ace 语法提示 代码提示的相关文章

前端代码编辑器ace 语法验证

本文主要是介绍实际项目中如何加入语法检测功能.官方文档链接https://github.com/ajaxorg/ace/wiki/Syntax-validation 代码编辑器ace,使用webworker进行实时语法检查.目前支持JavaScript,json,php,coffeescript,css,xquery模式.      根据官方https://ace.c9.io/#nav=higlighter的例子,在项目开发中,新增了Formula的语法高亮,下面是定义Mode并增加语法高亮的部

集成代码编辑器ACE的经验

ACE是最流行的在线代码编辑器之一,在CanTK的集成开发环境GameBuilder里也使用了ACE.ACE的功能非常强大,但是由于使用方法不当,大家反映GameBuilder的代码编辑器不好用.最近花了点时间去完善它,这里把遇到的问题写出来,供有需要的朋友参考. 1.Linux下代码显示与输入不一致. Fedora下代码显示与输入不一致,水平方向上,输入位置是代码显示的一倍.这个问题困扰了我很久,它让代码编辑器根本没法使用.升级操作系统和ACE到最新版本,也无法解决这个问题,而且大部分使用AC

Android平台上最好的几款免费的代码编辑器

使用正确的开发工具能够快速有效地完成源代码的编写和测试,使编程事半功倍.在网络信息高速发展的今天,移动设备的方便快捷已经深入人心,越来越多的程序员会选择在任何感觉舒适的地方使用移动设备查看或者编辑源代码.于是,Android平台上大量基于代码编程的应运而生,谷歌应用商店里的代码编辑器.编译器和开发环境比比皆是.由于不同的工具特性和缺点不尽相同,因此如何选择一款最适合自己的开发工具便成了一件头疼的事情.在这里,我们列出了Android平台上5款最好的代码编辑器来帮助你作出选择. 1. Quoda

ACE代码编辑器,代码提示,添加自定义数据

//设置自动提示代码 var setCompleteData = function(data) { var langTools = ace.require("ace/ext/language_tools"); langTools.addCompleter({ getCompletions: function(editor, session, pos, prefix, callback) { if (prefix.length === 0) { return callback(null,

Xcode解决代码高亮、语法提示、错误警告等功能失效的解决方法

在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里的内容全部注释掉 2.clean掉项目里的内容 3.把.pch里的注释去掉,编译. 4.代码高亮,语法提示功能都回来了. 方法二: 1.关闭项目 2.选择Window->Organizer->Projects 3.选择失效的那一个工程,右健,Remove from Organizer 4.打开工程

HBuilder:一个不错的web前端IDE(代码编辑器)

Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap.但是对于JS的支持到了有的程度而已,语法高亮.语法提示仅此而已了.我们需要的是什么呢? 1.高度匹配的语法提示,例如我定义了哪些空间,语法提示至少可以自动提示控件的ID,控件对应的方法函数,自定义函数的语法提示. 2.JS与HTML的大纲导航 3.J

zen-coding for notepad++,前端最佳手写代码编辑器

zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器,如UltraEdit,Notepad++等. 温馨提示:zen-Coding已经改名Emmet,并且搭建了一个新的网站:docs.emmet.io. zen-Conding下载地址:http://code.google.com/p/zen-coding/downloads/list (进入下载页,

JS代码高亮编辑器 ace.js

JS代码高亮编辑器 ace.js 字数254 阅读2 评论0 喜欢0 瞎扯 ace 是 js 实现的代码编辑器 编译打包之后的 ACE 代码 官网,未提供编译好的文件 ACE 拥有的特点 语法高亮超过110种语言 超过20个主题 自动缩进 减少缩进 一个可选的命令行处理庞大的文件(400万线似乎是极限!) 完全自定义的键绑定,包括vim和Emacs模式 用正则表达式的搜索和替换 突出显示匹配的括号 软标签和实际标签之间切换 显示隐藏字符 使用鼠标拖放文本 换行 代码折叠 多个光标和选择 现场语法

一切从编辑器说起:web前端代码编辑器

俗话说:工欲善其事,必先利其器. 工欲善其事必先利其器.谓工匠想要使他的工作做好,一定要先让工具锋利.比喻要做好一件事,准备工作非常重要. 前端写代码也是一样,需要一个好的适合自己的代码编辑器. 我想大多数人接触前端,都是从 dreamweaver 开始的. dreamweaver大而全,面面俱到. 代码模式,设计模式,拆分模式,实时预览... 在前端这条路上,经常使用,即便是现在也会用用.它有个代码关联的功能: 到现在我使用的 sublime text .WebStorm 也没有发现类似的插件