资讯专栏INFORMATION COLUMN

snippet,让你编码效率翻倍

caspar / 1304人阅读

摘要:做个记录,上菜了如何打开配置这里以为例,其他编辑器大概也差不多。时间相关当前年份当前年份的后两位格式化为两位数字的当前月份,如当前月份的全称,如当前月份的简称,如当天月份第几天当天周几,如当天周几的简称,如当前小时小时制当前分钟当前秒数。

为什么谈到Snippet

今天下午在用vscode做小程序的时候,发现很不方便,因为商店里提供的代码片段极为有限,而且平时几乎每天都需要用到代码片段,所以就在思考他们是怎么做到给别人提供代码的,我可以自定义代码片段吗。然后查了下,果然,这在vscode里自带的(好像藏得有点深),是可以自定义的,然后在做完自己的任务后捣鼓了下,基本了解了snippet的语法,突然有种打开新世界大门的感觉。做个记录,上菜了

如何打开snippet配置

这里以vscode为例,其他编辑器大概也差不多。在vscode中快捷键「Ctrl + Shift + P」打开命令窗口,然后输入snippet,选择 [配置用户代码片段],点击后,就可以愉快的进行片段的编写了

Snippet怎么用 先上一个Demo

</>复制代码

  1. "html template": {
  2. "prefix": "ht",
  3. "body": [
  4. "",
  5. "",
  6. "",
  7. " ",
  8. " <span class="hljs-string"><span class="hljs-subst">${<span class="hljs-number">1</span>:$CURRENT_DATE}</span></span>",
  9. "",
  10. "",
  11. "
    ",
  12. " ${3}",
  13. " ",
  14. "",
  15. "",
  16. ],
  17. "description": "create a html frame"
  18. }

效果是这样滴

基础结构

片段名字

prefix(前缀,输入的触发条件,比如上面例子中当我输入ht后,就能tab出来片段)

body(主体部分,在里面根据语法定义自己需要的代码片段)

description(说明,片段的具体描述)

基础语法

每个逗号代表一整行的结束,双引号需要用转义字符

$number表示光标跳转的顺序,比如$1表示光标首次需要跳转的位置,相同序号的会在一起,另外$0表示最终光标位置

变量,在未赋值的情况下提供默认值,这里提供一些变量

</>复制代码

  1. TM_SELECTED_TEXT:当前选定的文本或空字符串;
  2. TM_CURRENT_LINE:当前行的内容;
  3. TM_CURRENT_WORD:光标所处单词或空字符串
  4. TM_LINE_INDEX:行号(从零开始);
  5. TM_LINE_NUMBER:行号(从一开始);
  6. TM_FILENAME:当前文档的文件名;
  7. TM_FILENAME_BASE:当前文档的文件名(不含后缀名);
  8. TM_DIRECTORY:当前文档所在目录;
  9. TM_FILEPATH:当前文档的完整文件路径;
  10. CLIPBOARD:当前剪贴板中内容。
  11. 时间相关
  12. CURRENT_YEAR: 当前年份;
  13. CURRENT_YEAR_SHORT: 当前年份的后两位;
  14. CURRENT_MONTH: 格式化为两位数字的当前月份,如 02;
  15. CURRENT_MONTH_NAME: 当前月份的全称,如 July;
  16. CURRENT_MONTH_NAME_SHORT: 当前月份的简称,如 Jul;
  17. CURRENT_DATE: 当天月份第几天;
  18. CURRENT_DAY_NAME: 当天周几,如 Monday;
  19. CURRENT_DAY_NAME_SHORT: 当天周几的简称,如 Mon;
  20. CURRENT_HOUR: 当前小时(24 小时制);
  21. CURRENT_MINUTE: 当前分钟;
  22. CURRENT_SECOND: 当前秒数。

可选项,当光标到该处的时候弹出一些可选择项,使用 | ,| 后面是自己提供的可选项 我这里是提供了两个值,值之间使用逗号进行分隔

body的高级语法,可以参考这里,写的很详细

最后

效果

最后附上把自己的snippet放到market上的教程,使劲戳这里

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97725.html

相关文章

  • snippet,让你编码效率翻倍

    摘要:做个记录,上菜了如何打开配置这里以为例,其他编辑器大概也差不多。时间相关当前年份当前年份的后两位格式化为两位数字的当前月份,如当前月份的全称,如当前月份的简称,如当天月份第几天当天周几,如当天周几的简称,如当前小时小时制当前分钟当前秒数。 为什么谈到Snippet 今天下午在用vscode做小程序的时候,发现很不方便,因为商店里提供的代码片段极为有限,而且平时几乎每天都需要用到代码片段...

    denson 评论0 收藏0
  • 让你开发效率翻倍的 VSCode 插件配置(上)

    摘要:如果编辑器在编码时实时给出反馈,对开发者个人而言才是最高效的,在提交时做强制检查只是从团队的视角保证编码风格的规范性和一致性。 工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,现在...

    feng409 评论0 收藏0
  • 让你开发效率翻倍的 VSCode 插件配置(上)

    摘要:如果编辑器在编码时实时给出反馈,对开发者个人而言才是最高效的,在提交时做强制检查只是从团队的视角保证编码风格的规范性和一致性。 工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,现在...

    AlanKeene 评论0 收藏0
  • 提高 JavaScript 开发效率的高级 VSCode 扩展!

    摘要:使用高亮类似的扩展更强大的高亮扩展,具有更多功能。为了检查和检查响应,使用了之类的工具。在这里获取这两个扩展自动闭合标记和自动重命名标记。类似的扩展显示提交历史的精美图表等等。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! Quokka.js Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行...

    zhigoo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<