回到目录:Sublime Text的使用

DocBlockr

一个便捷的文档构建工具,能方便的给js文档本身,js函数/方法 进行详细的文档描述

触发的方式很简单,输入 /** 然后Enter,就会自动出一个格式化的模板,修改完一个,打Tab键,就可以自动去修改下一个

Emmet

这个是zen coding的后续升级维护版,进行HTML开发是必不可少的一大利器,通过简单的css选择器语法,能快速的构建出需要的HTML代码。当然还有很多别的很方便的使用方法,具体可以查看官方文档

HTML-CSS-JS Prettify

这是前端团队风格统一化比较方面的一个插件,能快速的针对html, css和js文件进行格式化

LESS

这个是less文件语法高亮的一个插件,对前端同学来说也是很有必要性的一个工具

Markdown Preview

这个是对写完的markdown文件,进行预览的一种工具,提供两个主题的预览或者保存。

Control+Shift+P的命令界面中输入markdown(前提是已经安装了该插件),就能看到相关的命令

markdown命令

其中preview in browser就是在浏览器中预览,save to html就是在当前md所在文件夹,以同样的文件名,保存一个生成的和预览效果一致的html文件

JSONLint

这个是一个JSON的语法检测工具,能在当前打开的json文件中标示出语法错误的地方

JSONLint

这个对平时我们用json写一些接口假数据的时候,比较方便

// and more …

回到目录:Sublime Text的使用

Package Control

Package Control,是一个方便的管理Sublime Text插件的包管理器,几乎是必备的Sublime 工具

安装

从菜单 View – Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装。

Sublime Text 3

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); urllib.request.install_opener( 
urllib.request.build_opener( urllib.request.ProxyHandler()) ); 
open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 
'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Sublime Text 2

import urllib2,os; pf='Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) 
else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( 
))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 
'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please 
restart Sublime Text to finish installation')

使用

使用的时候使用快捷键 Ctrl + Shift + P (Windows) 或者 Command + Shift + P(Mac) 调用命令输入界面(注意,此界面非Package Control专有)

Package Control

在输入框里面,输入Package Control就能看到所有Package Control相关的命令

相关命令

Package Control: Install Package

一般输入install就能通过模糊匹配查找到

会列出Sublime Text官网上的所有包供浏览

能根据输入的内容进行模糊查找相关的包

点击需要的包,就能自动安装。

PS: 已经安装的包不会在此展示

搜索Less相关的包

Package Control: List Package

列出当前已经安装的包,在命令行里面输入list,也能模糊匹配到,不需要整个命令全部输入

也能支持模糊匹配相应安装的包

点击对应的包,会打开文件夹指向对应包的目录。

这个时候,可以看这个包里面的文件和相关说明(一般包的文件里面都会包含一个readme.md用来进行使用方面的相关说明)

Mac下JSHint包的文件内容

Package Control: Remove Package

删除安装的包

通过remove 也能快速模糊匹配到

会列出当前已经安装的包,点击选中的包,就能删除(慎重)

回到目录:Sublime Text的使用

说明

通过修改Sublime Text的配置,能让Sublime Text使用起来更加便捷

配置分为两种:一个是Default,这个是默认配置,建议不要动,而是作为一个参考。另一个是User,这个才是建议用户去修改和搭配的配置。

配置的写法都是json,所以书写的时候一定要注意规范,比如字段名都是用双引号包裹。如果语法书写有错误,是没法起作用的,不过会有提示

配置说明

下面将列举一些常见的配置命令和对应说明:

  • font_size {Number} 设置字体大小的,在编辑界面通过Ctrl+鼠标滚轮 或者 Ctrl++/- 调整的字体大小也会对应的修改到User下的这个命令下,一般13、14、15都是比较合适的值,可以自行调配
  • highlight_line {Boolean} 是否高亮当前光标所在行
  • ignored_packages {Array} 要忽略的包 有些包,可能暂时不需要用但是又不想卸载,这个时候,可以选择忽略,使其不起作用,最常见的忽略就是vim包
  • translate_tabs_to_spaces {Boolean} 是否把制表符转换为空格 建议开启,因为制表符,每个编辑器设定的长度都不一样,而空格的长度都是一样的。这样能保证在不同平台,不同编辑器,不同开发人员的情况下,代码的格式和缩进都一样
  • trim_trailing_white_space_on_save {Boolean} 是否在保存的时候去掉多余的空格。最常见的情况就是有一个空行没有任何代码,但是这个空行里面有很多制表符或者空格。如果开启了,那么保存的时候,空行还是保留,但是行内的空白字符(制表符,空格等)会被清除掉
  • word_separators {String} 定义哪些字符可以分隔单词 这个在想双击选中某些单词的时候很有用。比如在前端开发中,class的定义是字母之间用连字符间隔。可是在Default配置里面,-是可以分隔单词的,这导致的结果就是我们双击class的时候,没法完整的选中整个class。解决的方法就是从Defult里面复制word_separators的值(这就是为什么不要动Default配置而是当做参考的原因之一),在User里面新建这个字段,然后把值里面的连字符去掉。
  • word_wrap {Boolean} 定义在输入的内容到达右边距的时候,是不换行继续输入还是会自动折行展示

推荐的一个初始配置


{
    "font_size": 15,
    "highlight_line": true,
    "ignored_packages":
    [
    ],
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_separators": "./\()"':,.;<>~!@#$%^&*|+=[]{}`~?",
    "word_wrap": true
}