ST3是一款很好的编辑软件,他不仅仅是能编辑前端代码,包括JS,PHP,HTML,CSS等,还能编辑JAVA,C++等常用后代编辑语言.因为本人写前端,本篇文章只介绍ST3的一些前端的技巧.
对于ST3的前端功能,同类的还有ATOM,HBuilder,WEBSTROM等,多样选择,总有一款是适合你的.废话不多说,本篇文章主要是关于windows上的前端配置,.
1.ST3的安装
1.官网即可下载安装:http://www.sublimetext.com/3,下载系统对应版本即可,激活码可在网上查找,需要跟下载的版本相同的激活码
2. 安装时，注意勾选Add to explorer context menu，这样Sublime Text可以被添加到右键中，在右键单击文件时，可以直接使用Sublime Text打开
2.插件安装
2.1 使用Package Control来进行插件的安装,卸载,查看
使用 [Ctrl + `] (或View > Show Console menu) 打开Sublime Text控制台，将下面的代码粘贴到控制台里:
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)
由于版本的变化,上面的代码可能改变,可以到官网查看:https://packagecontrol.io/installation
如果在Perferences->package settings中看到package control这一项，则表明安装成功.
2.2 Package Control的使用
1.按下Ctrl+Shift+P调出命令面板.
2.输入install,调出install package,输入需要安装的插件名,回车,即可安装插件
3.输入list,调出list package,可查看已经安装的插件
4.输入remove,调出remove package,可删除已安装插件
2.3 Package Control的安装路径
若是从官网上下载ST3安装到非系统盘(C盘),插件并非安装在ST3当前盘,需要到如下盘(windows系统):
C:\Users\Administrator\AppData\Roaming\Sublime Text 3,可以看到有2个文件夹： Installed Packages 和 Packages
只有单一文件（插件名.sublime-package）的插件,被放在了Installed Packages目录中,包含有多个文件的安装包插件,被放在了Packages 目录中
若是直接从PC安装的插件,会自动放到当前的两个目录,若是手动下载的插件,可根据需要放到对应目录中
3.快捷键与配置
3.1 系统默认快捷键
可查看http://www.cnblogs.com/zhcncn/p/4113589.html
3.2 自定义快捷键
Preferences->Key Bindings-User,可查看http://blog.csdn.net/ablipan/article/details/17138045
4.插件安装
1.EMMET
一款可用来加速编写html代码的插件:TAB
如ul>li*3,TAB之后可快速生成有3个li元素的ul元素,具体用法可自行体会.
2.BracketHighlighter
高亮显示匹配的括号、引号和标签
若是嫌弃系统的匹配不够醒目,可参考http://www.tuicool.com/articles/EV3eEzA
3.Alignment
等号对齐:CTRL+ALT+A.在windows系统上可能与其他快捷键有冲突,需要自定义快捷键
4.HTML5
快速编写html模版
5.AutoCompleteJS
自动提示JS代码
6.Can I Use
一款检测html和css在各大浏览器是否兼容的插件:可直接右键选中
7.ColorPicker
一款取色器:CTRL+ALT+C,若是无法调出取色器,可能是快捷键被占用,可自定义快捷键Preferences→Key Bindings-User-{ "keys": ["ctrl+alt+c"], "command": "color_pick"}
8.DocBlocker
对方法等进行注释
9.FileDiffs
查找文档不同
10.ConvertToUTF8
转换utf-8格式
11.Pretty JSON
对JSON字符串进格式化:CTRL+ALT+J
12.JSFormat
JS代码格式化:CTRL+ALT+F
13.JQuery
对JQ的支持
14.IMESupport
ST3对中文输入法的支持有个小bug，就是在输入中文时，输入法没办法显示在ST3的窗口之上，只能在ST3窗口之外显示，也就是“输入框不跟随”
15.Ctranslator tool
一款中英文翻译插件,需要先安装翻译软件:CTRL+ATL+H
[
{"id": "side-bar-files-open-with",
"children":
[
//application firefox
{
"caption": "firefox",
"id": "side-bar-files-open-with-firefox", "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //any file with extension
}
},
{"caption":"-"},
{
"caption": "chrome",
"id": "side-bar-files-open-with-chrome", "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*" //any file with extension
}
}
]
}
]
接下来需要设置打开不同浏览器的快捷键preferences->Key Bindings-User
[
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
{ "keys": ["alt+f12"], "command": "open_in_browser" },
{ "keys": ["f12"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "E:\\Program Files\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //any file with extension
} },
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "E:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*" //any file with extension
}
}
]
可以直接按f1在chrome中打开当前html,也可以按照自己喜好配置.
17.HTML-CSS-JS Prettify
一款对html,css,js格式化的插件,快捷键是ctrl+shift+h.需要安装nodejs,只需要在本插件的配置中载入nodejs的路径,如F:\Nodejs\node.exe
18.Auto-save
一款自动保存修改文件的插件,快捷键是ctrl+shift+s.安装插件后默认是关闭的,可用快捷键进行切换状态,对于多文件替换比较方便.
19.DeleteBlankLines
删除空白行,选中需要删除的文本,快捷键ctrl+alt+backspace
20.Trailing Spaces
用红色显示文本中多余的空格,若想删除这些空格:edit-Traling Spaces-Delete
21.AutoFileName
快速列出你想引用的文件夹里面所有文件的名字
22.SublimeCodeIntel
js代码智能提示
5.SublimeLiinter,SublimeLinter-Jshint,SublimeLinter-CSSlint
专门用来检测JS语法的插件,要和Nodejs配合使用.
5.1 首先是nodejs的安装,可通过官网上下载对应的版本:https://nodejs.org/en/
5.2 打开nodejs的cmd窗口,可从开始->所有程序->Node.js->Node.js command prompt,在命令行中输入
npm install -g jshint 回车,等待插件的安装完成.安装完之后输入jshint -v,若是能显示版本号,则安装成功.同样的方法按章csslint,输入
npm install -g csslint 回车
5.3 若是能显示版本号,则可跳过5.3,5.4,5.5,5.6.若是无法显示jshint或csslint版本号,则需要检查这两个插件安装的目录是否在系统盘中:C:\Users\Administrator\AppData\Roaming\npm\node_modules.在安装完成jshint之后可看到完成信息中有安装插件的地址,我在这是介绍的改变全局的存放模块来使安装的插件生效,需要改变的两个文件夹分别:
node_global和node_cache
5.4 在打开的nodejs的控制台中输入
npm config set prefix "node_global的地址"
npm config set prefix "node_cache的地址"
5.5 由于改变了node_modules的默认安装目录,需要重新配置环境变量
编辑PATH:F:\SoftWare\nodejs\node_modules\npm;F:\SoftWare\nodejs\node_global
添加NODE_PATH:F:\SoftWare\nodejs\node_global\node_modules
5.6 配置完成后再次输入jshint -v,显示版本号则配置成功
5.7 安装好nodejs中的插件后可配置SublimeLinter的配置文件:Preferences->Package Settings->SublimeLinter->Settings - User
{
"sublimelinter": "save-only",
"sublimelinter_popup_errors_on_save": true,
"sublimelinter_executable_map": {
"javascript": "D:/Program Files/nodejs/node.exe",
"css": "D:/Program Files/nodejs/node.exe"
},
"jshint_options": {
"strict": false,
"quotmark": "single", //只能使用单引号
"noarg": true,
"noempty": true, //不允许使用空语句块{}
"eqeqeq": true, //!==和===检查
"undef": true,
"curly": true, //值为true时，不能省略循环和条件语句后的大括号
"forin": true, //for in hasOwnPropery检查
"devel": true,
"jquery": true,
"browser": true,
"wsh": true,
"evil": true,
"unused": "vars", //形参和变量未使用检查
"latedef": true, //先定义变量，后使用
"globals": {
"grunt": true,
"module": true,
"window": true,
"jQuery": true,
"$": true,
"global": true,
"document": true,
"console": true,
"setTimeout": true,
"setInterval": true
}
},
"csslint_options": {
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false,
"display-property-grouping": true,
"duplicate-background-images": "warning",
"duplicate-properties": true,
"empty-rules": true,
"errors": true,
"fallback-colors": "warning",
"font-faces": "warning",
"ids": "warning",
"import": "warning",
"overqualified-elements": "warning",
"rules-count": "warning",
"star-property-hack": "warning",
"underscore-property-hack": "warning",
"vendor-prefix": true,
"zero-units": "warning"
}
}
每个参数的配置可参考:http://jshint.com/docs/#options