Sublime Text3一些安装和使用技巧

  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

Sublime Text3一些安装和使用技巧
  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

上一篇:LeetCode刷题笔记-回溯法-分割回文串


下一篇:Keepalived+LVS高可用负载均衡集群