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

本贴最后更新于 240 天前,其中的信息可能已经斗转星移

最近在 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 总之,要用正确的答案不断迭代去问,比如,用测试无误的代码去问下一个问题或让修复有问题的部分或你想改进的点等。

打赏作者

  • 思源笔记

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

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

    28445 引用 • 119765 回帖
  • 代码片段

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

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

    285 引用 • 1985 回帖

相关帖子

欢迎来到这里!

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

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

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

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

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

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

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

    1 回复
    有意思,有空试试
    JeffreyChen
  • 其他回帖
  • simuliya 1

    使用未定义规则的语言不会走默认的规则,需要在 455 行改成

    const rules = langRules[lang]?.comment || langRules._default.comment; 
    
    1 回复
  • ruhe

    如果更新{}大括号补全就好了,补全之后鼠标在//的位置,就跟编程软件中一样

    {
        //
    }
    
    1 回复
  • wilsons

    可以让 ai 试试,ai 擅长小修小补

    1 回复
  • 查看全部回帖
wilsons
正式入驻知乎了,以后新贴主要在这里。 欢迎大家订阅关注! 你的关注对我是莫大鼓励,也能让我持续产出优质内容,我们一起成长 🙏 点这里立即关注:https://www.zhihu.com/people/wilsonses

推荐标签 标签

  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • OneDrive
    2 引用 • 3 关注
  • Access
    1 引用 • 3 回帖 • 14 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    293 引用 • 4496 回帖 • 688 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    119 引用 • 54 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    146 引用 • 442 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 174 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • Outlook
    1 引用 • 5 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    327 引用 • 1395 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 72 关注
  • 前端

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

    248 引用 • 1342 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    110 引用 • 153 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 3 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    213 引用 • 2044 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 249 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 740 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖 • 1 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 724 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 5 关注