网站首页 » 前端开发 » 前端工具 » Sublime Text 让天下没有难敲的代码
上一篇:
下一篇:

Sublime Text 让天下没有难敲的代码

前言

Sublime Text 非常地轻量,以至于可以用秒来的形容,轻量归轻量,但强大也是它的墓志铭。所以这是一篇 Sublime Text 的专卖。不要怀疑,就是它。

准备

官方下载地址:http://www.sublimetext.com/

官方文档:http://www.sublimetext.com/docs/3/(这里是 Sublime Text 3 的文档)

官方放出的安装方法有两种,一种是 .exe 安装,一种是直接解压就可以用。至于那一种好,其实看你自己怎么用。如果是想做一个移动版(portable version)的,放在 U 盘里走到哪用到哪的,那么你可以使用移动版的。

插件安装

安装配置

在安装插件之前,你需要运行如下命令代码:

Sublime Text 3 的

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 2 的

import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

为了让你可以得到最新的命令代码这里贴出网站网址:https://packagecontrol.io/installation

打开编辑器依次找到:【View】-【Show Console】,此时你会看到编辑器下方出现一个输入框。把上面的代码放进去(注意:版本不同对应放不同的代码就是上面的那两行的基本一行,如果是 Sublime Text 3 就放 Sublime Text 3 的,如果是 Sublime Text 2 就放 Sublime Text 2 的)回车,稍等片刻就可以了。

等命令执行完后,你就可以在【preferences】中看到多了一个【Pack Control】选项,现在你就可以通过它来安装插件了。

【preferences】-【Pack Control】,接着输入 install Package 回车。就会弹出一个插件的搜索框,你可以在这里查找你需要安装的插件。

Sublime Text

搜索插件:

Sublime Text

Emmet

这个插件功能非常的强大,贴心得难以自信。官网地址:https://docs.emmet.io/

直接在搜索框中输入 Emmet 就可以了。选中 Emmet 回车进行安装。至于它的魅力,你可以到官网观看它的视频演示效果。

快速生成 HTML 结构

<!-- 输入如下命令: -->
ul>li.item-$*4>a{item $}

<!-- 按下 Tab 键生成如下代码: -->
<ul>
    <li class="item-1"><a href="">item 1</a></li>
    <li class="item-2"><a href="">item 2</a></li>
    <li class="item-3"><a href="">item 3</a></li>
    <li class="item-4"><a href="">item 4</a></li>
</ul>

自动生成 css 样式前缀

/* 在属性前添加“-” */ 
.cssDemo{
    -flex
}
/* 按下 Tab 键后就会为css 属性自动添加前缀 */
.cssDemo{
    -webkit-flex: ;
    -moz-flex: ;
    -ms-flex: ;
    -o-flex: ;
    flex: ;
}

再比如 Emmet 的一个快捷键:Ctrl+Alt + 上下左右方向键,可以定位到标签中可修改的地方,并且你可以选择多行进行同时修改,其它精彩的功能就得靠你自己去发现了,老司机只能带你到这里了。

JSFormat

JavaScript 代码格式化插件,让你的代码不再一坨坨,美美地,有没有。默认快捷键【Ctrl+Alt+F】。

更多配置可以看这里:https://packagecontrol.io/packages/JsFormat

CTags

Sublime Text CTags 插件用来定位函数,这个方法跟搜索功能比起来有着异曲同工之妙,不过你不需要输入任何字符,直接键盘+鼠标键就可以找到你要找的函数。具体配置及用法可以看这里:http://yunkus.com/sublime-text-ctags-plugin/

【右键函数名】-【go to Definition】或者【右键函数名】-【Navigate to Definition】,编辑器就会自动帮你找到并定位到函数定义。

更多配置及用法可以看这里:https://packagecontrol.io/packages/CTags

DocBlockr

给你的JavaScript 函数添加相关注释说明文字。使用方法也非常地简单。在你要添加函数说明的函数前 输入

/**

然后按下 Tab 键就可以了。

更多配置及用法可以看这里:https://packagecontrol.io/packages/DocBlockr

CSSComb

这个插件也算实在,它可以帮你把所以的样式安照一定的顺序来排列。这么于有强迫证的人来说,就是福音呀。不过安装这个插件之前你需要安装 Node.js,不然这个插件就没法用。具体的安装过程你可以参考这里: CSScomb – Sublime text中一个超赞的CSS属性排序插件。这篇文章不仅介绍了如何安装 CSSComb 插件,而且分享了怎么用。

FileDiffs

文件对比插件,这个插件也挺实用的。特别在平时的协同开发中,很容易发生代码冲突或者需要做代码合并之类的,有了它,你就可以更快的解决代码冲突,以及代码合并等等。使用方法非常的简单,安装完之后可以右键鼠标来使用它给我们提供的几个文件对比场景。类似的插件还有 Compare Side-By-Side 不过我觉得 FileDiffs 更实用些。

更多配置及用法可以看这里:https://packagecontrol.io/packages/FileDiffs

Snippets

这个插件专治重复使用的代码,你可以通过这个插件把常常需要重复敲的代码块都保存起来,到用的时候就通过快捷方式把它调用来,直接用或者稍作修改就可以了。这个插件安装完后在【Preferences】-【Package Settings】中是看不到的。因为它藏在了其它菜单中。用法:通过【Tools】- 【Developer】-  【New Snippet】 来创建模板,并且设置快捷方式。用的时候你只需要输入暗号(触发字符串+Tab 键)。模板创建完之后要把文件保存到D:\Program Files (x86)\Sublime Text Build 3126 x64\Data\Packages\User这个目录下。不然读不到模板文件。如果你觉得直接放到User 目录下会很乱,那么你可以在User 目录下再创建一个目录比如:snippetsTemplate 然后把文件保存在这个目录下。注意:文件后缀名为.sublime-snippet,命名可以随意。具体的安装配置可以看这里:Sublime Text Snippets 模板库插件

AutoFileName

自动完成路径,也就是只要你在需要用到路径的地方,当路径输入区(比如引入文件的 src=””、img 标签的 src=””)获取焦点时就会有相应的提示。可以自己去感受感受,还是挺不错的小功能。这个小插件安装完就可以真的用了,也不要其它什么配置。但你也可以稍作配置以满足自己的实践需要:https://github.com/BoundInCode/AutoFileName,配置下更贴心、更好用。

Clipboard Manager

剪切版历史管理。这个可以说非常地实用,你可以从这个历史管理中找出你前面复制过剪切过的内容。这个痛点相信你们都懂。这个是 Sublime text 3 中的插件,在 Sublime text 2 中有着异曲同工之妙的插件叫做 Jimbly’s clipboard History 。不过他们的作用是惊人地相似。这里有一个使用教程:Sublime Text Clipboard Manager 剪切板历史管理

Clipboard Manager 的官方说明文档看这里https://github.com/colinta/SublimeClipboardManager

Quote​HTML

把HTML代码转换成 JS 字符串代码,特别是在HTML代码多的时候,这个就可以帮上忙了,让你有飞一般的感觉。

用法:Edit > Quote HTML 或者 Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) ,然后搜索并选择 Quote HTML。

更多配置及用法可以看这里:https://packagecontrol.io/packages/QuoteHTML

FileHeader

给文件添加头部信息,这个也经常会用到。有了它现在你就不用手动去一行行添加了,只需要快捷键一按就完事了。
更多配置及用法可以看这里:https://packagecontrol.io/packages/FileHeader

用法:通过右键项目目录-【File Header】-【New File】来新增含有头信息的文件或者 【File Header】-【Add 】来给已有文件添加头信息。快捷键分别为:ctrl+alt+nctrl+alt+a

Trailing Spaces

作用:去掉代码中的空格。

简介:其实空格去不去掉都不是问题,问题是看到了心里会不舒服,有了 Trailing Spaces 这下就好了,只要代码中出现空行中存在空格字符的统统都给你标出来,让空格在你眼前无处可藏。

用法:在【Key Bindings】客户绑定快捷键:

{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }

快捷键可以按自己的喜好来设置。设置完后就可以通过这个快捷键来去掉多空格符号了。

更多配置及用法可以看这里:https://packagecontrol.io/packages/TrailingSpaces

插件卸载

插件卸载跟插件的安装步骤差不多,Ctrl+Shift+P 调出命令面板输入 remove,选择 Remove Package 选项并回车,选择要删除的插件,更新插件也是同样的道理,upgrade packages,通过这几个简单命令你就可以很方便地管理插件了。

小贴士

1、如果不小心把 Menu 隐藏掉了,你可以通过快捷键ctrl+shift+p唤出面板,输入view,选择【 View:Toggle Menu】就可以了。

2、快捷键Alt+Shift+数字键(打开多个窗口,数量根据你按下的数字为准比如: Alt + Shift + 2 ,就是在编辑器里打开两个窗口)。

3、快捷键 Ctrl+p 唤出文件搜索功能,你可以通过文件名来搜索文件。

4、右键项目目录,选中【find in folder】,就可以在整个项目中查看某个字符串,可以在 Where 中输入过虑条件(注意条件是使用逗号隔开)。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/sublime-text-make-coding-easier/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END