sublime（代码块编写）

最新推荐文章于 2025-06-23 16:56:04 发布

simon_dg

最新推荐文章于 2025-06-23 16:56:04 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端之工具篇文章标签： sublime-text-3

本文链接：https://blog.youkuaiyun.com/simon_dg/article/details/77926474

前端之工具篇专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Sublime Text 3中利用代码片段功能来提高编程效率，通过保存和设置快捷键，使得重复代码编写更加便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在用canvas绘图时，看到有许多相同的代码，就想介绍sublime里面为了加快代码编写，而采用代码片段。
这里只写我了解的。其他需要，请读者自行了解。

打开位置,见下图：

snippet

打开页面
例子

<snippet>
    <content>
        <![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${1}</title>
</head>
<body>
    <canvas id="demo">
    </canvas>
    <script>
    (function() {
        var canvas = document.getElementById('demo');
        canvas.width = ${2:agewg};
        canvas.height = ${3};
        canvas.style.border = '1px solid #000';
        var ctx = canvas.getContext('2d');
       ${4}
        ctx.stroke();
    })();
     \$(function() {

  });
    </script>
</body>
</html>
]]>
    </content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>cans</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

下面图片和上面代码块一样的内容，为了说明清楚，加的图片：

snippet

保存
输入快捷键

snippet

以上。