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

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.jsVue项目中实现带参跳转功能

    Vue项目中实现带参跳转功能

    最近做了一个手机端系统,其中遇到了父页面需要携带参数跳转至子页面的问题,现已解决,下面分享一下实现过程,感兴趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.js用vite搭建vue3应用的实现方法

    用vite搭建vue3应用的实现方法

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

    Asiter7912022-01-22
  • vue.jsVue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    十里不故梦10222021-12-31
  • vue.jsVue2.x 项目性能优化之代码优化的实现

    Vue2.x 项目性能优化之代码优化的实现

    这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    优小U9632022-02-21
  • vue.jsVue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...

    yukiwu6752022-01-25
  • vue.js详解vue 表单绑定与组件

    详解vue 表单绑定与组件

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

    Latteitcjz6432022-02-12
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看过很多人讲vue的生命周期,但总是被绕的云里雾里,尤其是自学的同学,可能js的基础也不是太牢固,听起来更是吃力,那我就已个人之浅见,以大白话...

    CRMEB技术团队7992021-12-22
  • vue.jsVue2.x-使用防抖以及节流的示例

    Vue2.x-使用防抖以及节流的示例

    这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Kyara6372022-01-25