Sublime Text新建.vue模板并高亮(图文教程)

本文介绍了 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

首选项 -> 浏览程序包

包文件夹

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

创建vue.tmplvue.tmpl内容改为你想要的模板

vue.tmpl内容

2、修改新建菜单，增加新建vue选项

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

新建 -> New File (SublimeTmpl)

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

打开菜单配置项

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

新增vue项

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

出现vue项

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

新建vue文件

3、模板绑定vue语法高亮

打开 Preferences -> Package Settings -> SublimeTmpl -> Settings - Default，如图

打开默认设置项

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

绑定vue语法

绑定语法关联文件路径请查看目录 Sublime Text3\Data\Cache，寻找vue高亮语法插件名，并打开，如图

Sublime Text3\Data\Cache目录

Sublime Text3\Data\Cache\vue-syntax-highlight

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

新建vue文件

4、绑定新建vue文件快捷键

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

打开设置快捷键文件

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

创建快捷键

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

新建文件菜单

试试，完美！

完美

最后

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

最后的最后

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解让sublime text3支持Vue语法高亮显示的示例

    详解让sublime text3支持Vue语法高亮显示的示例

    让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用. 2.将vue-syntax-highlight植入sbulime. 进入sublime,选择菜单项"Preferences->Browse Packages...&quo

  • Sublime Text新建.vue模板并高亮(图文教程)

    Sublime Text新建.vue模板并高亮(图文教程)

    本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记. 准备工作 下载安装新建文件模板插件 SublimeTmpl 下载安装vue语法高亮插件 Vue Syntax Highlight Sublime Text安装插件的方法有两种: 1.使用Sublime Text自带的安装库 Package Control 去安装 点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口,输

  • 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,分享给大家,具体如下: 添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角Apply 提示重启webstorm 重启完成后 Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Exte

  • nginx部署vue项目的详细图文教程

    nginx部署vue项目的详细图文教程

    首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server nginx restart 如果有如下报错,则按照它的提示下载相关插件 我这里下载了2次不同的插件.直到运行server nginx restart指令成功 此时打开浏览器,输入你的服务器ip,就可以看到nginx启动成功 之后进行Vue项目打包: 在你一般输入运行npm run dev的地方输入npm

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • sublime text配置node.js调试(图文教程)

    sublime text配置node.js调试(图文教程)

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> new Build System... 3. 将文件保存为 JavaScript.sublime-build 4. 文件内容为: { "cmd": ["node", "$file"], "file_regex": "^[

  • pycharm新建Vue项目的方法步骤(图文)

    1.首先安装Node.js 官网:https://nodejs.org/zh-cn/ 1)根据自己电脑型号下载好 2)点击安装,傻瓜式一步一步最后完成安装 3)打开CMD,检查是否正常,如果显示了如下则安装正常 2.使用淘宝NPM镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用cnpm命令来安装模块了 3.项目初始

  • JavaScript开发者必备的10个Sublime Text插件

    JavaScript开发者必备的10个Sublime Text插件

    Sublime Text几乎是任何开发者在其工具箱的必备应用程序.Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器,例如Vim和Emacs(具有陡峭的学习曲线). Sublime Text如此受欢迎的其中一个原因就是它的可扩展插件架构.这使得开发人员可以轻松使用新功能,例如代码完成,或远程API文档嵌入,来扩展Sublime的核心功能.Sublime Text的插件并不是开箱即用的--通常需要通过一个叫Pack

  • 推荐几款用 Sublime Text 开发 Laravel 所用到的插件

    推荐几款用 Sublime Text 开发 Laravel 所用到的插件

    我目前主要使用 Sublime Text 2 做 Laravel 开发,主要插件如下: 1.Blade Snippets:提供 Blade 模板自动补全 2.Laravel 4 Blade Highlighter:提供 Blade 关键字高亮 3.Laravel Generator:提供超高效率 Laravel 工作流 这就是之前教程里面说过的way/generators 的 Composer 包的另一个版本,是运行在编辑器里的.不过还是推荐使用命令行版,因为可以方便地读取历史记录,并加以修改.

  • sublime text 3配置使用python操作方法

    1. 在sublime text的官网下载,是适合自己系统的版本.官网地址:https://www.sublimetext.com/3 2.安装好后,在菜单栏打开:Preferences--->Settings(这是写这个的时候,当前最新版的) 3.打开后我们会看到这样两个文件,一个Preferences.sublime-settings--Default和Preferences.sublime-settings--User 那么这个User的文件就是我们要编辑的了 4.在文件的大括号中写入这么

随机推荐