Sublime Text3一些安装和使用技巧

814247614

　　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


[img]http://onexin.iyunv.com/source/plugin/onexin_bigdata/file:///C:UsersAdministratorAppDataRoamingTencentUsers594820197QQWinTempRichOleHFS[CCZK9R149(G77MC4[IS.png[/img]

　　16.SideBarEnhancements

　　侧边栏加强软件:CTRL+K,CTRL+B

　　可配置打开方式,使html文件直接通过快捷键以浏览器打开,如下:

　　File->Open Folder,注意这里是打开文件夹,在打开的文件夹上右键Open With->Edit Applications,在打开的文件中如下配置:

　　application的值是浏览器客户端地址




[
{"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