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替换已存在于element上的event的方法
Mar 09 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
详解TypeScript的基础类型
Feb 18 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
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php阳历转农历优化版
2016/08/08 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python实现翻译word表格小程序
2020/02/27 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
中职生自我鉴定范文
2013/10/03 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
毕业证代领委托书
2014/09/26 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
邀请函怎么写
2015/01/30 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
学前教育见习总结
2015/06/23 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL