title: Sublime 编辑器

简介

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：点击进入