{"action":"closed","issue":{"url":"https://api.github.com/repos/chenhao-ch/blog/issues/1","labels_url":"https://api.github.com/repos/chenhao-ch/blog/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/chenhao-ch/blog/issues/1/comments","events_url":"https://api.github.com/repos/chenhao-ch/blog/issues/1/events","html_url":"https://github.com/chenhao-ch/blog/issues/1","id":98696877,"number":1,"title":"sublime text配置与使用","user":{"login":"chenhao-ch","id":1531402,"avatar_url":"https://avatars.githubusercontent.com/u/1531402?v=3","gravatar_id":"","url":"https://api.github.com/users/chenhao-ch","html_url":"https://github.com/chenhao-ch","followers_url":"https://api.github.com/users/chenhao-ch/followers","following_url":"https://api.github.com/users/chenhao-ch/following{/other_user}","gists_url":"https://api.github.com/users/chenhao-ch/gists{/gist_id}","starred_url":"https://api.github.com/users/chenhao-ch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chenhao-ch/subscriptions","organizations_url":"https://api.github.com/users/chenhao-ch/orgs","repos_url":"https://api.github.com/users/chenhao-ch/repos","events_url":"https://api.github.com/users/chenhao-ch/events{/privacy}","received_events_url":"https://api.github.com/users/chenhao-ch/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/chenhao-ch/blog/labels/tools","name":"tools","color":"0052cc"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-03T08:32:59Z","updated_at":"2015-08-04T11:08:30Z","closed_at":"2015-08-04T11:08:30Z","body":"## 关于sublime text\r\nsublime text是开发代码编辑的神器 ，编辑器界面优美，操作速度快速。而且是一个跨平台的编辑器，支持Windows、Linux、Mac OS X等操作系统。购买Licenses需要$70， 不过作者比较厚道， 允许用户免费使用， 只是会不定时的提示付费。目前的正式版本是2.0.2，下面的例子也是基于这个版本的。\r\n## sublime实用功能\r\nsublime text包含语法高亮、代码提示补全、代码折叠、自定义皮肤/配色方案、多标签页等编辑器基本的功能， 还支持像布局设置、多行编辑、代码预览等特殊功能。布局设置， 代码预览，多行编辑都是很赞的功能。\r\n下图是sublime Text的基本接结构。见下图：\r\n![sublime text 基本功能](http://img04.taobaocdn.com:80/tfscom/TB1CPpFGVXXXXaXXVXXXXXXXXXX)\r\n\r\n有时候需要对比其他文件修改内容，尤其是前端需要html， js， css相互对比， 这个时候可以将布局设置成多个文件。见下图：\r\n![sublime text 设置布局](http://img03.taobaocdn.com:80/tfscom/TB1oHRsGFXXXXcvXVXXXXXXXXXX)\r\n\r\nsublime text中可以使用ctrl + p 进行快速定位文件， 方法， 行。 按下快捷键ctrl+p并输入需要定位的文件， 方法， 或者具体的行， 就能定位到匹配到的内容， 而且支持模糊匹配， 输入后就能列出当前匹配到的结果列表。 其中@fn 后面的表示方法，如果html文件则定位的是id， :num后面的表示第几行。见下图：\r\n![sublime text 快速定位](http://img02.taobaocdn.com:80/tfscom/TB1kBpkGFXXXXaPaXXXXXXXXXXX)\r\n\r\nsublime text同 ctrl+/ 或 ctrl+shift+/可以对代码进行注释， 如果是选中的是注释则会取消注释。ctrl+/是当行注释， ctrl+shift+/是多行注释。\r\n\r\nsublime text可以进行自定义皮肤。点击菜单中 Preferences 下面的 \"Browse Packages\", 找到\"Color Scheme - Default\"。 该文件夹下就是所有默认安装的皮肤， 其中Monokai是默认使用的皮肤。 如果想自定义皮肤， 可以去 http://tmtheme-editor.herokuapp.com/ 这里自定义。  我对Monokai做了一点简单的修改(将选中文本的背景和高亮行的背景变的更明显)， 修改后的样式对比如图所示， 需要的可以下载附件， 并将附件中的Monokai2.tmTheme文件放到\"Color Scheme - Default\"目录下， 并设置皮肤为Monokai2。\r\n![新皮肤样式](http://img01.taobaocdn.com:80/tfscom/TB1pKYqGFXXXXb8XVXXXXXXXXXX)\r\n![设置皮肤](http://img02.taobaocdn.com:80/tfscom/TB1ZAubGFXXXXXGapXXXXXXXXXX)\r\n\r\nsublime text中还可以指定项目，将某个文件夹作为一个项目目录。如图， 左侧的文件夹就是项目项目列表。还可以保存项目或者打开以前保存的项目。\r\n![项目](http://img04.taobaocdn.com:80/tfscom/TB1lL80GVXXXXa3XpXXXXXXXXXX)\r\n\r\nSublime Text 2 除了自身拥有无数实用功能和特性之外，它还能安装使用各种扩展/皮肤/配色方案等来增强自己。Package Control 就是一个ST2的扩展管理器。使用package Control首先需要安装改扩展。\r\n按下ctrl+~键， 会调出sublime text的控制台， 输入一下代码后回车， 就会自动安装package control。\r\n```\r\nimport urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'\r\n```\r\n安装成功后， 重启。 通过ctrl+shift+p来调出命令面板，  输入package control， 就能显示package control的所有命令。如图所示：\r\n![package control命令](http://img02.taobaocdn.com:80/tfscom/TB1_joQGpXXXXbxaXXXXXXXXXXX)\r\n\r\n选择Install Package， 会列出所有可安装的插件。输入插件名， 选择安装。\r\n\r\n## sublime text常用插件\r\nsublime text中可以安装丰富的插件， 针对前端开发， 我列出几个会用到的插件。\r\n1. JsFormat\r\nJsFormat是一个js文件的格式化工具。 安装完成后， 在命令面板中输入format javascript进行格式化。如果当前打开的文件不是js文件， 或者识别的语法不是js， 则无法调出format javascript命令。 如果要对一个非js文件进行js格式化， 可以再命令面板里面输入set js， 并选中set syntax: javascript， 然后进行format。\r\n如图所示：\r\n![format js](http://img02.taobaocdn.com:80/tfscom/TB1v0tnGFXXXXaPaXXXXXXXXXXX)\r\n![set syntax: javascript](http://img03.taobaocdn.com:80/tfscom/TB1Uf0qGFXXXXaIaXXXXXXXXXXX)\r\n\r\n2. CSS Format\r\ncss文件的格式化类似于js的格式化。 不过存在三种样式：\r\n     - 一个class样式一行 （**ctrl + alt + [**）\r\n     - 一个样式项一行 （**ctrl + alt + ]**）\r\n     - 一行显示全部样式 （**ctrl + alt + \\**）\r\n\r\n4. emmet\r\nemmet插件其实是zenCoding， 使用这个插件， 能够快速开发html代码。输入代码\r\n```\r\ndiv#head>span.menu*5\r\n```\r\n然后按下Tab键， 就会生成如下代码。\r\n```\r\n<div id=\"head\">\r\n  <span class=\"menu\"></span>\r\n  <span class=\"menu\"></span>\r\n  <span class=\"menu\"></span>\r\n  <span class=\"menu\"></span>\r\n  <span class=\"menu\"></span>\r\n</div>\r\n```\r\n5. ColorHighlighter\r\n选中颜色值， 高亮显示颜色。如图：\r\n![color high lighter](http://img03.taobaocdn.com:80/tfscom/TB1uUaIGFXXXXadXVXXXXXXXXXX)\r\n\r\n6. imesupport\r\n为了解决sublime text的一个bug而存在， 安装后， 在sublime中输入中文， 输入法的选择栏能够准确的定位到光标位置。\r\n\r\n7. converToUTF8\r\nsublime text2 默认是只支持utf8的， 改插件支持将gbk文件自动转化为utf8显示。\r\n\r\n\r\n\r\n\r\n\r\n\r\n"}}