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

　　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