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


Posted in Javascript onOctober 26, 2017

本文介绍了 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

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

首选项 -> 浏览程序包

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

包文件夹

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

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

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

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

vue.tmpl内容

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

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

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

新建 -> New File (SublimeTmpl)

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

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

打开菜单配置项

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

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

新增vue项

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

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

出现vue项

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

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

新建vue文件

3、模板绑定vue语法高亮

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

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

打开默认设置项

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

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

绑定vue语法

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

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

Sublime Text3\Data\Cache目录

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

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

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

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

新建vue文件

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

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

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

打开设置快捷键文件

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

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

创建快捷键

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

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

新建文件菜单

试试,完美!

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

完美

最后

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

最后的最后

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

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

Javascript 相关文章推荐
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js分页代码分享
Apr 28 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
了解JavaScript中的选择器
May 24 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 #Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 #Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 #Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 #Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 #Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php自定义session示例分享
2014/04/22 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python设计模式之中介模式简单示例
2018/01/09 Python
python实现狄克斯特拉算法
2019/01/17 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
课堂打架检讨书200字
2014/11/21 职场文书
公务员政审材料范文
2014/12/23 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏