sublime Text3支持vue高亮,sublime Text3格式化Vue

第一:让sublime Text3支持Vue高亮

PS:我的sublime版本是3126,我不清楚其它版本的是不是这样设置,不过可以看看思路自己摸索下

1.下载可以让vue格式高亮的插件vue-syntax-highlight

github链接

我下载好的插件包,为避免插件的更新,还是建议用上面的方式,从github上下载 ,插件包下载

2.把插件放到sublime中

菜单  设置 --> 浏览资源包

打开了此文件夹

在这个文件夹中新建一个文件夹,改名为Vue。下载的插件安装包解压缩后,把里面的内容都复制到Vue文件夹内

下图是压缩包解压后的内容,就是把这些东西复制到Vue文件夹里

复制完如下

3.在sublime中导入vue-syntax-highlight插件

快捷键“Ctrl+Shift+p”,调出命令板,输入Vue,选中第一个就导入成功了

这样子,sublime就支持vue格式的文件啦

第二:让sublime Text3支持Vue格式化

安装 HTML-CSS-JS Prettify 插件,安装方法如下

快捷键“Ctrl+Shift+p”,调出命令板,输入HTML-CSS-JS Prettify,出来后,回车安装成功。

安装完成后,打开下面框起来的文件

输入下面代码

{
    "global_file_rules":
    {
        // Be sure to include the `html` key in your user settings to be able
        // to prettify html files.
        "html":
        {
            "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"],
            "allowed_file_syntaxes": ["html", "xml"],
            "disallowed_file_patterns": []
        },
    },
}

下图是默认设置和用户设置,左边是默认,右边是用户设置

可以自己看看对比下哦,至此就可以了。

打开vue格式的文件,快捷键Ctrl+Shift+H ,Duang!整齐啦。

PS:注意下HTML-CSS-JS prettify的默认设置文件,这个地方,因为这个插件是需要靠nodejs的,所以你必须安装了nodejs,而且这个地方的路径要注意保证是你本地的nodejs的安装路径

时间: 2024-10-12 20:46:19

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...”. 在打开的文件夹中创建“Vue”文件夹. 在Vue文件夹中,将

Sublime Text3 支持Less

1.安装Sublime 插件 (1)安装LESS插件:因为Sublime不支持Less语法高亮,所以,先安装这个插件,方法: ctrl+shift+p>install Package>输入less按Enter (2)安装LESS2CSS插件:这个插件的作用是 当保存less文件的时候自动生成同名的css文件: 当保存less文件的时候提示编译错误信息: 批量编译项目目录下的所有less文件为css文件. 安装方法:ctrl+shift+p>install Package>输入les

sublime中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...”. 在打开的文件夹中创建“Vue”文件夹. 在Vue文件夹中,将

Sublime Text 3 常用插件以及安装方法(vue 插件)(转)

使用Package Control组件安装 也可以安装package control组件,然后直接在线安装:按Ctrl+` 调出console粘贴以下代码到底部命令行并回车: { import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_o

如何让你的.vue在sublime text 3 中变成彩色?

作者:青鲤链接:https://www.zhihu.com/question/52215834/answer/129495890来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.下载文件 链接 GitHub - vuejs/vue-syntax-highlight: Sublime Text syntax highlighting for single-file Vue components// 2.sublime菜单栏->首选项->浏览插件,打开Packag

关于将sublime中的代码高亮导出到博客中

第一步:打开sublime编辑器,用快捷键ctrl+shift+p调出control panel,在出现的输入框中输入install,按回车键 第二步:然后输入插件名称sublimehighlight,选中并进行安装,当页面最下方出现一行输入框的时候,将此行代码粘贴进去:”https://github.com/n1k0/SublimeHighlight/tree/python3“ 按回车键 第三步:接下来,再设置代码的样式 设置方法为:依次点开下图所示: 第四步:此时会出现一个页面,我设置的代码

Sublime Text 编辑器 插件 之 "Sublime Alignment" 详解

作者:shede333主页:http://my.oschina.net/shede333版权声明:原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | [Creative Commons BY-NC-ND 3.0][] #Sublime Text 编辑器 插件 之 "Sublime Alignment" 详解 Sublime Alignment 主要用于代码对齐,最新版据说已经集成了这个插件. 下载地址: Sublime Text 2 Sublime Text 3 Sublime

微信小程序的HTML和Markdown格式的富文本渲染组件html2wxml,支持代码高亮

之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:https://github.com/qwqoffice/html2wxml 原文地址:https://www.cnblogs.com/goloving/p/10558503.html

vue 项目 webstrom IDE格式化代码规则遵循eslint设置

首先vue-cli生成了一个项目,开启了eslint的检测, 但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错. 解决办法一: 编辑器打开文件 首先,在编辑器里面要启用eslint 插件 在 .eslintrc.js 上右键,菜单底部有一个 "Apply ESLint Code Style Rule" 点它,之后自动格式化就会按照 eslint 的规则了 解决办法二: webstorm 设置页面->Editor->Code Style里面