使用 Sublime Text 3 开发 React
时间： 13:21:48
&&&& 阅读：25
&&&& 评论：
&&&& 收藏：0
标签：下载, 安装, 破解就不用说了, 直接进主题:
1, 安装Package Control
默认的Sublime 3中没有Package Control，要进行安装之后才能用这个去安装其他的插件。
简单的安装方法
使用Ctrl+`快捷键或者通过View-&Show Console菜单打开命令行，粘贴如下代码：
import urllib.request,os, h = ‘e5ee549c‘ + ‘8bc59f460fa163dafc88‘; 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)
如果还是没安装成功，可参考如下网站：
或者官网提供的方法：
2, 安装插件
安装sublime的插件也是常见使用sublime的问题，步骤如下：
1.打开Sublime Text3 ，按 CTRL+SHIFT+P 打开 终端窗口
2.在打开的终端窗口，输入&install&,下方就会提示&Package Control:install package&,用鼠标点击
3.这时候等待几秒，就会弹出一个终端，在终端输入你想要安装的插件，进行查找，点击下方列表中插件，就会自动会为你安装了。
React Native开发推荐的一些插件：
ReactJS : 支持React开发，代码提示，高亮显示 ，介绍地址：
Emmet ：前端开发必备。
Terminal : 在sublime中打开终端并定位到当前目录，mac下的快捷键为：command+shift+T
react-native-snippets：react native 的代码片段，具体用法参考：
其他的插件可以参考这里：
依个人口味酌量添加。
推荐一个sublime material 风格主题：Material ，直接去搜这个插件就能安装，介绍地址：
ref: 标签：
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！sublime插件开发教程（附源码） - 推酷
sublime插件开发教程（附源码）
虽然可能大神门在编辑器方面都比较偏向于vim之类的自由度更高的工具，但是从我个人来讲sublime这样的插件安装更方便的工具还是比较得心应手的。之前用sublime写英语作文，但是没有一个比较好用的timer，Package_Control里面的track_timer不能实时显示时间，所以博主就自己动手，写了这个插件，可以实时timer，记录时间。效果如下图，
使用起来很方便，只要把下载好的sublime-timer文件夹放在下图这个路径下即可。
可以用快捷键方便的对timer进行操作：
&control+alt+t&: start timer &control+alt+p&: pause or stop timer
&control+alt+z&: make zero
3.制作过程 &
开发sublime插件用到的是python语言，因为要用到sublime内置的sublime和sublime_plugin库，所以debug和调试都应该在sublime里面。
下面的链接是sublime的库得参数信息：
（2）自带example & &&
如果不习惯看开发文档，可以参考下以下example的开发（下面参考自
1、通过Tools -& New Plugin...来打开一个初始化的插件编辑文件，它将有如下的内容：
import sublime, sublime_plugin
class ExampleCommand(sublime_plugin.TextCommand):
def run(self, edit):
self.view.insert(edit, 0, &Hello, World!&)
2、通过Preferences -& Browse Packages...打开Packages文件夹，在该文件夹下建立个子文件夹，名字为你想开发的插件名字，如：KeymapManager。回到插件开发的初始化编辑器页面，通过 ctrl+s (Windows/Linux) or cmd+s (OS X)保存这个文件，并放到你建立的子文件夹下，文件名如：KeymapManager.py
3、通过 ctrl+` 快捷键打开SublimeText的控制台，执行如下的命令：
view.run_command('example')
如果你在当前文件最前面看到插入了Hello, Word!，那表明插件执行成功了。
4、ExampleCommand名字改为你想要的插件名字，如： KeymapmanagerCommand，然后就可以开发该插件对应的功能了。
5、通过官方的API文档查找你需要的接口，文档见：
（3）sublime-timer
这个就是我开发的sublime-timer，比example会复杂一些。大家可以参照以下代码：
import sublime, sublime_plugin
import threading
import time
class timer(threading.Thread): #The timer class is derived from the class threading.Thread
def __init__(self, num, interval):
threading.Thread.__init__(self)
self.thread_num = num
self.interval = interval
self.thread_stop = False
def run(self): #Overwrite run() method, put what you want the thread do here
while not self.thread_stop:
sublime.set_timeout(write_time,1)
time.sleep(self.interval)
def pause(self):
self.thread_stop = True
def zero(self):
thread1 = timer(1, 1)
class gtimerCommand(sublime_plugin.TextCommand):
def run(self, edit):
global thread1
thread=timer(1,1)
if thread1.isAlive():
thread.start()
thread1=thread
class gtimerpauseCommand(sublime_plugin.TextCommand):
def run(self, edit):
global thread1
thread1.pause()
class gtimerzeroCommand(sublime_plugin.TextCommand):
def run(self, edit):
global thread1
thread1.zero()
def write_time():
sublime.status_message(time_manage(i))
def time_manage(time_number):
time_str='time:'+str(time_number/60)+'min '+str(time_number%60)+'s'
return time_str
三个command class，分别对应着上面提到的三个快捷键，这个对应关系可以在另外的keymap文件中定义，大家可以把整个项目clone下来就看到了。
如果你做好了一个个性插件想让更多的朋友使用的话可以试试以下两种途径。
pull issue（有一个文档，流程比较麻烦）
项目地址：
（fork完别忘了给个star）
好了，看到这里大家应该已经对插件制作有些了解了，动起手来吧！
/********************************
* 本文来自博客 &“李博Garvin“
* 转载请标明出处
******************************************/
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致& & & & 1. 安装 Sublime Text 3& & 虽然现在的 Sublime 3 还处于 beta 阶段, 但已经非常稳定了, 而且速度比 Sublime 2 得到了增强. Sublime 3 可以到官网下载并安装. Sublime 虽然是免费软件, 但如果有足够的经济能力, 可以考……
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
论文写作技巧
上一篇：下一篇：
相关经验教程前端开发sublimeconfig
此文件目录中文件主要是关于sublime的插件配置，快捷键配置，主题和字体配置。
所有插件都可以使用Package Control安装，具体的安装方法可以自行谷歌安装，不在本文的介绍范围之内。也可以是使用git 手动安装。
该插件主要使编写css更加的方便和快捷，可以配置快捷键给标签属性添加浏览器厂商前缀。安装前需要确定电脑安装node。
配置快捷键如下：
//autoprefixer快捷键设置
{ &keys&: [&command+alt+p&], &command&: &autoprefixer& }
具体配置和文档请参看
比如我在编写 CSS 的时候是不用关心哪些属性是需要添加厂商前缀的，当我需要保存测试的时候，只需要按下快捷键，该插件会自动给需要添加厂商前缀的属性添加前缀，如下：
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
当然该插件也可以加入到自己开发项目的自动化工具中去，比如：Gulp ，Grunt
ES6终将是要取代 ES5 的但是在从 ES5 到 ES6 过度的过程中，各个浏览器厂商对 ES6 支持的也不是很好。
主要是将ES6的代码编译为ES5。至于为什么要这么做，不是本文的内容，可以自行谷歌了解。
javascript ,jQuery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。
安装完以后它的配置文件可以配置自己需要补全的库
// --------------------
// sublime-better-completions-Package (sbc package)
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
// Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
&completion_active_list&: {
// build-in completions
&css-properties&: false,
&gruntjs-plugins&: false,
&html&: false,
&lodash&: false,
&javascript&: false,
&jquery&: false,
&jquery-sq&: false, // Single Quote
&php&: false,
&phpci&: false,
&sql&: false,
&twitter-bootstrap&: false,
&twitter-bootstrap-less-variables&: false,
&twitter-bootstrap3&: false,
&twitter-bootstrap3-sass-variables&: false,
&underscorejs&: false,
&react&: false,
// Your own completions?
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
&my-angularjs&: false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
&my-glossary&: false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
&my-html&: false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
&my-javascript&: false
括号高亮匹配插件。
借用一张官网的截图：
该插件可以显示在CSS文件中说使用的颜色的色值。包括HTML中嵌套的css样式也可以显示。
还可以调节显示的样式，比如当我鼠标放到颜色上的时候
具体的可以参考官网的说明。
该插件可以对css3属性进行高亮和自动补全。
具体效果如下：
安装完以后的设置如下：
View → Syntax → Open all with current extension as... → CSS3
这个插件可以非常智能对js文件添加注释,这个非常的方便。
参考一张官网的截图：
传说中快速的编写html代码的“神器”。具体的就不再介绍了。网上的教程一搜一大坨啊。
文件差异对比插件。
之前格式化 js，css 文件使用的都是 JsFormat 和 CSSFormat。每次在不同的文件中都要去使用两个不同的插件。后来找到一个可以支持三种语言格式化的插件。
对Html，css，js文件进行格式化。
//html-css-jsprettify插件快捷键
{&keys&: [&command+alt+l&],&command&: &htmlprettify&},
如果平时模板语言使用 jade 的话还是安装一个吧，这个可以让 Sublime 的显示更加的友好。jade相关插件，代码高亮
javascript ES6 语法高亮的支持。
这个插件主要包括 jQuery 语法高亮，代码段。
这两个插件主要是平时使用 scss 或者是 sass 这些预编译语言有用，支持语法高亮。
这个插件还是很有用的。当我们在跟后端联调的时候，通常都会有一台开发机，暂时存放我们的代码，这个时候如果我们要做一些修改。通常的步骤是：
1.上传 svn 2.登上开发机 svn up 一下。这个过程中很浪费时间
如果我们使用 SFTP 插件就可以保存的时候自动上传到服务器。配置方法：
1.在项目根目录建立 sftp-config.json 文件
2.配置该文件，详细配置如下图
Sublime 侧边栏增强插件。
语法，函数跳转。但是我在使用的过程中觉得这个插件并不怎么好用。
这个插件主要使 Sublime 对 markdown 语法的高亮支持。效果如下图：
去除代码末尾的空格键
语法检查插件列表
安装完以后需要，另外安装需要检测语言的插件。
在安装完SublimeLinter 后安转该插件对 JavaScript 语言进行语法检测。
在安装完SublimeLinter 后安转该插件对 css 语言进行语法检测。
该插件主要能够使sublime 兼容mac的retina屏幕
需要在自己的配置文件内启动
&theme&: &Soda Light 3.sublime-theme&
如果您觉得对您有帮助，请点击下面的 **star**
给我一颗星。谢谢啦！
阅读(...) 评论()