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

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

工具/原料

. Sublime Text
. Nodejs

方法/步骤

1 . 打开Sublime Text3 官网 http://www.sublimetext.com/3
并下载与自己系统相关版本的Sublime Text 3

Sublime Text3 官网

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

安装文件

3 . Sublime Text3 不是免费的所以我们需要…,你懂得(不建议啊)
打开Sublime Text 3,点击菜单 Help 选择 Enter License 输入下面注册码,然后点击Use License就注册成功!

1
2
3
4
5
6
7
8
9
10
11
12
13
----- 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菜单打开命令行,粘贴如下代码:

1
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 的代码:

1
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

手动安装 Package Control

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…中找到插件安装目录

找到Installed Packages
选择Package Control插件

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

找到与电脑匹配的版本

查看是否安装成功

注意事项

. 有些时候安装插件是很慢的,这个你懂的
. 有很多快捷键是无法使用的,需要自己从新设定快捷键