当前位置:首页 > 日记 > 正文

Sublime Text新建.vue模板并高亮 | 图文教程

Sublime Text新建.vue模板并高亮 | 图文教程

本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记。

准备工作

  1. 下载安装新建文件模板插件 SublimeTmpl
  2. 下载安装vue语法高亮插件 Vue Syntax Highlight

Sublime Text安装插件的方法有两种:

1、使用Sublime Text自带的安装库 Package Control 去安装

点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口,输入Install选择Package Control: Install Package来安装

2、下载直接放入包目录 (Preferences / Browse Packages) 中文:(首选项 / 包浏览器) 文件夹里面

  1. SublimeTmpl
  2. Vue Syntax Highlight

创建.vue模板并让语法高亮

安装完Vue Syntax Highlight之后,你打开.vue格式的文件就已经可以高亮了,我们现在来设置用快捷键直接创建.vue格式的文件。

SublimeTmpl 默认只有6种语法模板:

  1. html ctrl+alt+h
  2. javascript ctrl+alt+j
  3. css ctrl+alt+c
  4. php ctrl+alt+p
  5. ruby ctrl+alt+r
  6. python ctrl+alt+shift+p

我们现在新增创建 vue 格式的模板

1、创建vue文件模板

直接打开插件包的文件夹 Preferences -> Browse Packages


首选项 -> 浏览程序包


包文件夹

打开存放模板的文件夹 templates,随便复制一项,改名为vue.tmpl


创建vue.tmplvue.tmpl内容改为你想要的模板


vue.tmpl内容

2、修改新建菜单,增加新建vue选项

SublimeTmpl新建菜单默认是没有vue的,如图

新建 -> New File (SublimeTmpl)

点击上图的 Menu 选项,或者打开 Preferences -> Package Settings -> SublimeTmpl -> Settings - Menu,如图


打开菜单配置项

复制一项,然后粘贴修改为 vue 项,如图


新增vue项

保存修改,就会在新建菜单里面出现vue项,如图


出现vue项

点击上图vue新建项,就会出现之前设置的模板内容,只不过没有语法高亮,并且是纯文本格式,如图


新建vue文件

3、模板绑定vue语法高亮

打开 Preferences -> Package Settings -> SublimeTmpl -> Settings - Default,如图


打开默认设置项

复制一项并修改为vue,路径如下


绑定vue语法

绑定语法关联文件路径请查看目录 Sublime Text3\Data\Cache,寻找vue高亮语法插件名,并打开,如图


Sublime Text3\Data\Cache目录


Sublime Text3\Data\Cache\vue-syntax-highlight

再次菜单新建vue就语法高亮了,如图


新建vue文件

4、绑定新建vue文件快捷键

打开 Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default,如图


打开设置快捷键文件

复制一项,粘贴创建新建vue快捷键为 ctrl+alt+v,如图


创建快捷键

保存后,菜单新建里也有了,如图


新建文件菜单

试试,完美!


完美

最后

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 文件好像是配置命令的,配置方法也跟上面相同,照猫画虎即可~

最后的最后

通过这种方法,其他的语言模板也可以自己去创建。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

浅析正则表达式中的lastIndex以及

浅析正则表达式中的lastIndex以及

正则表达式,电脑软件,lastIndex,依次写出下列输出内容。var reg1 = /a/;var reg2 = /a/g;console.log(reg1.test('abcabc')); // trueconsole.log(reg1.test('abcabc')); // trueconsole.log(reg1.test('abcabc')); // trueconsole.l…

微信小程序 http请求的session管理

微信小程序 http请求的session管理

请求,程序,电脑软件,微信小,session,微信小程序 http请求的session管理作为一个开发JavaWeb应用的程序猿,都喜欢将用户登录后的用户信息(比如说用户id,用户名称)放入session中保存,之后在业务逻辑的开发中需要用到用户信息的时候就可以轻松又方…

PS怎么设计一款漂亮的梅花字体的文

PS怎么设计一款漂亮的梅花字体的文

文字,字体,漂亮,电脑软件,PS,艺术字是平面设计作品中常用的一种形式,今天,我们就要学学梅花字的制作技巧,从在PS的各种工具的使用技巧上再进行一次深入的探索,对于相关艺术字的创意与技术进行一次很好的体验。软件名称:Adobe Photoshop 8.0 中文…

ps怎么设计一个彩色的抽象电视机标

ps怎么设计一个彩色的抽象电视机标

抽象,彩色,标志,电脑软件,ps,ps中想要制作一个彩色的抽象电视机图标,该怎么制作呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、要想绘制出让人眼前一亮的电视机标志就…

Word如何去掉每行后的回车符但保留

Word如何去掉每行后的回车符但保留

回车符,段落,符号,电脑软件,Word,  word中总是默认出来很多回车符,在去除回车符的时候,正常的段落回车符也被去除了。以下是小编为您带来的关于Word去掉每行后的回车符但保留段落符号,希望对您有所帮助。Word去掉每行后的回车符但保留段落符…

PS合成制作出在云海中的泛舟的美女

PS合成制作出在云海中的泛舟的美女

云海,出在,场景,梦幻,美女,现阶段这部分教程适合初级设计师,画面简洁,用到的素材少,只需要溶图,抠图,调色等,可以迅速掌握合成思路。最终效果一、创建背景层。 12 3 4 5 6 阅读全文二、添加树元素。 1 23 4 5 6 阅读全文三、添加小船。 1 2 3…

PS使用3D工具7步打造出简单炫酷的

PS使用3D工具7步打造出简单炫酷的

教程,工具,3D,山脉,星辰,效果图:素材图:主要过程:教程结束,以上就是PS使用3D工具7步打造出简单炫酷的星辰山脉效果教程的全部内容,希望大家喜欢!相关教程推荐:PS怎么设计漂亮的星云艺术字体? PS制作自定义星星图案Photoshop为山水图片制作模拟耶稣…

word文档中怎么画横线word文档中画

word文档中怎么画横线word文档中画

文档,步骤,方法,电脑软件,word,  很多人使用word做试卷时,不知道填空题里的横线怎么画出来。其实这个是非常简单的,当我们掌握这一技巧,对我们以后出试卷非常有帮助。那么下面就由小编给大家分享下word文档中画横线的技巧,希望能帮助到您。wo…

设计PPT时插入flash有哪些方法技巧

设计PPT时插入flash有哪些方法技巧

方法,文件,动画,超链接,扩展,  在制作PPT过程中,很多人喜欢插入flash动画,方便、省事。但插入过程中有很多小技巧,一不注意就会白费功夫。以下是小编为您带来的关于设计PPT时插入flash的五种技巧,希望对您有所帮助。方法一:将扩展名为. SWF的F…

React-Native实现ListView组件之上

React-Native实现ListView组件之上

组件,通用,上拉刷新,实例,电脑软件,在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中…

ps给背景较暗的室内少女人像照片调

ps给背景较暗的室内少女人像照片调

照片,人像,唯美,朦胧,背景,使用Photoshop给背景较暗的室内少女人像照片调出唯美朦胧感,从原图可以看出室内较暗,加上符合主题照片的整体思路是清透,为了达到这么目的我们将做一下修改,包括曝光、对比度&清晰度、高光、阴影&白色、以及黑色的调…

AngularJS 支付倒计时功能实现思路

AngularJS 支付倒计时功能实现思路

功能实现,支付,倒计时,思路,电脑软件,说明:1、前端只负责展示倒计时,不具备实际功能;2、实际实现方式:数据库中设置一个每分钟执行一次的定时任务(故与实际情况会有一分钟以内的误差),只要订单创建时间超过15分钟会自动将订单状态改为“取消”。遇…