[js] 代码块自动缩进及 ctrl+/ 添加注释

最近在 runjs 里写代码,发现代码块不支持自动缩进和快捷键添加注释,很不方便。

于是,让 deepseek 帮忙写了个。

支持大多数常见语言,如果有未识别的语言,则与上一行的空白符位置对齐。

注释支持单行注释和多行注释,默认使用单行注释,多行注释需要在特定语言下配置。

r125.gif

代码

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%80%9D%E6%BA%90%E4%BB%A3%E7%A0%81%E5%9D%97%E8%87%AA%E5%8A%A8%E7%BC%A9%E8%BF%9B%E5%92%8C%E6%B7%BB%E5%8A%A0%E6%B3%A8%E9%87%8A.js

自动缩进原理

1 首先获取上一行的缩进空白符,然后再根据不同语言的特点,在不同关键词下增加不同的缩进
2 上一行的缩进空白符是保底缩进,如果是无法识别的语言,就默认与上一行缩进对齐了
3 如果是已知语言的已知关键词,则根据 langRules 配置里的规则,调用 action 进行计算最终缩进

使用说明

把上面的代码放到思源 js 代码片段中即可。

如果你有自定义语言的需求,可通过 langRules 配置你自己的语言规则。

比如

const langRules = { // JavaScript/TypeScript javascript: { pattern: /([{([]|=>|\b(if|for|while|switch|function|class)\b.*\))\s*$/i, action: (base) => addIndent(base), comment: { prefix: '// ', // 单行注释 suffix: '', isWrap: false }, }, ... }

1 正则表示不同关键词结尾的前面应该加什么样的缩进,具体缩进数由 action 函数决定。
2 action 默认调用 addIndent 添加缩进,默认是上一行的缩进 + 空格或 tab(这个由思源 tab 空格数设置决定的)。
3 当然也可以在 action 里自行处理,base 参数就是上一行的缩进空白符。
4 comment 是注释配置,如果单行配置只需要配置 prefix 即可,如果多行注释,还需要配置 suffix,isWrap 的意思是多行注释下,如果 true,则只会在选中文本前后添加注释标记,如果 false,则每行都添加注释。

常见问题

1 默认使用空格还是 Tab 缩进?支持 2 个空格还是 4 个空格?

1)默认缩进是你上一行的空白符,即你上一行是什么就是什么

2)当特定语言缩进时,缩进空白符由你的思源配置决定的,即设置-> 编辑器->Tab 空格数(当 0 时是 tab,大于 0 则是指定的空格数)

2 支持手机版吗?

支持(但注释不支持,因为手机版无法按快捷键)

3 性能如何?

没有性能瓶颈问题,因为获取上一行空白符的算法是从当前光标开始向上遍历,直到出现换行符为止,通常只需要遍历几个结点就找到上一个换行符了

4 未支持的语言会怎样?

未支持的语言,则会与上一行的开始位置对齐

注释,则默认是 //

5 新的语言,不知道怎么配置正则该怎么办?

把代码放到 ai 里,让 ai 帮忙写,推荐 deepseek-r1

6 这个代码的稳定性如何?

非常稳定,详情请参考 [js] 代码块自动缩进及 ctrl+/ 添加注释 - wilsons 的回帖

7 注释是单行注释?还是多行注释?

注释支持单行注释和多行注释,默认使用单行注释,多行注释需要在特定语言下配置。

但要注意,如果配置 isWrap: true,可能会存在注释嵌套问题,没有按行注释兼容性好。

8 与其他软件添加的注释兼容吗?

兼容

9 注释的后面可以不添加空格吗?

可以,只需要在你的语言配置下面去掉 prefix 前的空格和 suffix 后的空格即可

10 其他注意事项

注意,添加注释时,最好选中整行或非空白符的开始处,如果选中行的一半,则从一半处注释,下次也最好选择一半取消注释(即同上次选择一致),否则可能非预期结果。

另外,不要选择空白符的中间开始注释,因为取消注释时,会计算注释标记后面或结束符的前面的空白符数,如果不足思源 tabSpace 整数倍,则会删除这多余的空白符,这是为了兼容其他软件的注释而做出的牺牲,而在空白符中间选择,很可能破坏空白符的结构。

AI 使用心得

deepseek-r1 不愧是世界第一的推理模型,解决问题的能力超强。

但目前的 ai 就像一个纯纯的武林高手,武力值很高,但理解力不足。

你需要不停的引导并告诉它思路,才能不断修正,从而给出满意的答复。

1 问题不要太宽泛,要具体,除非你要的思路,而不是具体解决问题的办法。

2 不要不停的问问题,而自己不去测试,不去理解,不然问着问着,你的代码就会从可运行,到不可运行,到逐渐凌乱。

3 分解问题,当 ai 的答复不是你想要的答案时,要自己测试并理解后,分析出哪些是正确的,哪些不正确,找出不正确的部分,尝试让 ai 去修复,当修复不理想时要给出自己的思路及可能的解决办法。(有时,你无论怎样调整问法或给出改进意见,ai 都无法完成,这时要考虑自行调试修正有问题的点后,再让 ai 处理其他问题。)

4 关键时要用新对话,比如,当 ai 的回复逐渐凌乱或不理想时。

5 给出全代码或关键代码,并说明你期望结果及存在问题。

6 总之,要用正确的答案不断迭代去问,比如,用测试无误的代码去问下一个问题或让修复有问题的部分或你想改进的点等。

打赏作者

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26169 引用 • 108698 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    193 引用 • 1382 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons

    看来大家都不在代码块中写代码,看来一个好的需求必须经过调查才行。trollface

    @EmberSky 写这个代码的时候我就隐隐的感觉你会喜欢,不知道为什么,没想到果然如此。trollface

    2 回复
  • 因为担心 JS 会引入未知的问题,所以我选择手动按 Tab huaji

    1 回复
    我都是先用,有 bug 再说
    HugZephyr
  • HugZephyr 1 评论 via Android

    那必须,因为我是后台嘛

    其实好早之前就有这个需求了,只是一直不知道怎么搞

    哈哈,我也是,所以我就让 deepseek 帮忙写了
    wilsons
  • wilsons 1 1 评论

    这个 js 很稳定,因为原理很简单,仅仅获取上一行的的空白符,大不了获取不到,不缩进嘛,然后再根据不同的语言去增加可能的空白符,比如 if{后面要比 if 前面的空白符多 4 个等,以形成嵌套,大不了规则匹配不到就不增加空白符嘛。

    除此之外,没有多余的操作,除了读取数据,就是插入空白符,且并没有拦截回车的默认行为,因此即使 js 失效或出错,都不会引起异常,所以一般不会引起意外问题,建议尝试下,相对于输入效率,意外的概率基本可以忽略了。

    至少我从开发完成的那一刻起,就没有发现过 bug,不是发布后,是代码写完后没有发现过 bug,即连测试过程都没有测试出 bug。以往其他代码,总会在测试的时候发现 bug,然后修复,但这个从写完代码开始,一个 bug 没发现,足见其稳定性。

    大概实现过程如下,我首先给 deepseekd dom 结构及我的代码框架,留下没实现的部分,然后 deepseek 补充完善,刚开始几轮交互 deepseek 给的结果效果不理想,不是 bug,是没达到预期,然后我修改后,把正确的给它,让它实现之前错误的部分,提出期望的结果是什么,大概一一两轮就改好。然后接下来发现涉及到全文本结点扫描,我让他优化,它给出缓存优化方案,这个方案是有问题的,因为每次输入代码文本结构会变化,实际上缓存无法被命中,于是我提出向上查找换行符方案,然后它就改好了。然后我把修改好的代码再次让它检查是否有问题及改进点,它提了几条,我采纳了一两条。然后整合后,代码测试正常,没有发现问题,我又浏览了一遍代码整体结构(具体实现细节,比如字符截取过程等没看,只看了大的方向),然后用调试工具,把整个代码流程跟踪了一遍,认为可能出问题的点也跟踪了下,没有发现异常,然后后续的使用过程中也没有发现 bug,可以说从代码写好的那一刻就没发现 bug,哈哈,deepseek 还是很牛的。

    由于文字太长,就不写到评论里了。

    1 回复
    有意思,有空试试
    JeffreyChen
  • wilsons 2

    @EmberSky @siyuan100861186 @JeffreyChen

    已更新至 0.0.5

    0.0.3 及之后版本支持添加注释了!

    ctrl/meta + / 即可添加/取消注释

    妥妥的一个小型 IDE 了 👏

    再配合这个 [js] 代码块优化之折叠 / 展开 / 预览 / 全屏 / 悬浮横向滚动条

    或配合这个 请问思源有没有办法单独调整每个页面的 "显示字号" 和 "页面宽度",要单独调整不影响其它页面 - wilsons 的回帖

    完美!

    1 回复
    4 操作
    wilsons 在 2025-04-29 18:20:47 更新了该回帖
    wilsons 在 2025-04-29 17:42:47 更新了该回帖
    wilsons 在 2025-04-29 16:35:31 更新了该回帖
    wilsons 在 2025-04-29 16:32:58 更新了该回帖
  • Wetoria 1 评论 via macOS

    不是,为什么会这么复杂??

    不要看表面,核心估计就一两百行,全是注释和配置啥的,有些不同算法只是注释了也没删除。 我算了下,语言配置400多行,再去掉注释,也就300来行,大多还是辅助函数,核心算法就更少了。
    wilsons
  • siyuan100861186 1

    今晚就试试

  • wilsons

    0.0.6 新增 Shift+Backspace 删除一个单位的空白符

  • 起始/末尾插入块(我的快捷键是 Ctrl+Enter)之后,缩进的空格会被带到新块:

    1 回复
  • wilsons 1

    已做了兼容处理,这个不是代码逻辑的问题,这个是组合键按键的影响。

    增加了这个判断

    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) { ....... }
请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons

推荐标签 标签

  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    32 引用 • 99 回帖 • 1 关注
  • Excel
    31 引用 • 28 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 253 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1021 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 3 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 487 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 2 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 534 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 101 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 661 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 443 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 122 关注
  • Access
    1 引用 • 3 回帖 • 2 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    589 引用 • 3528 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖 • 5 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    115 引用 • 318 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖