服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - vue 代码高亮插件全面对比测评

vue 代码高亮插件全面对比测评

2022-02-12 18:13lgx211 vue.js

这篇文章主要介绍了vue 代码高亮插件全面对比测评的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

全面对比

从活跃方面来看

vue 代码高亮插件全面对比测评

从功能方面来看

vue 代码高亮插件全面对比测评

代码高亮是必须的,社区必须活跃,不然修复bug没有一点点参考,太费时间。自动补全缩进,快捷键操作,搜索和替换等功能不是必须的,如果有,能拿来装逼当然最好,不能也不影响使用。

故而挑出了以下几个,再具体分析,逐个调查,查看后续开发,部署的坑,坑少方便的就被我选中。

深入对比

1,ace

Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime,Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。

点击查看官网

vue 代码高亮插件全面对比测评

2,codemirror

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求。

CodeMirror支持大量语言的语法高亮,包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等,以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外,CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、Emacs/VIM键绑定、代码自动格式等。

CodeMirror采用MIT开源许可协议,目前已经被集成到各种应用程序中,如Adobe Brackets、CoDev、Light Table等开发环境,还被作为各种SQL、Haxe、JavaScript在线编辑器的基础库来使用。

点击查看官网

vue 代码高亮插件全面对比测评

3,monaco

Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块。

vue 代码高亮插件全面对比测评

4,结论

vue 代码高亮插件全面对比测评

vue 代码高亮插件全面对比测评

总的来说,这三者功能都挺强的,那通过其缺点来挑选一款来使用吧,

ace,没有代码对比的功能,这不行啊,还要做各版本代码差异对比呢,出局。(我找了找,发现有ace-diff这个插件,可以实现代码差异对比。出局主要是因为我看见打包会有个坑,ace部署失败主要原因是不支持webpack打包,ace在本地搭建完成后,会有一个小型的worker帮助我们对内容进行渲染,webpack打包之后就变成完完全全的静态资源了,动态渲染的效果也就没了,虽然按找官网的意思是可以支持的,但是某博主实践了很多方法,均以失败告终。)

codemirror,其用户交互效果差些,很多东西需要自己拓展来实现其效果,学习这些拓展肯定是需要花时间来犯错的。其多文件的引入方式带来一定的管理不方便以及浏览器端的网络性能影响。

monaco,微软的VSCode用的和其通用了很多核心模块,凭借成熟可靠的产品,用户交互逻辑最好,原生Visual Studio主题,代码差异对比效果也最好。引入文件量巨大,瞅了一眼,大概70多M,引入方式兼容性不太好,打包容易出问题(大部分问题可通过monaco-editor-webpack-plugin插件打包解决)。移动浏览器或移动Web框架不支持Monaco编辑器。demo真的少,官网都没有,官网很好看的做了本英文参考书,有种英文字典的感觉,密密麻麻罗列了一堆属性,就是不知道从哪开始动手,怎么拼接这些成为demo。

以上就是vue 代码高亮插件全面对比测评的详细内容,更多关于vue 代码高亮插件的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/lgx211/p/12710472.html

延伸 · 阅读

精彩推荐
  • vue.js基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    这篇文章主要介绍了基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一...

    前端小白菜~5082021-12-27
  • vue.jsvue-cli中实现响应式布局的方法

    vue-cli中实现响应式布局的方法

    这篇文章主要介绍了vue-cli中实现响应式布局的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    我叫胡八一5402022-01-25
  • vue.jsvue实现拖拽进度条

    vue实现拖拽进度条

    这篇文章主要为大家详细介绍了vue实现拖拽进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    前端菜鸡日常6312022-01-24
  • vue.jsVue如何实现变量表达式选择器

    Vue如何实现变量表达式选择器

    这篇文章主要介绍了Vue如何实现变量表达式选择器,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    紫圣6642022-01-20
  • vue.jsvue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    这篇文章主要介绍了vue中配置scss全局变量的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...

    吃火鸡的馒头4452021-12-21
  • vue.js详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Latteitcjz5582022-02-12
  • vue.jsVue自定义v-has指令实现按钮权限判断

    Vue自定义v-has指令实现按钮权限判断

    这篇文章主要给大家介绍了关于Vue自定义v-has指令实现按钮权限判断的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    OrzR34552022-03-02
  • vue.jsvue 页面跳转的实现方式

    vue 页面跳转的实现方式

    这篇文章主要介绍了vue 页面跳转的实现方式,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下...

    青小记11712021-12-30