JS的语法高亮与错误检测

最新推荐文章于 2023-04-29 16:37:20 发布
最新推荐文章于 2023-04-29 16:37:20 发布
阅读量1k 收藏
点赞数
文章标签： javascript 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29922987/article/details/115400858
版权
博主分享了自己利用JavaScript实现的ECMAScript5语法高亮和错误检测器，旨在增强在线编辑器的功能。目前该工具有语法高亮和基本的语法检查功能，未来计划加入代码格式化和自动缩进等特性。希望得到社区的支持和反馈，以继续开发更多编程语言的语法检查器。
摘要由CSDN通过智能技术生成

ECMASCRIPT5的语法高亮与错误检测

我看到网上有许多的在线编程，虽然里面的内如什么的都让我打开眼界。但是我经常发现，在线格式化或者在线编辑代码都没有像客户端那样的强大。它们只是简单的引用CodeMirror插件进行编辑，根本就不具备语法检查以及更加复杂的高亮显示代码。所以，我再三思量后，决定用JS写一个语法高亮和语法检查器。现在代码已经完成，请大家看效果。如果反响好的话，我会继续编写其它编程语言的语法检查器。
在这里插入图片描述
如图所示，主要实现的功能就是语法高亮与语法检测，其它的如代码格式化，空格自动缩进等功能。在后续的开发中将会继续努力的。希望大家多多支持！

爱代码的春日野悠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
codemirror-spellckecker:CodeMirror +拼写检查+快速修复
05-07
Codemirror-spellckecker +拼写检查+快速修复。 日语： を元に技术用语のLintを行う事を目的にしています。 演示： : 安装 npm install codemirror-spellckecker 用法 字典格式 字典作为JavaScript对象。 var dictionaryItems = [ { pattern: 'Web Socket', expected: 'WebSocket' }, { pattern: '\\bBigTable\\b|Big Table|Big table', expected: 'Bigtable' }, { pattern: '\\bCakePHP\\b', flag: 'i',
vuejs - - - - - 使用code编辑器codemirror
最新发布
Dark_programmer的博客
09-22 2013
使用code编辑器codemirror
你知道怎么用JavaScript检查错误吗？学会用JavaScript试错，事半功倍查错因。
weixin_45788388的博客
04-29 1796
当执行 JavaScript 代码时，会发生各种错误。 错误可能是程序员的编码错误，由于错误输入引起的错误，或者由于其他不可预见的问题引发的错误。 JavaScript就提供了试错语句。
codemirror代码编辑器，检测语法高亮显示
热门推荐
方寸之间
12-14 1万+
今天做项目的时候，有个需求是实现编辑JS代码时语法高亮显示，所以用codemirror插件实现了出来，在这里记录下来！ codemirror官网：http://codemirror.net/ codemirror支持自定义主题，而且支持多种语言的语法检测，感觉挺好用的；在这里我用的是自定义的仿照Run.js的主题 写的Demo如下： CodeMirror
代码编辑器CodeMirror及其简单的配置
L_csdn123的博客
07-04 3945
情景：在一个表单中我需要在线填写一些格式的代码，希望在编辑代码的时候能有报错提示，提交之前需要对填写的代码进行校验，如果没通过是不允许提交的 1 引入这个代码编辑器的话，就是像普通组件那种，新建个文件在需要的页面正常引入就行 2 codeEditor/index 代码编辑器页面的简单配置 <template> <div class="code-editor"> <textarea ref="textarea" /> </div> </t
33.CodeMirror编辑器如何在vue项目中使用
weixin_47254130的博客
09-10 867
1.封装组件 <template> <div className="yaml-editor"> <textarea ref="textarea"/> <div> <span style="margin-right: 10px">Ctrl + F</span> <el-button @click="find">查找</el-button> </div&g
js在线学习平台的介绍及安装
Edocevol
05-22 3356
nodejs+express搭建javascript在线IDE项目地址github:https://github.com/sixtrees/js-online-running背景这两天在看阮一峰的《ES6标准入门》，对其中涉及到的代码示例部分，感觉到很不方便，不知道阮老师是如何进行代码调试的。本文利用nodejs+express搭建javascript在线IDE及并解决了3个CodeMirror代码提示问题
codemirror 实现类型检查并执行代码
qq_42464004的博客
04-29 698
使用 vue3 集成，这里直接用了，简单实现了基于codemirror的linter检查参数类型并执行代码。
SublimeSKILL:Cadence Virtuoso SKILL 语法高亮模式
06-05
在Sublime Text中，通过JavaScript编写插件或语法高亮模拟能够丰富编辑器的功能，满足不同编程语言的需求。在这个压缩包文件"SublimeSKILL-master"中，包含了SublimeSKILL的源码和配置文件，用户可以自行安装到...
Sublime微信小程序语法高亮
09-27
在Sublime Text中安装“Sublime微信小程序语法高亮”插件，能够极大地提升开发微信小程序时的代码阅读和编写体验。微信小程序是一种由腾讯公司推出的轻量级应用开发框架，它允许开发者创建原生移动应用，而无需安装...
codemirror-spell-checker:在CodeMirror中进行简单的拼写检查
05-06
CodeMirror拼写检查器 拼写检查非常简单，您可以在60秒内完成设置。 它将以浅红色突出显示所有拼写错误的单词。 与其他CodeMirror模式（例如GitHub Flavored Markdown）结合使用时效果很好。 安装 通过 。 npm install codemirror-spell-checker --save 通过。 bower install codemirror-spell-checker --save 通过 。 请注意，jsDelivr可能需要几天时间才能更新到最新版本。 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/codemirror.spell-checker/latest/spell-checker.min.css " > < script src =" https://cdn
使用JSLint完成JavaScript语法检查
07-01
使用JSLint完成JavaScript语法检查 使用JSLint完成JavaScript语法检查
CodeMirror js代码加亮使用总结
12-10
CodeMirror是一个基于JavaScript的代码编辑器，CodeMirror支持大量语言的语法高亮,也包括css,html,js等的高亮显示。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、代码自动格式等。 　　 CodeMirror源码的github地址：https://github.com/marijnh/CodeMirror/。这几天除了上课之外有空我都是在啃着它的源码，在网上相关资料基本一点都没找到，发觉看起来真是很吃力，这篇总结也只是说个大概原理，具体细节我也很多不明白，虽然很多代码都读得懂，但是串联起来有很大问
C#实现的比较牛逼的语法高亮着色编辑器
08-28
语法高亮是编辑器的关键特性，FastColoredTextBox支持多种编程语言的语法着色，包括但不限于C#、Java、Python、JavaScript等。通过自定义规则，开发者可以轻松添加对新语言的支持。这些规则通常包括关键字、注释、...
单文件Vue组件的SublimeText语法高亮显示
08-08
在Sublime Text中设置Vue.js的语法高亮显示，首先需要安装一个名为“Vue Syntax Highlight”的插件。这个插件可以为.vue文件提供准确的语法着色，提高代码可读性。文件名称列表中的"vuejs-vue-syntax-highlight-074...
VS的JS语法检查插件、高亮显示插件、折叠插件、单元测试插件
04-03
在VS中，有四类插件特别受欢迎：JS语法检查插件、高亮显示插件、折叠插件以及单元测试插件。下面将详细介绍这些插件的功能、作用以及如何使用它们。 1. **JS语法检查插件**： 这类插件的主要任务是实时检查...
vue中使用CodeMirror解析yaml语言
个人博客
06-22 6435
下载插件： 这里使用的是codemirror5，现在codemirror最新已经是6了，不过参考文档相对较少，使用起来不是那么方便。后续文档丰富之后可以考虑使用6这里使用到的配置如下 三、CodeMirror具体使用 1.首先创建一个textarea标签 2.然后引入相关依赖 3.最后初始化编辑器 四、CodeMirror语法校验 1.引入语法校验依赖 codemirror支持的校验库如下 3.安装lint需要的其他依赖 仅仅是这样还是不够的，因为codemirror对应的校验插件中可能还依赖其他
codemirror 使用总结
Somnus_djj的博客
02-02 4551
在开发vue项目的过程中，需要一个可以自定义规则的代码编辑器，最终选用了Vue-Codemirror来进行开发。Vue-Codemirror是基于Codemirror，并适用于Vue的代码编辑器。 官方文档 npm Codemirror Vue-Codemirror demo 功能介绍 多种主题支持 多种语言支持（json、yaml、xml、jsx、sql、css、c、c++等） 语法校验 代码折叠 代码比对以及合并 代码补全 … 等功能 Install npm npm instal.
vscode语法高亮插件
08-17
3. "ESLint"：如果你使用 JavaScript 或 TypeScript，ESLint 可以帮助你在编写代码时检测常见的错误和不规范的写法。 4. "Prettier"：这个插件可以格式化各种编程语言的代码，使其具有统一的风格。 5. ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值