ace.js的代码高亮和自定义提示代码补全
哈喽！！！大家好，我是珊妹儿，首先要说的是疫情特殊期间，仍然奋斗在工作岗位上的程序员们，大家辛苦啦~~~
珊妹儿现在是真正从后端程序媛转成了一名前端程序媛，最近新入职一家公司，岗位是前端开发，第一天就接到一个以前从没听过的前端技术，那就是ACE~,珊妹儿刚接触这个词汇的时候，真的是一脸懵，从来没听过呢-_-......老大给了我一些学习资料，让我研究一天然后写出个demo,在这一天珊妹儿看的源代码看的真是头疼呀，一上午毫无头绪，然后问了问一些前端的朋友，可是大家都没听过ace这个技术（可能是个古董技术吧），真的是孤立无援的感觉，甚至珊妹儿都怀疑自己转前端到底是不是个正确的选择了，最后的研究过程中还是珊妹儿的哥哥一语中的（悄悄告诉你们，珊妹儿的哥哥嫂子都是程序员哦~），才弄明白了点这个东西，但是百度ace了解到，这可是个不错的代码编辑器呢，可以嵌入到网页中的，让人感觉很是强大，那我们就来学习下吧！
我在百度进入的ace官网好像啥也显示不出来呀,这里珊妹儿给大家提供资料啦，这里是官网的内容，可以对ace的使用有一些认识和了解，方便我们去使用它，
链接: https://pan.baidu.com/s/1js2LpzQ0pCC0ZciLrTBeXQ 提取码: rre1 下载后里面有ace.js和 ext-language_tools.js文件，大家可以直接用，另外说下，解压后的ace-builds文件下有min版本，是精简后的，内存占用较少，封装组件的话可以使用min版的哦，对于自定义补齐代码的功能，珊妹儿这里参考了一个不错的文章，大家也可以看看https://www.cnblogs.com/zhongxia/p/5650199.html，珊妹儿直接在解压后的ace同级目录创建了一个html文件，大家可以直接复制过去运行看看，代码及讲解如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<!--导入js库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
<script src="./ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor"); //实例化ace
editor.setTheme("ace/theme/monokai"); //这里是设置代码编辑器的主题，听说ace包含24个主题呢
editor.session.setMode("ace/mode/javascript");//这里是设置代码编辑器按哪种语言显示代码高亮，听说ace支持45种语言呢
//启用提示菜单
ace.require("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
//自定义补全
var languageTools = ace.require("ace/ext/language_tools");
languageTools.addCompleter({
getCompletions: function(editor, session, pos, prefix, callback) {
callback(null, [
{
name : "第一行", //名称
value : "Select",//值，这就是匹配我们输入的内容，比如输入s或者select,这一行就会出现在提示框里，可根据自己需求修改，就是你想输入什么显示出北京呢，就改成什么
caption: "北京",//字幕，下拉提示左侧内容,这也就是我们输入前缀匹配出来的内容，所以这里必须包含我们的前缀
meta: "", //类型，下拉提示右侧内容
type: "local",//可写为keyword
score : 1000 // 让它排在最上面，类似权值的概念
}
]);
}
});
</script>
</body>
</html>
另外的参考链接(如果上面的参考内容还不足以满足你~)：https://blog.csdn.net/kongxingxing/article/details/98481023?depth_1-utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromBaidu-2
对于ace的学习，珊妹儿今天的分享就到这里，有什么问题欢迎留言哈，对了，珊妹儿是刚刚转入前端开发，不懂的地方还很多，如果有前端同学想要互相学习交流的可以私信哈~