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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
Vue打包后访问静态资源路径问题
Nov 08 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
第七节--类的静态成员
2006/11/16 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
如何在PHP中生成随机数
2020/06/04 PHP
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js给selected添加options的方法
2015/05/06 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
详解Python开发中如何使用Hook技巧
2017/11/01 Python
图解Python变量与赋值
2018/04/03 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Python @property及getter setter原理详解
2020/03/31 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
七年级政治教学反思
2014/02/03 职场文书
小学开学典礼主持词
2014/03/19 职场文书
殡葬服务心得体会
2014/09/11 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
开会通知短信大全
2015/04/20 职场文书
光荣之路观后感
2015/06/12 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL