你的位置:首页 > Java教程

[Java教程]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

  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,也可以按照自己喜好配置.

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