Sublime Text3 3080安装及各种插件教程

作为一个前端开发人员，搭建自己喜欢的开发环境是必要的！Sublime Text3 作为一个前端开发利器是必备的，会用是不够的，必须学会如何安装配置；作为一个windows用户很多命令行操作是很不习惯的，但有些地方命令行命令行也是必需的。

工具/原料

Sublime Text
Nodejs

方法/步骤

1

打开Sublime Text3 官网 http://www.sublimetext.com/3

并下载与自己系统相关版本的Sublime Text 3
2

双击打开安装文件或者右键管理员运行
3

Sublime Text3 不是免费的所以我们需要...，你懂得（不建议啊）

打开Sublime Text 3，点击菜单 Help 选择 Enter License 输入下面注册码，然后点击Use License就注册成功!

----- BEGIN LICENSE -----

Andrew Weber

Single User License

EA7E-855605

813A03DD 5E4AD9E6 6C0EEB94 BC99798F

942194A6 02396E98 E62C9979 4BB979FE

91424C9D A45400BF F6747D88 2FB88078

90F5CC94 1CDC92DC 8457107A F151657B

1D22E383 A997F016 42397640 33F41CFC

E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D

5CDB7036 E56DE1C0 EFCC0840 650CD3A6

B98FC99C 8FAC73EE D2B95564 DF450523

------ END LICENSE ------

打开菜单 Help ---》About Sublime Text 如图表示注册码添加成功
4

开始安装Package Control：

一、简单的安装方法

使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行，粘贴如下代码：

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())

安装成功后，就可以在Preferences菜单下看到Package Settings和Package Control两个菜单。

顺便贴下Sublime Text2 的代码：

import urllib2,os; 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( ))); open( os.path.join( ipp, pf), ‘wb‘ ).write( urllib2.urlopen( ‘http://sublime.wbond.net/‘ +pf.replace( ‘ ‘,‘%20‘ )).read()); print( ‘Please restart Sublime Text to finish installation‘)

二、手动安装

可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control：

1.点击Preferences > Browse Packages菜单

2.进入打开的目录的上层目录，然后再进入Installed Packages/目录

3.下载Package Control.sublime-package并复制到Installed Packages/目录

4.重启Sublime Text。

可以参考：https://packagecontrol.io/installation#st3
5

下面的大部分插件都需要Package Control

----------------sublime必装插件-----------------------------

1.emmet【Emmet html/CSS快速编辑（原名Zen Coding）】

2.sublimeCodeIntel SublimeCodeIntel自动提示功能

3，3.html/css/js prettify 格式化

【下载安装到Node.js 官网下载 32位版本（据说win x64版有问题）安装。确认Node.js安装路径鼠标右键HTML/CSS/JS Prettify > Set Plugin Options保证插件路径与Node.js安装路径一致，Ctrl+s保存。】

4,SublimeLinter 检查语法错误[jshint;js语法 sublimeLinterCsshint,sublimeLinterJshint 依靠nodejs]

5,BracketHighlighter 高亮显示匹配的括号、引号和标签

6，TrailingSpacer 高亮显示多余的空格和Tab

7，SideBarEnhancements 侧边栏增强

8，CSScomb CSS属性排序【C trl +S hift + C】

9,JsFormat javascript格式化【Ctrl+Alt+F】

10，SublimeTmpl 快速生成文件模板

11,AutoFileName 自动提示路径插件

12，LESS less语法高亮

13，LESS2CSS [http://fdream.net/blog/article/783.aspx]

14，DocBlockr 文档注释

15，html5

15，SublimeTmpl 文件模版

步骤：

ctrl+shift+p--->输入Install Package-->输入插件名称:如emmet

点击就自动安装了

（其它插件原理相同，这里就不做介绍了）

或者直接拷贝插件文件到：

\Sublime Text 3\Installed Packages 或 \Sublime Text 3\Packages

这个可以在Preferrences -->Browse Packages...中找到插件安装目录
6

注意 prettify，less等部分插件需要依赖nodejs:

所以下面是nodejs安装教程：

首先，打开nodejs官网： https://nodejs.org/download/

下载相应的nodejs版本，一般默认会有npm(新版就不需要安装npm);

其次，双击安装文件安装到某一个目录或者直接下一步

打开dos: w+r-->cmd

输入：node -v

如果显示 v.0.12.2或者其他表示安装成功

less:

继续 npm install less -gd

通过快捷键 Windows徽标键+R键调出运行窗口，输入cmd，在命令行中输入lessc，如果有如下提示则表示设置成功:

no input files

整个步骤完成：

推荐：

emmet教程： http://emmet.evget.com/

sublime text插件地址：https://packagecontrol.io/

web前端让生活更前端！

编辑：慧常道

个人主页www.jsgu.net

END