作为一名开发者来说,SublimeText这框编辑器即使不用也一定听说过,尤其是作为前端的我们更是必用神器。毕竟真的太轻了,运行速度贼快。很多人觉得不好那是因为没有发现它的各种插件,感觉功能不全,所以会抛弃,今天就跟大家说说如何安装我们前端常用的插件以及对于我们这种英文不好的孩纸来说,导航各种标题都是英文的,简直不能忍,所以教大家如何变成中文,方便大家开发使用。废话不多说,直接开始让大家动手开始使用sublime。

使用Package Control组件安装

  1. 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)
  2. 粘贴以下代码到底部命令行并回车:
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 3。

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

整体的插件包安装完成后,接下来我们就要安装我们前端常用的插件了:

用Package Control安装插件的方法:(以下的所有插件统一是以下两个步骤)

  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

Emmet

Emmet(译者注:前身就是以前大名鼎鼎的Zen Coding,这个如果你没听说和使用过,就悲哀了)是一个可以让你更快更高效地编写HTML和CSS,节省你大量时间的插件。怎么使用?你只需按约定的缩写形式书写而不用写整个代码,然后按“扩展”键,这些缩写就会自动扩展为对应的代码内容。 比如,你只需要输入 ((h4>a[rel=external])+p>img[width=500 height=320])*12 ,然后它会被扩展转换成12个列表项和紧随其后的图像。然后你就可以在此基础上再填写内容,就这么简单。

sublime text 3前端常用插件安装及转换成汉化包-Monkey前端博客

CSS3

CSS3语法高亮、CSS语法提示,美中不足的是缺少游览器私有属性高亮。

jQuery

jQuery的大部分方法提供了示例代码段,让jQuery的API更加容易使用。

JsFormat

js代码格式化的一种插件,不怕别人写的代码不规范需一步步修改了。快捷键(Ctrl+Alt+F)

sublime text 3前端常用插件安装及转换成汉化包-Monkey前端博客

vue代码高亮

现在越来越多的前端在使用vue了,sublime要是不跟上那还得了,所以也出来了vue代码高亮的方法提供给大家,具体请看vue代码高亮

CSS的px值转rem插件

在我们开发移动端的时候,有些公司的前端使用rem布局的,所以也给大家分享下,需要的朋友直接可以查看CSS的px值转rem插件

SublimeLinter

SublimeLinter是少数几个能在sublime text 3工作的代码检查插件,SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言,但前提是需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。SublimeLinter可以及时提示编写代码中存在的不规范和错误的写法,并培养我们良好的编码习惯和风格。

sublime text 3前端常用插件安装及转换成汉化包-Monkey前端博客

大家下载官方的sublime后发现都是英文,对于英文不好的孩纸来说简直就是折磨,所以跟大家一起分享下如何转换成中文。

sublime text 3转换成汉化包

点击Preferences/Package Control,然后点击Package Control:Install Package,(第一次运行可以要几秒钟,因为要下载Package Control里面存在的包"花名册"),然后在弹出的命令界面,输入Chinese,选择ChineseLocalization(回车或者鼠标单击击)即可安装。

安装成功后等待几秒就可以变成和我一样的下面的效果了哈。

sublime text 3前端常用插件安装及转换成汉化包-Monkey前端博客

暂时就跟大家分享这些,有发现sublime更好的插件的朋友可在下方留言。感谢大家的阅读!