0.前言


本文用于给新手小白用户指明前进方向,不用做商业推广。

其次,鼓励购买正版,拒绝盗版。

好了,口号喊完,接下来就直接开始正文。

1. Sublime Text 介绍


首先在开始前,先来介绍一下 Sublime Text。

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

用过电脑,搞过开发的人都知道,一个好用的 IDE 能省多少事,但是很多时候我们需要的仅仅是一些简单的基础开发,我们就可以去使用我们的 Sublime Text 了。

除此之外,还有几款开发工具也非常推荐。

当然,也不能少了我们今天的主角。

需要注意,如果你需要下载,请下载复合你当前电脑的对应版本。

4.Sublime Text 的汉化


在进行 Sublime Text 的汉化之前,首先需要前往 Github 上去下载一下 Sublime 的汉化包。

点击下载后,我们将其加压缩,得到一个文件 Default.sublime-package

之后我们需要去找到 Sublime Text 的包内容。

并将我们的汉化包直接拖进 Installed Packages 文件夹即可。

这时候我们的 Submlie 汉化就完成了。

5.Sublime Text 的插件安装


关于 Sublime Text 的插件安装基本上分为两种方法,第一种是直接找到 Sublime Text 的插件目录,之后将自己的插件直接拖进去即可。

4.1 第一种插件安装方法

同样可以参考上文中直接打开 Sublime Text 包的方法。

4.2 第二种插件安装方法

而第二种方法则是去通过安装插件的方式来安装,李先生我也比较推荐这种方法。

而安装插件之前,我们首先需要来安装一个插件管理工具 Package Control

首先打开我们 Sublime Text 的控制台。

当然,你也可以用快捷键 ctrl + `。

之后我们需要将对应的版本输入进我们的控制台。

打开后我们会看到两块内容,分别是 Sublime Text 3 的插件安装代码和 Sublime Text 2 的插件安装代码。

  • 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)
	
  • 1
  • 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')
	
  • 1

将其输入进控制台,并单击回车。

等待安装完成后,完全退出 Sublime Text 并重新打开。

这时候我们打开控制面板。

当然,你也可以按快捷键。

  • window : ctrl + shift + p
  • mac : commond + shift + p

这时候输入 install 去呼出插件安装面板。

等待加载完成后,你就可以看到该界面了。

这时候你想要什么插件,就可以在这里直接输入,而不用每次都去自己找安装包啦。

5. Sublime Text 的插件推荐


5.1 Emmet

  • 功能:编码快捷键,前端必备
  • 简介:Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网上看下具体的演示视频。
  • 使用教程: http://docs.emmet.io/cheat-sheet/

5.2 html-css-jsprettify

  • 功能:对Html,css,js文件进行格式化
  • 简介:代替了JsFormat 和 CSSFormat
  • 使用:快捷键Windows: ctrl+shift+i
  • 快捷键配置:在Preferences / Key Bindings – User加上代码(数组内) 
    {“keys”: [“ctrl+shift+i”],”command”: “htmlprettify”},

5.3 CSSComb

  • 功能:用来给CSS属性进行排序的格式化(处女座必备)
  • 简介:按一定的顺序排列
  • 使用:到https://github.com/csscomb/sublime-csscomb下载插件包,放到sublime text文件夹的\Data\Packages\User目录里
  • 快捷键:ctrl+shift+c

5.4 ColorHighlighter

  • 功能:方便调色
  • 简介:它可以展示你所选择的颜色代码(像“#FFFFFF”, “rgb(255,255,255)”, “white”)的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。
  • 使用:快捷键Windows: ctrl+shift+w
  • 快捷键配置:在Preferences / Key Bindings – User加上代码(数组内) 
    { “keys”: [“ctrl+shift+w”],”command”: “color_picker”,”context”: [{“key”: “color_highlighter.color_picker”}]},

5.5 Trailing spaces

  • 功能:检测并一键去除代码中多余的空格
  • 简介:还在纠结代码中有多余的空格而显得代码不规范?或是有处女座情节?次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格,让你的代码规范清爽起来
  • 使用:安装插件并重启,即可自动提示多余空格。一键删除多余空格:CTRL+SHITF+T(需配置),更多配置请点击标题。
  • 快捷键配置:在Preferences / Key Bindings – User加上代码(数组内){ “keys”: [“ctrl+shift+t”], “command”: “delete_trailing_spaces” },

5.6 auto-save

  • 功能:自动保存文件
  • 简介:为保存提供了方便
  • 使用:默认是不会自动保存,按快捷键Ctrl+Shift+S开启。
  • 快捷键配置方法:首选项-快捷键设置,在数组内添加{ “keys”: [“ctrl+shift+s”], “command”: “auto_save” },如需自动启用,首选项-插件-auto-save—settings-usre粘帖一下配置 

    “auto_save_on_modified”: true, 
    “auto_save_delay_in_seconds”: 10, 
    “auto_save_all_files”: true, 
    “auto_save_current_file”: “”, 
    “auto_save_backup”: false, 
    “auto_save_backup_suffix”: “autosave” 
    }

5.7 view in browser

  • 功能:通过默认浏览器打开文件
  • 简介:方便打开浏览器检查编译效果
  • 使用:快捷键配置方法:首选项-快捷键设置,在数组内添加快捷键:F12{ “keys”: [“f12”], “command”: “open_in_browser” },

5.8 autoprefixer(下载超慢)

  • 功能:CSS添加私有前缀
  • 简介:CSS还未标准化,所以要给各大浏览器一个前缀以解决兼容问题
  • 使用:快捷键配置方法:首选项-快捷键设置,在数组内添加{ “keys”: [“ctrl+shift+enter”], “command”: “autoprefixer” },
  • 快捷键:ctrl+shift+enter

5.9 CSS Extended Completions:

  • 功能:关联CSS文件,智能提示css文件中的类名,非常好用

5.10 JavaScript Completions

  • 功能:支持javascript原生语法提示,妈妈再也不用担心我输入document.getElementById(id)

5.11 jQuery

  • 功能:jQ函数提示
  • 简介:快捷输入jQ函数,是偷懒的好方法

5.12 AutoFileName

  • 功能:快捷输入文件名
  • 简介:自动完成文件名的输入,如图片选取
  • 使用:输入”/”即可看到相对于本项目文件夹的其他文件

5.13 SublimeLinter

  • 功能:代码检查
  • 简介:支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言
  • 使用:需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。

5.14 SideBarEnhancements

  • 功能:扩充边栏菜单的功能
  • 简介:包括在当前工程文件夹中新建文件,移动文件或文件夹,产生文件或文件夹的副本,在新窗口或浏览器中打开,刷新等。

5.15 Bracket Highlighter

  • 功能:代码匹配
  • 简介:可匹配[], (), {}, “”, ”, ,高亮标记,便于查看起始和结束标记

5.16 Monokai Extended

  • 功能:主题
  • 简介:如果你喜欢 Soda Dark 和 Monokai,我建议你使用 Monokai Extended
  • 使用:首选项-> 配色方案 -> User -> Monokai Extended

5.17 全文快捷键配置

[
    { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },
    { "keys": ["ctrl+shift+s"], "command": "auto_save" },
    { "keys": ["f12"], "command": "open_in_browser" },
    { "keys": ["ctrl+shift+enter"], "command": "autoprefixer" },
    { "keys": ["ctrl+shift+i"],"command": "htmlprettify"},
{ "keys": ["ctrl+shift+w"],"command": "color_picker","context": [{"key": "color_highlighter.color_picker"}]},
	
]