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

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

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

打赏作者

  • 思源笔记

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

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

    28457 引用 • 119828 回帖 • 1 关注
  • 代码片段

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

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

    286 引用 • 1988 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • GitLab

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

    46 引用 • 72 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    203 引用 • 4025 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 579 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    30 引用 • 244 回帖 • 116 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 42 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 73 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 183 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    11 引用 • 15 回帖
  • 小说

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

    33 引用 • 108 回帖
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 328 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • Unity

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

    27 引用 • 7 回帖 • 94 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    561 引用 • 677 回帖
  • danl
    216 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    4 引用 • 16 回帖 • 198 关注
  • 知乎

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

    10 引用 • 66 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 16 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    421 引用 • 3610 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 91 关注
  • 心情

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

    59 引用 • 369 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Access
    1 引用 • 3 回帖 • 14 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    8 引用 • 69 回帖 • 7 关注