Sublime Text使用配置介绍

这篇文章很多内容都是来源自网络,发布这里当作自己留个底,以后不用到处去找

对于文本编辑器，我用过notepad2、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、Python3、XML、Sass、XSLT、Django、HTML5、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。