下载sublime text 3
地址：https://download.sublimetext.com/Sublime%20Text%20Build%203126.dmg
注册码：
—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——
安装package control
命令：ctrl+\` 打开控制台工具：
输入以下代码：
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)
回车，执行。
安装插件
键盘：command + shift + p 打开命令查询窗口
输入：install 选择install package
安装以下插件:
- Angularjs
- Bootstrap 3 Autocomplete
- BracketHighlighter
- HTML-CSS-JS Prettify
- jQuery
- SublimeCodeIntel
- Theme - Freesia
- Theme - Soda
用户配置
菜单：preferences -> Browse Packages
进入 Packages/User 文件夹
新建文件名：base16-bright.light (SL).tmTheme
将以下代码复制到该文件:
comment
Chris Kempson (http://chriskempson.com)
name
Base16 Bright Light
semanticClass
base16.bright.light
colorSpaceName
sRGB
gutterSettings
background
#ffffff
divider
#ffffff
foreground
#505050
selectionBackground
#ffffff
selectionForeground
#e0e0e0
settings
settings
background
#ffffff
caret
#505050
foreground
#505050
invisibles
#f5f5f5
lineHighlight
#f5f5f5
selection
#f5f5f5
name
Text
scope
variable.parameter.function
settings
foreground
#505050
name
Comments
scope
comment, punctuation.definition.comment
settings
foreground
#d0d0d0
name
Punctuation
scope
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array
settings
foreground
#505050
name
Delimiters
scope
none
settings
foreground
#505050
name
Operators
scope
keyword.operator
settings
foreground
#505050
name
Keywords
scope
keyword, keyword.control
settings
foreground
#d381c3
name
Variables
scope
variable
settings
foreground
#fb0120
name
Functions
scope
entity.name.function, meta.function-call, meta.require
settings
foreground
#6fb3d2
name
Classes
scope
meta.class, support.class, entity.name.class, entity.name.type.class
settings
foreground
#fc6d24
name
Methods
scope
keyword.other.special-method
settings
foreground
#6fb3d2
name
Storage
scope
storage
settings
foreground
#d381c3
name
Support
scope
support.function
settings
foreground
#76c7b7
name
Strings, Inherited Class
scope
string, constant.other.symbol, entity.other.inherited-class
settings
foreground
#a1c659
name
Integers
scope
constant.numeric
settings
foreground
#fc6d24
name
Floats
scope
none
settings
foreground
#fc6d24
name
Boolean
scope
none
settings
foreground
#fc6d24
name
Constants
scope
constant
settings
foreground
#fc6d24
name
Tags
scope
entity.name.tag
settings
foreground
#fb0120
name
Attributes
scope
entity.other.attribute-name
settings
foreground
#fc6d24
name
Attribute IDs
scope
entity.other.attribute-name.id, punctuation.definition.entity
settings
foreground
#6fb3d2
name
Selector
scope
meta.selector
settings
foreground
#d381c3
name
Values
scope
none
settings
foreground
#fc6d24
name
Headings
scope
markup.heading punctuation.definition.heading, entity.name.section
settings
fontStyle
foreground
#6fb3d2
name
Units
scope
keyword.other.unit
settings
foreground
#fc6d24
name
Bold
scope
markup.bold, punctuation.definition.bold
settings
fontStyle
bold
foreground
#fc6d24
name
Italic
scope
markup.italic, punctuation.definition.italic
settings
fontStyle
italic
foreground
#d381c3
name
Code
scope
markup.raw.inline
settings
foreground
#a1c659
name
Link Text
scope
string.other.link
settings
foreground
#fb0120
name
Link Url
scope
meta.link
settings
foreground
#fc6d24
name
Lists
scope
markup.list
settings
foreground
#fb0120
name
Quotes
scope
markup.quote
settings
foreground
#fc6d24
name
Separator
scope
meta.separator
settings
background
#f5f5f5
foreground
#505050
name
Inserted
scope
markup.inserted
settings
background
#a1c659
foreground
#ffffff
name
Deleted
scope
markup.deleted
settings
background
#fb0120
foreground
#ffffff
name
Colours
scope
constant.other.color
settings
foreground
#76c7b7
name
Regular Expressions
scope
string.regexp
settings
foreground
#76c7b7
name
Escape Characters
scope
constant.character.escape
settings
foreground
#76c7b7
name
Embedded
scope
punctuation.section.embedded, variable.interpolation
settings
foreground
#be643c
name
diff.deleted
scope
markup.deleted
settings
foreground
#fb0120
background
#ffffff
name
diff.inserted
scope
markup.inserted
settings
foreground
#a1c659
background
#ffffff
name
diff.changed
scope
markup.changed
settings
foreground
#d381c3
background
#ffffff
name
Invalid - illegal
scope
invalid.illegal
settings
background
#fb0120
fontStyle
bold
foreground
#ffffff
name
SublimeLinter Gutter Mark
scope
sublimelinter.gutter-mark
settings
foreground
#FFFFFF
name
SublimeLinter Warning
scope
sublimelinter.mark.warning
settings
foreground
#DDB700
name
SublimeLinter Error
scope
sublimelinter.mark.error
settings
foreground
#D02000
uuid
c56519c1-8717-49e8-bbbc-978c20c29483
新建文件：base16-eighties.dark (SL).tmTheme
author
Chris Kempson (http://chriskempson.com)
name
Base16 Eighties Dark
semanticClass
base16.eighties.dark
colorSpaceName
sRGB
gutterSettings
background
#393939
divider
#393939
foreground
#747369
selectionBackground
#515151
selectionForeground
#a09f93
settings
settings
background
#2d2d2d
caret
#d3d0c8
foreground
#d3d0c8
invisibles
#747369
lineHighlight
#393939
selection
#515151
name
Text
scope
variable.parameter.function
settings
foreground
#d3d0c8
name
Comments
scope
comment, punctuation.definition.comment
settings
foreground
#747369
name
Punctuation
scope
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array
settings
foreground
#d3d0c8
name
Delimiters
scope
none
settings
foreground
#d3d0c8
name
Operators
scope
keyword.operator
settings
foreground
#d3d0c8
name
Keywords
scope
keyword
settings
foreground
#cc99cc
name
Variables
scope
variable
settings
foreground
#f2777a
name
Functions
scope
entity.name.function, meta.require, support.function.any-method
settings
foreground
#6699cc
name
Classes
scope
support.class, entity.name.class, entity.name.type.class
settings
foreground
#ffcc66
name
Classes
scope
meta.class
settings
foreground
#f2f0ec
name
Methods
scope
keyword.other.special-method
settings
foreground
#6699cc
name
Storage
scope
storage
settings
foreground
#cc99cc
name
Support
scope
support.function
settings
foreground
#66cccc
name
Strings, Inherited Class
scope
string, constant.other.symbol, entity.other.inherited-class
settings
foreground
#99cc99
name
Integers
scope
constant.numeric
settings
foreground
#f99157
name
Floats
scope
none
settings
foreground
#f99157
name
Boolean
scope
none
settings
foreground
#f99157
name
Constants
scope
constant
settings
foreground
#f99157
name
Tags
scope
entity.name.tag
settings
foreground
#f2777a
name
Attributes
scope
entity.other.attribute-name
settings
foreground
#f99157
name
Attribute IDs
scope
entity.other.attribute-name.id, punctuation.definition.entity
settings
foreground
#6699cc
name
Selector
scope
meta.selector
settings
foreground
#cc99cc
name
Values
scope
none
settings
foreground
#f99157
name
Headings
scope
markup.heading punctuation.definition.heading, entity.name.section
settings
fontStyle
foreground
#6699cc
name
Units
scope
keyword.other.unit
settings
foreground
#f99157
name
Bold
scope
markup.bold, punctuation.definition.bold
settings
fontStyle
bold
foreground
#ffcc66
name
Italic
scope
markup.italic, punctuation.definition.italic
settings
fontStyle
italic
foreground
#cc99cc
name
Code
scope
markup.raw.inline
settings
foreground
#99cc99
name
Link Text
scope
string.other.link
settings
foreground
#f2777a
name
Link Url
scope
meta.link
settings
foreground
#f99157
name
Lists
scope
markup.list
settings
foreground
#f2777a
name
Quotes
scope
markup.quote
settings
foreground
#f99157
name
Separator
scope
meta.separator
settings
background
#515151
foreground
#d3d0c8
name
Inserted
scope
markup.inserted, markup.inserted.git_gutter
settings
foreground
#99cc99
name
Deleted
scope
markup.deleted, markup.deleted.git_gutter
settings
foreground
#f2777a
name
Changed
scope
markup.changed, markup.changed.git_gutter
settings
foreground
#cc99cc
name
Ignored
scope
markup.ignored, markup.ignored.git_gutter
settings
foreground
#515151
name
Untracked
scope
markup.untracked, markup.untracked.git_gutter
settings
foreground
#515151
name
Colors
scope
constant.other.color
settings
foreground
#66cccc
name
Regular Expressions
scope
string.regexp
settings
foreground
#66cccc
name
Escape Characters
scope
constant.character.escape
settings
foreground
#66cccc
name
Embedded
scope
punctuation.section.embedded, variable.interpolation
settings
foreground
#d27b53
name
Invalid
scope
invalid.illegal
settings
background
#f2777a
foreground
#2d2d2d
name
SublimeLinter Warning
scope
sublimelinter.mark.warning
settings
foreground
#DDB700
name
SublimeLinter Gutter Mark
scope
sublimelinter.gutter-mark
settings
foreground
#FFFFFF
name
SublimeLinter Error
scope
sublimelinter.mark.error
settings
foreground
#D02000
uuid
36594751-36ac-443a-9f2f-111b815085cf
命令 command + , 打开用户设置
将以下代码拷贝，并覆盖用户设置原有内容：
{
"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin",
"auto_complete_triggers":
[
{
"characters": "<",
"selector": "text.html"
},
{
"characters": "bs3",
"selector": "text.html"
}
],
"bold_folder_labels": true,
"codeintel_selected_catalogs":
[
"HTML5",
"HTML",
"JavaScript"
],
"color_scheme": "Packages/User/base16-eighties.dark (SL).tmTheme",
"folder_exclude_patterns":
[
"node_modules",
".svn",
".git",
".hg",
"CVS",
".SyncArchive",
".idea"
],
"font_face": "Monaco",
"font_size": 14,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"show_encoding": true,
"sublimelinter": true,
"terminal": "",
"theme": "Freesia.sublime-theme",
"trim_trailing_white_space_on_save": true,
"vintage_start_in_command_mode": true,
"word_wrap": true
}
安装并使用LiveReload
1， 首先安装sublimetext 3 插件：LiveReload。
2，安装google chrome 插件：LiveReload。并点击启用和允许访问文件网址
3，配置sublime text LiveReload ：
配置
方法一：
Preference>Package Settings>LiveReload>Settings User
{ "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ]}
方法二：
- ctrl+shift+p
- LiveReload: Enable/disable plugins
- Enable - SimpleReload
实时预览
把html文件在浏览器中打开，点击一次图标中间的圆环变成原点就代表可以实时预览了。ST3中的文件保存一次，浏览器就会刷新一次，实时预览，很方便！
最后
重启sublime text。