Sublime Text使用配置介绍

这篇文章不少内容都是来源自网络,发布这里看成本身留个底,之后不用处处去找

对于文本编辑器，我用过notepad二、notepad++、Editplus、UltraEdit、Vim、TextPad，都没有以为哪一款编辑器用得很是上手，直到遇到Sublime Text,它不单能简单的编辑文本文件,在下载了相应插件后html,css,javascript,nodejs,python,php甚至于java和C#都能进行快速编写。今天就来说一下如何将Sublime Text打形成一款好用的IDE，虽然它只是一款编辑器，可是它有丰富的扩展插件，足以让咱们把它变成好用的IDE。

一.下载和安装

下载以前首先要说明的是先sublime text有两个版本 sublime text 2和sublime text 3,这两个版本在文件位置,安装插件等不少地方都不兼容,因此事先选择好你要下载的版本,反正我是两个都装了…

Sublime Text是一款开源的软件，不须要注册便可使用（虽然没有注册会有弹窗，可是基本不影响使用）.下载地址：sublime text，请自行根据系统版本进行下载。下载好以后直接安装便可。

二.一些必备的插件

再次强调…2和3一些插件的版本并不兼容,或者说一些插件2支持,3并不支持,或者3支持,2并不支持

下面来介绍一些Sublime Text中必备的经常使用插件。

Sublime Text 安装的插件和全部预置的插件所有在Packages文件下，能够直接经过”preferences“—>”Browse Pakcages“来访问。

Sublime Text 2安装插件有两种方法：

简单的安装方法：

从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将如下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装。如下提供 ST3 和 ST2 的安装代码：

Sublime Text 3：

import urllib.request,os; 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())

Sublime Text 2：

import 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')

手动安装：

可能因为各类缘由，没法使用代码安装，那能够经过如下步骤手动安装Package Control：

1.点击Preferences > Browse Packages菜单

2.进入打开的目录的上层目录，而后再进入Installed Packages/目录

3.下载 Package Control.sublime-package 并复制到Installed Packages/目录

4.重启Sublime Text。

Package Control 主文件下载地址：https://github.com/wbond/sublime_package_control 

用Package Control安装插件的方法：

1.按下Ctrl+Shift+P调出命令面板 2.输入install 调出 Install Package 选项并回车，而后在列表中搜索选择要安装的插件。

或者也能够菜单栏选择 Preferences->Package Control弹出插件管理面板,选择Install Package

下面就是我经常使用到的一些插件

ConvertToUTF8 (GBK Encoding Support)

最好先安装GBK Encoding Support 再安装 ConvertToUTF8

解决Sublime不支持GBK、GB2312编码的问题，支持Sublime打开GB2312编码的文件并提供其输入并编辑中文，在打开GB2312文件后会将其转换为UTF8编码（这不会修改原始文件编码），对于输入和编辑的中文字符在使用Sublime保存后好像会将其转换为原始编码后再进行保存。

Emmet

这个不用多说,前端开发人员必备插件,不少IDE工具都集成了这项功能.试试在html中输入下面一段代码以后按tab键

div#container>div.logo+ul.nav>li.item$*5>a{item $}

就能直接生成下面的html代码

<div id="container">
        <div class="logo"></div>
        <ul class="nav">
            <li class="item1"><a href="">item 1</a></li>
            <li class="item2"><a href="">item 2</a></li>
            <li class="item3"><a href="">item 3</a></li>
            <li class="item4"><a href="">item 4</a></li>
            <li class="item5"><a href="">item 5</a></li>
        </ul>
    </div>

若是不是太清楚的,能够直接查看(前端开发必备！Emmet使用手册)这一篇博客

DocBlockr

若是你遵循的编码的风格很严格，这款插件可以使你的任务更容易。DocBlokr 帮助你创造你的代码注释，经过解析功能，参数，变量，而且自动添加基本项目。

Markdown Preview & Markdown Editing

一看这两个插件的名字就知道,能够支持markdown文件的预览了编写,稍微注意的是,没有直接的快捷键支持Markdown预览,须要使用ctrl + alt + p 弹出插件管理界面,而后在界面上输入 markdown就能直接找到和markdown相关的操做了

JS Format

一个JS代码格式化插件。

Bracket Highlighter

高亮代码匹配，能够匹配括号，引号，标签等各类

SublimeLinter

注意：此插件须要手动安装并切换到 sublime-text-3 分支。

SublimeLinter 是一个代码校验插件，它能够帮你找出错误或编写不规范的代码，支持 C/C++、CoffeeScript、CSS、Git Commit Messages、Haml、HTML、Java、JavaScript、Lua、Objective-J、Perl、PHP、Puppet、Python、Ruby 和 XML 语言。

SublimeCodeIntel

SublimeCodeIntel 是一个代码提示、补全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python三、XML、Sass、XSLT、Django、HTML五、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等语言，是 Sublime Text 自带代码提示功能的很好扩展。它还有一个功能就是跳转到变量、函数定义的地方，十分方便

Nodejs

Nodejs语言支持,前提固然是你已经安装了nodejs

SublimeText2-安装Nodejs

这个安装稍微麻烦一点,首先下载nidejs插件包（https://github.com/tanepiper/SublimeText-Nodejs）

1.直接下载压缩包后解压到sublime text的package目录中。查看package目录在哪能够经过菜单栏中的Preferences–>浏览程序包Browse Packages直接打开package目录。 2.将解压缩文件夹名字稍微改简短一点,解压缩以后文件名应该是SublimeText-Nodejs-master能够将其改成Nodejs 3.修改编译选项，在package目录下的Nodejs目录中，打开Nodejs.sublime-build,将其改成下面这样:

{ "cmd": ["node", "$file"], "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)", "selector": "source.js", "shell":true, "encoding": "cp936", "windows": { "cmd": ["taskkill","/F", "/IM", "node.exe","&","node", "$file"] }, "linux": { "cmd": ["killall node; node", "$file"] } }

其实就修改了两处地方。 a.一个是编码，为了不乱码code，须要改为cp936； b.另一个是cmd命令，自己若是只是想简单的运行nodejs程序的话，windows下面的cmd能够直接 “cmd”: [“node”, “$file”]，可是这样很是不利于开发环境，由于这样的话每次build都会从新启动一个node.exe进程，且会占用一个端口，这确定是咱们不但愿的。上文中的cmd本来是想在启动node.exe以前讲node.exe进程都杀掉，而后再启动node.exe，可是这个命令写的不对，直接使用的话是编译不成功的。对cmd命令须要作简单的处理

3.重启sublime text以后，配置就算完成了。

直接编写一个js文件,使用快捷键 ctrl + b就能直接运行了

sublime text 3使用nodejs

sublime text 3已经预装了nodejs插件

打开Sublime Text编辑器，点击“Tools —> Build System —> New Build System”， { “cmd” : [“node”,”$file”] }

将以上代码另存为JavaScript.sublime，而后点击”Tools —> Build System“，咱们就能够看到Build System中多了一项”JavaScript“。选中”JavaScript”为Build System。 

配置好之后，咱们就能够在Sublime Text中，按快捷键Ctrl+B直接运行JavaScript代码。

其余的插件都很简单了…通常直接下载下来就能使用,还有不少,好比HTML Beautiful,Alignment,SideBarEnhancements,jQuery插件,angularJS插件等等…这些你们在百度上搜索常见的sublime text 插件,而后在Package Control中自行搜索相关的插件就好了

配置

sublime还能自定义界面外观,并且能够直接下载一些界面主题,固然还能调整字体大小等等.

点击preferences－setting user，我的设置以下：

{ //字体大小 "font_size": 14.0, //字体类型(此字体需下载) "font_face": "YaHei Consolas Hybrid", //界面样式 "theme": "Soda Dark 3.sublime-theme", //界面颜色样式 "color_scheme": "Packages/User/glacier (SL).tmTheme", // 设置每一行到顶部，以像素为单位的间距，效果至关于行距 "line_padding_top": 2, // 设置每一行到底部，以像素为单位的间距，效果至关于行距 "line_padding_bottom": 2, // html和xml下突出显示光标所在标签的两端，影响HTML、XML、CSS等 "match_tags": true, // 是否显示代码折叠按钮 "fold_buttons": true, // 代码提示 "auto_complete": true, // 默认编码格式 "default_encoding": "UTF-8", // 左边边栏文件夹动画 "tree_animation_enabled": true, //删除你想要忽略的插件 "ignored_packages": [ "Vintage", "YUI Compressor" ] }

Theme – Soda

Soda Theme 是最受欢迎的 Sublime Text 主题。

安装后你还须要在你的配置文件（菜单 Preferences -> Settings - User）中加入”theme”: “Soda Light.sublime-theme” 或 “theme”: “Soda Dark.sublime-theme”。要达到图中的效果，你还须要下载与之搭配的 color scheme。