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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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实现框架(一)
2006/10/09 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
jupyter notebook 重装教程
2020/04/16 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
小学生学习保证书
2015/02/26 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技