codemirror 实现类型检查并执行代码

最新推荐文章于 2024-04-30 15:06:23 发布
最新推荐文章于 2024-04-30 15:06:23 发布
阅读量676 收藏 1
点赞数 1
文章标签： vue.js javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42464004/article/details/130441633
版权

介绍

使用 vue3 集成 codemirror，这里直接用了 vue-codemirror，简单实现了基于 codemirror 的 linter 检查参数类型并执行代码。

仓库

使用

代码中提供了如何实现一个加法 add(a, b) 的例子，点击 exec 按钮执行代码。

界面截图

  • 输入联想
    在这里插入图片描述

  • 参数数量提示

    在这里插入图片描述

  • 参数类型提示
    在这里插入图片描述

  • 执行结果
    在这里插入图片描述

  • 函数嵌套

最低0.47元/天 解锁文章
NotJc
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
codemirror代码编辑器，检测语法高亮显示
方寸之间
12-14 1万+
今天做项目的时候，有个需求是实现编辑JS代码时语法高亮显示，所以用codemirror插件实现了出来，在这里记录下来！ codemirror官网：http://codemirror.net/ codemirror支持自定义主题，而且支持多种语言的语法检测，感觉挺好用的；在这里我用的是自定义的仿照Run.js的主题 写的Demo如下： CodeMirror
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
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',
在vue中实现在线代码编辑器之CodeMirror
最新发布
m0_58571759的博客
04-30 334
【代码】在vue中实现在线代码编辑器之CodeMirror。
codemirror-4.2示例代码
08-13
我自己使用codemirror-4.2开发中的示例，通过common.js和codemirror.html文件可以基本了解怎么使用codemirror。希望能帮助大家学习使用codemirror。
codemirror 执行PHP,CodeMirror 使用大全
weixin_32352621的博客
03-11 482
标签：CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件，为各种编程语言实现关键字，函数，变量等代码高亮显示，丰富的api和可扩展功能以及多个主题样式，能满足您各种项目的需求。CodeMirror支持大量语言的语法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、...
ruby-reps:专为Ruby程序员设计的可执行闪存卡应用程序
05-28
计算抽认卡可让您输入并执行实际代码！ 什么是间隔重复？ 如果您正在学习新知识，那么经常复习材料非常重要。 内化材料后，您可能只需要每隔几周/几个月对其进行一次检查，以确保您不会忘记它。 ruby_reps使用间隔...
JAVA上百实例源码以及开源项目源代码
09-17
Java源代码实现部分，比较有意思，也具参考性。像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java...
JAVA上百实例源码以及开源项目
01-03
Java源代码实现部分，比较有意思，也具参考性。像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java...
owasp-dependency-check:为OWASP Dependency-Check应用程序提供预下载的NVDCVE更新
03-21
怎么跑假设您的代码位于code目录中的当前目录中，并且您想要将报告放置在result目录中，那么执行将如下所示： docker run -ti --rm \ -v $( pwd ) /code:/code:ro \ -v $( pwd ) /result:/report \ tgagor/owasp-...
使用CodeMirror实现Python3在线编辑器的示例代码
09-19
主要介绍了使用CodeMirror实现Python3在线编辑器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
codeMirror代码格式化（官方demo）
06-14
codeMirror代码格式化工具,支持sql、C、Java等目前主流的编程语言
codemirror-gherkin-linter
05-02
Codemirror-Gerkin-linter 用于代码镜像的小Cucumber短毛猫。 Gherkin3 js包含在此项目中。 在此处查看以获取演示。
codemirror javascript在线脚本编辑器
学长的猫的博客
09-28 725
codemirror javascript在线脚本编辑器 https://codemirror.net/ <title>codeMirror测试</title> <link type="text/css" rel="stylesheet" href="codemirror/lib/codemirror.css" /> <link type="text/css" rel="stylesheet" href="codemirror/t.
vue使用codemirror实现代码编辑器并嵌套iframe在右侧显示效果（实现复制、运行、刷新、下载功能）
qq_39532524的博客
01-14 1793
vue使用codemirror实现代码编辑器并嵌套iframe在右侧显示效果（实现复制、运行、刷新、下载功能）
JS的语法高亮与错误检测
qq_29922987的博客
04-02 1034
ECMASCRIPT5的语法高亮与错误检测 我看到网上有许多的在线编程，虽然里面的内如什么的都让我打开眼界。但是我经常发现，在线格式化或者在线编辑代码都没有像客户端那样的强大。它们只是简单的引用CodeMirror插件进行编辑，根本就不具备语法检查以及更加复杂的高亮显示代码。所以，我再三思量后，决定用JS写一个语法高亮和语法检查器。现在代码已经完成，请大家看效果。如果反响好的话，我会继续编写其它编程语言的语法检查器。 如图所示，主要实现的功能就是语法高亮与语法检测，其它的如代码格式化，空格自动缩进等功能。
教你轻松搞懂vue-codemirror的基本用法：主要实现代码编辑、验证提示、代码格式化
前端岚枫
05-14 2万+
2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码，实现代码美化效果。不过这两年做项目都是用vue了，需要用到代码编辑器，于是我又找到了代码编辑器vue-codemirror，感觉组件再变，其原理、底层还是没多大变化，用vu e-codemirror,codemirror的方法，配置参数都是通用的，今天我就来分享一下我今天研究的vue-codemirror用法及一些.
基于web的c语言编译器,基于Code Mirror的在线Web 编辑器
weixin_39977488的博客
05-19 736
pacel构建好坑这个pacel，贴个效果图吧，但是构建的速度是真的快pacel构建的编辑器.pngwebpack + vue + CodeMirror 构建需要的依赖包包"vue-codemirror": "^4.0.5",html页面的代码ref="myCm":value="code" //编辑器内容:options="cmOptions"//编辑器配置@ready="onCmReady"@f...
如何执行JS命令或文件
热门推荐
qiansuike的博客
06-10 5万+
前阵子一个初学的哥们问我,网上学习来的高大上js代码要怎么运行看看执行结果，我不假思索地告诉他：在浏览器控制台执行代码就行了啊，然后这哥们儿就没信了，估计是自己去试了 于是引起了我的回忆，我在刚接触的时候，好像也不知道，也没有运行js代码块的需要，也是到正式工作的时候，才开始偶尔跑跑单独的js验证代码是不是逻辑正确，也是因为js不像别的语言，有系统成型的学习，基本上90%(我怀疑是100%)的前...
写段vue代码使用codemirror插件实现点击按钮时执行codemirror代码拼写检查功能
03-24
当用户点击按钮时，可以通过以下代码实现 CodeMirror 代码拼写检查功能： <template> <div> <textarea ref="textarea"></textarea> <button @click="spellCheck">拼写检查</button> </div> </template> <script> import CodeMirror from 'codemirror' import 'codemirror/addon/edit/spell-check' export default { mounted() { this.editor = CodeMirror.fromTextArea(this.$refs.textarea, { mode: 'text/html', lineNumbers: true, spellcheck: true }) }, methods: { spellCheck() { this.editor.spellcheck() } } } </script> 在这个例子中，我们使用了 CodeMirror 插件来实现代码编辑器，并且在组件的 mounted 生命周期中初始化了编辑器。当用户点击按钮时，我们调用了 editor.spellcheck() 方法来执行拼写检查功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值