简介

Sublime Text 是一个代码编辑器（Sublime Text 3是收费软件，但可以无限期试用）

Sublime 支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能，还拥有代码片段（Snippet ）的功能，可以将常用的代码片段保存起来，在需要时随时调用

安装

window下百度搜索 sublime 进行下载安装

插件

安装 Package Control

按 Ctrl+` 调出console

粘贴下面安装代码到底部命令行并回车：

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

重启Sublime Text 3。

如果在Perferences->package settings中看到package control这一项，则安装成功。

可以到 官网链接 复制代码或下载 Package Control.sublime-package 放到 sublime 安装目录里的 data 里 installed package 文件夹（这个文件夹位置可能会不一样）

用Package Control安装其他插件

第一种方法：按下Ctrl+Shift+P调出命令面板，输入install 点击 Install Package 选项，然后在列表中搜索并选中要安装的插件

第二种方法：点击工具栏Preferences下的Package Control然后搜索并选中要安装的插件

常用插件

Package Control（插件包控制插件）

安装SublimeText后必须安装的东西，插件包控制插件。 可以控制插件的查看已安装差价、安装、升级、删除等操作

ChineseLocalization （汉化插件）

工具栏 Help 下的 Language 选项选择语言

Emmet （自动补齐插件）

输入简写，按Tab键可触发效果

Babel（React JSX）

具有React JSX扩展名的ES6 JavaScript的语法定义（语法高亮）

Agila（主题）

一款受欢迎的sublime Theme

快捷键

配置代码片段

首先点击Tools -> New Snippet

显示代码如下：

<snippet>
     <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
</snippet>

模板说明

<snippet>
  <content><![CDATA[
    你需要插入的代码片段${1:name}
    ]]></content>
  <!-- 可选：快捷键，利用Tab自动补全代码的功能 -->
  <tabTrigger>xyzzy</tabTrigger>
  <!-- 可选：使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。 -->
  <scope>source.python</scope>
  <!-- 可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 -->
  <description>My Fancy Snippet</description>
</snippet>

小贴士：

1. 用TAB键调用代码片段
2. 你发的这个代码片段要打上xyzzy按下TAB键就可以了
3. 一些文件中（如HTML格式文件）是不显示“代码片段的说明”的。直接按TAB键就可以
4. ${1:name}表示代码插入后，光标所停留的位置，可同时插入多个。其中:name为自定义参数（可选）
5. ${2}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）

举个例子：

<snippet>
  <content>
  <![CDATA[
  import React from 'react'

  class ${1} extends React.Component{
  render(){
    return (
      <div className='${2}'>
        ${1}
      </div>    
    )
  }
  }
  export default ${1}
  ]]>
  </content>
  <tabTrigger>recl</tabTrigger>
  <description>React</description>
  <scope>source.js</scope>
</snippet>

创建完毕以后，保存在\Packages\User目录下，文件命名为react-code，后缀名.sublime-snippet

内置快捷键

参考

• 官网：点击进入

• Package Control：点击进入

• CSDN：点击进入