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实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
vue渲染方式render和template的区别
Jun 05 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php 无限级缓存的类的扩展
2009/03/16 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
Mac下安装vue
2018/04/11 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
深入理解javascript中的this
2021/02/08 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
django中media媒体路径设置的步骤
2019/11/15 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
判断单链表中是否存在环
2012/07/16 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
舞蹈专业求职信
2014/06/13 职场文书
组工干部对照检查材料
2014/08/25 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年部门工作总结
2014/11/12 职场文书
初中学生操行评语
2014/12/26 职场文书
女性励志书籍推荐
2019/08/19 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
Python实现简单的猜单词
2021/06/15 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL