为 Sublime Text 自定义 Log 语法高亮 - 推酷
为 Sublime Text 自定义 Log 语法高亮
近日，代码写得越来越少，大部分时间都用来查 Bug 了，而查 Bug 的大部分时间里，是在看崩溃报告和用户日志。
有过看 Log 经历的人都知道，Log 到看时方恨少，对着十多兆的日志文件，满屏幕的文本信息，却找不到自己想要的那个关键点的记录，这是极其让人崩溃的。于是，看代码和写代码的时候都会下意识地在关键路径都打上 Log，宁可错打一千，不可放过一条。几次下来， Log 文件越来越大，看 Log 越来越累……如果逼不得已非得要大海捞针，那就让捞针这个过程更方便一些吧，这时候，关键字过滤以及高亮的需求随之而来。
软件界的神器之所以能成为神器，除了其本身功能突出之外，很大部分原因是它支持各种定制，能方便地添加插件或扩展，比如 Vim，Alfred，Chrome，等等。Sublime Text 也毫不例外地支持插件和自定义。本文要说的就是如何为 Log 文本文件添加自定义的语法高亮。
1. 创建自定义语法高亮文件
1.1 安装 Package Control
是 Sublime Text 的插件管理器，其本身也是一个插件，通过 Package Control 能很方便地查找、安装、卸载插件。
1.2 安装 PackageDev 插件
是一款快速创建 Sublime Text 的语法定义、片段等扩展文件的插件。
1.3 创建语法文件
安装 PackageDev 后，通过 Tools | Packages | Package Development | New Syntax Definition 菜单，创建一个新的语法文件。
这时候，会自动新建一个空模板：
# [PackageDev] target_format: plist, ext: tmLanguage
name: Syntax Name
scopeName: source.syntax_name
fileTypes: []
uuid: 516bc7ff-03be--b83e
1.4 定义语法高亮规则
包括设置语法名、后缀名、需要匹配的关键字、使用什么语法高亮关键字，等等。如下所示：
# [PackageDev] target_format: plist, ext: tmLanguage
name: MyLog
scopeName: text.mylog
fileTypes: [mylog]
uuid: 516bc7ff-03be--b83e
- comment: Keyword
name: keyword.other.mylog
match: \b(INFO|Info|WARN|Warn|ERROR|Error)\b
- comment: Number
name: constant.numeric.mylog
match: \b((\d*)|(0x[0-9a-zA-Z]*))\b
- comment: Funtion
name: support.function.mylog
match: ([-+])(\[.*?\])
- comment: Crash Error
name: string.regexp.log
match: (\b(CRASH|Crash|crash|WARNING|Warning|warning|FAIL|Fail|fail)\b.*)
点击保存，在 Packages/User/ 目录下创建一个 MyLog 文件夹，文件名改为 MyLog.YAML-tmLanguage ，保存到 MyLog 文件中。
语法的定义可以参考
匹配的关键字的 name 的定义，见
1.5 保存为 tmLanguage 文件
上面的 YAML 文件提高了可读性，但为了让 Sublime Text 能识别，还需要转换为 tmLanguage 文件。
编辑完并保存 YAML 后，点击 Tools | Build System | Convert to ，或者按 Ctrl(CMD) + B 把 YAML 文件转为 tmLanguage ，这时应该会自动保存到 Sublime Text 的配置文件夹中 Packages/User/MyLog/MyLog.tmLanguage ：
&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE plist PUBLIC &-//Apple Computer//DTD PLIST 1.0//EN& &/DTDs/PropertyList-1.0.dtd&&
&plist version=&1.0&&
&key&fileTypes&/key&
&string&mylog&/string&
&key&name&/key&
&string&MyLog&/string&
&key&patterns&/key&
&key&comment&/key&
&string&Keyword&/string&
&key&match&/key&
&string&\b(INFO|Info|WARN|Warn|ERROR|Error)\b&/string&
&key&name&/key&
&string&keyword.other.mylog&/string&
&key&comment&/key&
&string&Number&/string&
&key&match&/key&
&string&\b((\d*)|(0x[0-9a-zA-Z]*))\b&/string&
&key&name&/key&
&string&constant.numeric.mylog&/string&
&key&comment&/key&
&string&Funtion&/string&
&key&match&/key&
&string&([-+])(\[.*?\])&/string&
&key&name&/key&
&string&support.function.mylog&/string&
&key&comment&/key&
&string&Crash Error&/string&
&key&match&/key&
&string&(\b(CRASH|Crash|crash|WARNING|Warning|warning|FAIL|Fail|fail)\b.*)&/string&
&key&name&/key&
&string&string.regexp.log&/string&
&key&scopeName&/key&
&string&text.mylog&/string&
&key&uuid&/key&
&string&516bc7ff-03be--b83e&/string&
此后，使用 Sublime Text 打开一个后缀名 .mylog 的文件，或者打开 Plain Text 类型的文件然后设置 Syntax 为 MyLog 类型，就可以看到高亮的效果了。如图：
2. 配合其他插件，效果更佳
2.1 Filter Lines
插件能方便地过滤特定字符串到一个新的 Tab 中，支持全字匹配、正则匹配。相对于全文搜索而已，把匹配结果输出到一个全新的文件中，能更有助于查看关键信息。
2.2 Log Hihhlight
是专门处理 Log 高亮的插件，原理与自定义语法高亮不同。这个插件也可以自定义语法高亮，同时可定制性与功能也更强大，比如支持跳转、为警告或错误添加书签，等等，有兴趣可以使用一下。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致神奇漂亮的开发工具sublime text的全部使用配置_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
神奇漂亮的开发工具sublime text的全部使用配置
上传于||文档简介
&&s​u​b​l​i​m​e​ ​t​e​x​t​2
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢Sublime Text 3前端开发常用优秀插件介绍
前言：关于Sublime Text 3Sublime Text 3是一款强大而精巧的文本编辑器 [点击下载]它的界面友好、功能非凡、性能极佳可令代码高亮、语法提示、自动完成更重要的是，它支持众多插件扩展&&锦上添花、强之又强本文着重介绍Sublime Text 3可助力前端开发的优秀插件步骤详细，亲测可用若有拙误或纰漏，欢迎您留言指正Package Control插件管理提到Sublime Text插件安装，就不得不提Package Control [官方文档]简而言之，它是用来管理插件的插件所以，首次使用前也是需要安装的使用Ctrl+`（Esc键下方）快捷键或者通过View-&Show Console菜单打开命令行将以下代码复制后粘贴到如上图中&&代码粘贴处&&，然后按Enter(回车)，稍等片刻import urllib.request, pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())如果安装成功，就可以在Preferences菜单下看到Package Settings和Package Control两个菜单。若不能通过以上方式成功安装，可尝试以下方式手动安装点击Preferences-&Browse Packages...菜单进入打开的目录的上层目录（即Sublime Text 3目录）再打开Installed Packages目录点击下载Package Control.sublime-package并复制到如下图中的Installed Packages目录最后重启Sublime Text 3Package Control使用方法/安装Emmet插件下面将以安装Emmet插件为例，同时介绍如何使用Package Control插件在Sublime Text 3中按下快捷键Ctrl+Shift+P在出现的文本框中输入Install Package(或直接输入&ip&)选中Install Package并回车（可能需要等待几秒钟，在此过程中不能进行任何鼠标/键盘操作）输入或选择你需要的插件再按Enter（回车）就可以安装插件了（下图以安装Emmet插件为例）在安装过程中，左下角会显示正在安装的提示，静候片刻若安装成功，相应的，左下角会出现安装成功的提示下文中所有介绍的插件均可使用此方式安装若由于网络等原因，您发现无法按照以上介绍的方式成功安装，也不用担心本文介绍的所有插件，都能通过在GitHub上下载Zip包的方式手动安装，具体方法如下点击本文中介绍每款插件的&大标题&，即可进入该插件GitHub页面如上图，点击页面右下角的&Download ZIP&按钮，即可下载相应插件的Zip包然后，在Sublime Text 3中点击菜单Preferences-&Browse Packages...可以看到，出现了一个文件夹窗口，将下载的Zip包&解压&后复制到该文件夹内即可Emmet插件Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件它让编写HTML代码变得极其简单高效基本用法：输入标签简写形式，然后按Tab键关于Emmet的更多介绍，请查看官方文档这份速查表，可以帮你快速记忆简写形式JsFormat插件这是一款将JS格式化的插件同样使用Package Control安装JsFormat插件后即可在JS文件中通过鼠标右键-&JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化使用效果如下图SideBarEnhancements插件SideBarEnhancements是一款很实用的右键菜单增强插件在安装该插件前，在Sublime Text左侧FOLDERS栏中点击右键只有寥寥几个简单的功能通过Package Control安装SideBarEnhancements插件后可以看到，文件夹栏右键菜单马上增强不少更强大的是，该插件还能让我们自定义快捷键呼出某个浏览器以预览页面这样就不用到项目目录下寻找和拖动到特定浏览器中预览了安装此插件后点击菜单栏的preferences-&package setting-&side bar-&Key Building-User键入以下代码[
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"paths": [],
"application": "F://Firefox Developer Edition//firefox.exe",
"extensions":".*" //匹配任何文件类型
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C://Program Files (x86)//Google//Chrome//Application//chrome.exe",
"extensions":".*"
{ "keys": ["f3"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C://Program Files//Internet Explorer//iexplore.exe",
"extensions":".*"
}]这里设置其按Ctrl+Shift+C复制文件路径分别按F1、F2和F3即可分别在firefox，chrome，IE浏览器预览当前页面效果当然，你也可以自己定义喜欢的快捷键但要注意代码中的浏览器路径要以自己电脑里的文件路径为准TrailingSpaces插件有时候，在代码结尾打多了几个空格或Tab并没有任何显示效果TrailingSpaces这款插件能高亮显示多余的空格和TabTag插件这是HTML/XML标签缩进、补全、排版和校验工具安装该插件后，可以如上图方式使用Tag插件对HTML/XML进行自动排版等操作目前楼主未能发现该操作快捷方式，若您有所发现，望留言点拨Terminal插件在编程过程中，我们经常需要使用到命令行窗口Terminal插件可以允许在Sublime Text 3中打开cmd命令窗口安装好该插件后即可使用快捷键Ctrl+Shift+T呼出命令行窗口SublimeCodeIntel插件这是一款代码提示插件，支持多种编程语言该插件安装时间可能相对较长更特别的是，安装该插件后需要根据您使用的编程语言进行配置本部分将以配置JavaScript语言的代码提示功能为例安装该插件后，点击Preferences-&Browse Packages...菜单进入SublimeCodeIntel文件夹再进入.codeintel文件夹将其中文件名为config的文件拖动到Sublime Text 3中你会看到大概如下图的代码将以下代码复制后粘贴到Config文件中//注意上下文需要添加的逗号"JavaScript":{ "javascriptExtraPaths":[]}复制粘贴后的效果如下图保存后关闭config文件这样，在编写JavaScript时即可获得代码提示，如下图示CssComb插件CssComb是为CSS属性进行排序和格式化插件 [官网]使用Package Control安装CssComb插件后，你可能发现它并不能运行它依赖于Node.js [官网]若您的计算机已安装过NodeJS环境，可跳过此步骤若您的计算机中尚未安装过Node.js环境应该到Node.js官网中 [下载] 并安装相应版本的Node.js，如下图示安装NodeJS后，即可使用CssComb插件使用方法：菜单Tools-&Run CSScomb或在CSS文件中按快捷键Ctrl+Shift+C使用前，CSS可能杂乱无章使用后，CSS属性按照作用类别出现还可以选中一部分CSS代码进行排序使用前，选中需要排序的CSS代码使用后，选中部分代码已排好序美中不足的是，CssComb似乎不支持IE harkAutoprefixer插件这是一款CSS3私有前缀自动补全插件该插件使用CanIUse资料库，能精准判断哪些属性需要什么前缀与CssComb插件一样，该插件也需要系统已安装Node.js环境使用方法：在输入CSS3属性后（冒号前）按Tab键，如下图示未完待续截至目前，楼主仍然是本科小鲜肉一枚技术之路刚刚起步，对工具的运用尚还疏浅有一些插件由于亲测未能支持Sublime Text 3而不包括在本文中有一些插件可能楼主尚未发现，欢迎各位路过的大牛留言赐教未来若发现新的优秀插件，楼主也会整理并更新本文
最新教程周点击榜
微信扫一扫私活儿神器
MASHUPCLOUD 聚云网
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
Nodejs在线课程
智能社就是全栈开发培训，国内正规的JavaScript、HTML5、NodeJS培训机构，专注于让学员获得快乐的学习体验并找到高薪工作的培训
学前端，这套就够了！
传智播客博学谷前端与移动开发学院 - WEB前端培训,HTML5培训,移动开发培训
您的位置： » 分类:
» 文章: Sublime Text 3最好的功能、插件和设置
您可能感兴趣的文章
近期最热文章
- 2,842 - 2,150 - 2,130 - 2,024