栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Sublime Text新建.vue模板并高亮

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Sublime Text新建.vue模板并高亮

准备工作
  • 下载安装新建文件模板插件 SublimeTmpl

  • 下载安装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) 中文:(首选项 / 包浏览器) 文件夹里面

  • SublimeTmpl

  • Vue Syntax Highlight

创建.vue模板并让语法高亮

安装完Vue Syntax Highlight之后,你打开.vue格式的文件就已经可以高亮了,我们现在来设置用快捷键直接创建.vue格式的文件。

SublimeTmpl 默认只有6种语法模板:
  • html ctrl+alt+h

  • javascript ctrl+alt+j

  • css ctrl+alt+c

  • php ctrl+alt+p

  • ruby ctrl+alt+r

  • python ctrl+alt+shift+p

我们现在新增创建 vue 格式的模板
  1. 创建vue文件模板

    首选项 -> 浏览程序包


    包文件夹

    创建vue.tmpl

    vue.tmpl内容

  • vue.tmpl内容改为你想要的模板

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

  • 直接打开插件包的文件夹 Preferences -> Browse Packages

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

    新建 -> New File (SublimeTmpl)

    打开菜单配置项

    新增vue项

    出现vue项

    新建vue文件

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

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

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

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

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

  • 模板绑定vue语法高亮

    打开默认设置项

    绑定vue语法

    Sublime Text3DataCache目录


    Sublime Text3DataCachevue-syntax-highlight

    新建vue文件

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

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

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

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

  • 绑定新建vue文件快捷键

    打开设置快捷键文件

    创建快捷键

    新建文件菜单

    完美

    • 试试,完美!

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

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

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

    最后

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

    最后的最后

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

    附我的模板 vue.tmpl (2018年1月8日 更新)
    
        @import './assets/css/public.css';    div{        margin: 0;
        }

    原创,如有帮助加个喜欢呗~


    作者:不二很纯洁
    链接:https://www.jianshu.com/p/85df72adecf7


    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/240843.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号