sublime自定义代码片段+emmet插件自定义

最新推荐文章于 2022-06-17 16:14:57 发布

我叫龙弟弟

最新推荐文章于 2022-06-17 16:14:57 发布

阅读量2.3k

点赞数

分类专栏：其他文章标签： sublime

其他专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以 JavaScript为例。选择 Preferences - Browse Packages 菜单，打开 JavaScript 文件夹下的 for-()-{}-(faster).sublime-snippet 这个文件：

<snippet>
    <content><![CDATA[for (var ${20:i} = ${1:Things}.length - 1; ${20:i} >= 0; ${20:i}--) {
    ${100:${1:Things}[${20:i}]}$0
};]]></content>
    <tabTrigger>for</tabTrigger>
    <scope>source.js</scope>
    <description>for (…) {…} (Improved Native For-Loop)</description>
</snippet>

其中，content 部分是代码段。${1:Things} 表示光标的初始位置是 Things，并且 2 处 Things 都是被选中的，可以同时编辑。再按下 Tab 键就会跳转到 ${20:i}，它也是可以直接编辑的。再按几次 Tab 键后，最终会来到 $0，它总被当成最后一个序号，当然也可以使用 ${0:// something} 的形式。
tabTrigger 部分是指，输入 fun 再按 Tab 键，就会触发这个 snippet 来进行补完。
scope 是可选的，source.js 表示只对 JavaScript 代码有效。

description 也是可选的，用于简述其用途，代码补完提示时会显示。

emmet

首先，emmet提供了自定义的文件： snippets.json

在这个文件中我们找到：

"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}})+body)"

默认代码显示后的效果就是上面那样。但是我们要加上上面两个文件引用，效果应该是：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <link rel="stylesheet" href="css/css_base.css">
 7 </head>
 8 <body>
 9      <script src="js/js_base.js"></script>
10 </body>
11 </html>

那么语句应该改为：

"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}}+link[rel=stylesheet][href=css/css_base.css])+(body>script[src=js/js_base.js])"

我叫龙弟弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sublime自定义代码片段+emmet插件自定义

以 JavaScript为例。选择 Preferences - Browse Packages 菜单，打开 JavaScript 文件夹下的 for-()-{}-(faster).sublime-snippet 这个文件：snippet> content>= 0; ${20:i}--) { ${100:${1:Things}[${20:i}]}$0};]]>content>
复制链接

扫一扫

专栏目录