前端神器之Sublime Text2/3简单明了使用总结

为什么叫神器呢?

我总结如下:

第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~)。一般IDE比如WebStorm(它也是一款神器来着),Aptana(也比较常用),还有前后结合的Zend Studio 等都略显臃肿,打开太慢,耗内存太大。

第二:主题丰富,漂亮的界面。各式各样的主题可以满足你的视觉美。

第三:支持的插件丰富多样。很多插件都能让你获得不一样的体验。

第四:支持命令快捷键方式。就如同vim那般有广阔的命令快捷。

好吧,那就来下载安装吧。

Sublime Text2或者3都没关系,3也只是作为2的beta版本,所以还是推荐3吧,支持新版嘛。2和3在使用方法功能上也有差异~

(1)你可以去官网下载对应版本,但可能需要输入序列号什么的。

访问http://www.sublimetext.com/2下载2.x版本。

  或从http://www.sublimetext.com/3下载3.x版本。

  注册码(仅供个人非商业应用):

  

----- BEGIN LICENSE ------
Alexander
Single User License
EA7E-814345
51F47F09 4EAB1285 7827EFF0 8B1207DC
A76A6EA3 E1A1CA7A DC1F2703 14,897,784
8EDC1C82 3F2A58B9 1C0C8B24 67686432
281245B3 6233DE5C ADC5C2F9 61FB8A04
171B63EF 86BA423F 6AC884FD 3273A7AA
5F50A6DB CE7859AE D62D2B37 AEEDD8C2
078A8A20 70EEA791 84F48C1E 8ABA7DEB
0B3907C0 C9A3523B 0091A045 6F67AED8
------ END LICENSE ------
----- BEGIN LICENSE -----
Andrew Weber
 Single User License
 EA7E-855605
 813A03DD 5E4AD9E6 6C0EEB94 BC99798F
 942194A6 02396E98 E62C9979 4BB979FE
 91424C9D A45400BF F6747D88 2FB88078
 90F5CC94 1CDC92DC 8457107A F151657B
 1D22E383 A997F016 42397640 33F41CFC
 E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
 5CDB7036 E56DE1C0 EFCC0840 650CD3A6
 B98FC99C 8FAC73EE D2B95564 DF450523
 ------ END LICENSE ------

(2)一般官网下来的都是英文原版的,可以网上找些中文包放进去就行了。你也可以直接去其他网站下载Sublime Text,一般下下来就可以直接使用了。。

先来基本配置

基本配置可以在窗口布局的那几个选项自己设定,当然也可以在配置文件里边直接开干。

配置文件在:preferences-setting user  或者 setting default

因为user的可以覆盖default的,而且你重装啊什么的也不怕被抹掉,所以推荐你直接写进setting user里边

我是text3 中文版的:

直接在里边写点配置信息就行了,比如:

{
    //字体大小
    "font_size": 11.0,
    //字体类型
    "font_face": "微软雅黑",
    // 设置每一行到顶部,以像素为单位的间距,效果相当于行距
    "line_padding_top": 2,
    // 设置每一行到底部,以像素为单位的间距,效果相当于行距
    "line_padding_bottom": 2,
       //检查更新
    "update_check":false,
    //长单词换行形式
    "word_wrap":"auto",
    // html和xml下突出显示光标所在标签的两端,影响HTML、XML、CSS等
    "match_tags": true,
    // 是否显示代码折叠按钮
    "fold_buttons": true,
    // 代码提示
    "auto_complete": true,
    // 默认编码格式
    "default_encoding": "UTF-8",
    // 左边边栏文件夹动画
    "tree_animation_enabled": true,
    //删除你想要忽略的插件
    "ignored_packages":
    [
        "Vintage",
        "YUI Compressor"
    ]

}

下边总结了一些更多的配置信息,需要的可打开看看~

  1 // While you can edit this file, it‘s best to put your changes in
  2
  3 // "User/Preferences.sublime-settings", which overrides the settings in here.
  4 //
  5 // Settings may also be placed in file type specific options files, for
  6 // example, in Packages/Python/Python.sublime-settings for python files.
  7 {
  8     // Sets the colors used within the text area
  9     //主题文件
 10     "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
 11
 12     // Note that the font_face and font_size are overriden in the platform
 13     // specific settings file, for example, "Preferences (Linux).sublime-settings".
 14     // Because of this, setting them here will have no effect: you must set them
 15     // in your User File Preferences.
 16     //字体样式、大小
 17     "font_face": "",
 18     "font_size": 10,
 19
 20     // Valid options are "no_bold", "no_italic", "no_antialias", "gray_antialias",
 21     // "subpixel_antialias", "no_round" (OS X only) and "directwrite" (Windows only)
 22     // 字体选项:no_bold不显示粗体字,no_italic不显示斜体字,no_antialias和no_antialias关闭反锯齿
 23     // subpixel_antialias和no_round是OS X系统独有的
 24     // directwrite是Windows系统独有的
 25     "font_options": [],
 26
 27     // Characters that are considered to separate words
 28     // 在文字上双击会全选当前的内容,如果里面出现以下字符,就会被截断
 29     "word_separators": "./\\()\"‘-:,.;<>[email protected]#$%^&*|+=[]{}`~?",
 30
 31     // Set to false to prevent line numbers being drawn in the gutter
 32     // 是否显示行号
 33     "line_numbers": true,
 34
 35     // Set to false to hide the gutter altogether
 36     // 是否显示行号边栏
 37     "gutter": true,
 38
 39     // Spacing between the gutter and the text
 40     // 行号边栏和文字的间距
 41     "margin": 4,
 42
 43     // Fold buttons are the triangles shown in the gutter to fold regions of text
 44     // 是否显示代码折叠按钮
 45     "fold_buttons": true,
 46
 47     // Hides the fold buttons unless the mouse is over the gutter
 48     // 不管鼠标在不在行号边栏,代码折叠按钮一直显示
 49     "fade_fold_buttons": true,
 50
 51     // Columns in which to display vertical rulers
 52     //列显示垂直标尺,在中括号里填入数字,宽度按字符计算
 53     "rulers": [],
 54
 55     // Set to true to turn spell checking on by default
 56     // 是否打开拼写检查
 57     "spell_check": false,
 58
 59     // The number of spaces a tab is considered equal to
 60     // Tab键制表符宽度
 61     "tab_size": 4,
 62
 63     // Set to true to insert spaces when tab is pressed
 64     // 设为true时,缩进和遇到Tab键时使用空格替代
 65     "translate_tabs_to_spaces": false,
 66
 67     // If translate_tabs_to_spaces is true, use_tab_stops will make tab and
 68     // backspace insert/delete up to the next tabstop
 69     // translate_tabs_to_spaces设置为true,Tab和Backspace的删除/插入作用于制表符宽度
 70     // 否则作用于单个空格
 71     "use_tab_stops": true,
 72
 73     // Set to false to disable detection of tabs vs. spaces on load
 74     // false时禁止在载入的时候检测制表符和空格
 75     "detect_indentation": true,
 76
 77     // Calculates indentation automatically when pressing enter
 78     // 按回车时,自动与制表位对齐
 79     "auto_indent": true,
 80
 81     // Makes auto indent a little smarter, e.g., by indenting the next line
 82     // after an if statement in C. Requires auto_indent to be enabled.
 83     //针对C语言的
 84     "smart_indent": true,
 85
 86     // Adds whitespace up to the first open bracket when indenting. Requires
 87     // auto_indent to be enabled.
 88     // 需要启用auto_indent,第一次打开括号缩进时插入空格?(没测试出来效果…)
 89     "indent_to_bracket": false,
 90
 91     // Trims white space added by auto_indent when moving the caret off the
 92     // line.
 93     // 显示对齐的白线是否根据回车、tab等操作自动填补
 94     "trim_automatic_white_space": true,
 95
 96     // Disables horizontal scrolling if enabled.
 97     // May be set to true, false, or "auto", where it will be disabled for
 98     // source code, and otherwise enabled.
 99     // 是否自动换行,如果选auto,需要加双引号
100     "word_wrap": "auto",
101
102     // Set to a value other than 0 to force wrapping at that column rather than the
103     // window width
104     // 设置窗口内文字区域的宽度
105     "wrap_width": 0,
106
107     // Set to false to prevent word wrapped lines from being indented to the same
108     // level
109     // 防止被缩进到同一级的字换行
110     "indent_subsequent_lines": true,
111
112     // Draws text centered in the window rather than left aligned
113     // 如果没有定义过,则文件居中显示(比如新建的文件)
114     "draw_centered": false,
115
116     // Controls auto pairing of quotes, brackets etc
117     // 自动匹配引号,括号等
118     "auto_match_enabled": true,
119
120     // Word list to use for spell checking
121     // 拼写检查的单词列表路径
122     "dictionary": "Packages/Language - English/en_US.dic",
123
124     // Set to true to draw a border around the visible rectangle on the minimap.
125     // The color of the border will be determined by the "minimapBorder" key in
126     // the color scheme
127     // 代码地图的可视区域部分是否加上边框,边框的颜色可在配色方案上加入minimapBorder键
128     "draw_minimap_border": false,
129
130     // If enabled, will highlight any line with a caret
131     // 突出显示当前光标所在的行
132     "highlight_line": false,
133
134     // Valid values are "smooth", "phase", "blink", "wide" and "solid".、
135     // 设置光标闪动方式
136     "caret_style": "smooth",
137
138     // Set to false to disable underlining the brackets surrounding the caret
139     // 是否特殊显示当前光标所在的括号、代码头尾闭合标记
140     "match_brackets": true,
141
142     // Set to false if you‘d rather only highlight the brackets when the caret is
143     // next to one
144     // 设为false时,只有光标在括号或头尾闭合标记的两端时,match_brackets才生效
145     "match_brackets_content": true,
146
147     // Set to false to not highlight square brackets. This only takes effect if
148     // match_brackets is true
149     // 是否突出显示圆括号,match_brackets为true生效
150     "match_brackets_square": true,
151
152     // Set to false to not highlight curly brackets. This only takes effect if
153     // match_brackets is true
154     // 是否突出显示大括号,match_brackets为true生效
155     "match_brackets_braces": true,
156
157     // Set to false to not highlight angle brackets. This only takes effect if
158     // match_brackets is true
159     // 是否突出显示尖括号,match_brackets为true生效
160     "match_brackets_angle": false,
161
162     // Enable visualization of the matching tag in HTML and XML
163     // html和xml下突出显示光标所在标签的两端,影响HTML、XML、CSS等
164     "match_tags": true,
165
166     // Highlights other occurrences of the currently selected text
167     // 全文突出显示和当前选中字符相同的字符
168     "match_selection": true,
169
170     // Additional spacing at the top of each line, in pixels
171     // 设置每一行到顶部,以像素为单位的间距,效果相当于行距
172     "line_padding_top": 0,
173
174     // Additional spacing at the bottom of each line, in pixels
175     // 设置每一行到底部,以像素为单位的间距,效果相当于行距
176     "line_padding_bottom": 0,
177
178     // Set to false to disable scrolling past the end of the buffer.
179     // On OS X, this value is overridden in the platform specific settings, so
180     // you‘ll need to place this line in your user settings to override it.
181     // 设置为false时,滚动到文本的最下方时,没有缓冲区
182     "scroll_past_end": true,
183
184     // This controls what happens when pressing up or down when on the first
185     // or last line.
186     // On OS X, this value is overridden in the platform specific settings, so
187     // you‘ll need to place this line in your user settings to override it.
188     // 控制向上或向下到第一行或最后一行时发生什么(没明白也没试出来)
189     "move_to_limit_on_up_down": false,
190
191     // Set to "none" to turn off drawing white space, "selection" to draw only the
192     // white space within the selection, and "all" to draw all white space
193     // 按space或tab时,实际会产生白色的点(一个空格一个点)或白色的横线(tab_size设置的制表符的宽度),选中状态下才能看到
194     // 设置为none时,什么情况下都不显示这些点和线
195     // 设置为selection时,只显示选中状态下的点和线
196     // 设置为all时,则一直显示
197     "draw_white_space": "selection",
198
199     // Set to false to turn off the indentation guides.
200     // The color and width of the indent guides may be customized by editing
201     // the corresponding .tmTheme file, and specifying the colors "guide",
202     // "activeGuide" and "stackGuide"
203     // 制表位的对齐白线是否显示,颜色可在主题文件里设置(guide,activeGuide,stackGuide)
204     "draw_indent_guides": true,
205
206     // Controls how the indent guides are drawn, valid options are
207     // "draw_normal" and "draw_active". draw_active will draw the indent
208     // guides containing the caret in a different color.
209     // 制表位的对齐白线,draw_normal为一直显示,draw_active为只显示当前光标所在的代码控制域
210     "indent_guide_options": ["draw_normal"],
211
212     // Set to true to removing trailing white space on save
213     // 为true时,保存文件时会删除每行结束后多余的空格
214     "trim_trailing_white_space_on_save": false,
215
216     // Set to true to ensure the last line of the file ends in a newline
217     // character when saving
218     // 为true时,保存文件时光标会在文件的最后向下换一行
219     "ensure_newline_at_eof_on_save": false,
220
221     // Set to true to automatically save files when switching to a different file
222     // or application
223     // 切换到其它文件标签或点击其它非本软件区域,文件自动保存
224     "save_on_focus_lost": false,
225
226     // The encoding to use when the encoding can‘t be determined automatically.
227     // ASCII, UTF-8 and UTF-16 encodings will be automatically detected.
228     // 编码时不能自动检测编码时,将自动检测ASCII, UTF-8 和 UTF-16
229     "fallback_encoding": "Western (Windows 1252)",
230
231     // Encoding used when saving new files, and files opened with an undefined
232     // encoding (e.g., plain ascii files). If a file is opened with a specific
233     // encoding (either detected or given explicitly), this setting will be
234     // ignored, and the file will be saved with the encoding it was opened
235     // with.
236     // 默认编码格式
237     "default_encoding": "UTF-8",
238
239     // Files containing null bytes are opened as hexadecimal by default
240     // 包含空字节的文件被打开默认为十六进制
241     "enable_hexadecimal_encoding": true,
242
243     // Determines what character(s) are used to terminate each line in new files.
244     // Valid values are ‘system‘ (whatever the OS uses), ‘windows‘ (CRLF) and
245     // ‘unix‘ (LF only).
246     // 每一行结束的时候用什么字符做终止符
247     "default_line_ending": "system",
248
249     // When enabled, pressing tab will insert the best matching completion.
250     // When disabled, tab will only trigger snippets or insert a tab.
251     // Shift+tab can be used to insert an explicit tab when tab_completion is
252     // enabled.
253     // 设置为enabled时,在一个字符串间按Tab将插入一个制表符
254     // 设置为true时,按Tab会根据前后环境进行代码自动匹配填补
255     "tab_completion": true,
256
257     // Enable auto complete to be triggered automatically when typing.
258     // 代码提示
259     "auto_complete": true,
260
261     // The maximum file size where auto complete will be automatically triggered.
262     // 代码提示的大小限制
263     "auto_complete_size_limit": 4194304,
264
265     // The delay, in ms, before the auto complete window is shown after typing
266     // 代码提示延迟显示
267     "auto_complete_delay": 50,
268
269     // Controls what scopes auto complete will be triggered in
270     // 代码提示的控制范围
271     "auto_complete_selector": "source - comment",
272
273     // Additional situations to trigger auto complete
274     // 触发代码提示的其他情况
275     "auto_complete_triggers": [ {"selector": "text.html", "characters": "<"} ],
276
277     // By default, auto complete will commit the current completion on enter.
278     // This setting can be used to make it complete on tab instead.
279     // Completing on tab is generally a superior option, as it removes
280     // ambiguity between committing the completion and inserting a newline.
281     // 设为false时,选择提示的代码按回车或点击可以输出出来,但选择true时不会输出而是直接换行
282     "auto_complete_commit_on_tab": false,
283
284     // Controls if auto complete is shown when snippet fields are active.
285     // Only relevant if auto_complete_commit_on_tab is true.
286     // auto_complete_commit_on_tab必须为true,控制代码提示的活跃度
287     "auto_complete_with_fields": false,
288
289     // By default, shift+tab will only unindent if the selection spans
290     // multiple lines. When pressing shift+tab at other times, it‘ll insert a
291     // tab character - this allows tabs to be inserted when tab_completion is
292     // enabled. Set this to true to make shift+tab always unindent, instead of
293     // inserting tabs.
294     // 设置为false,使用Shift + tab总是插入制表符
295     "shift_tab_unindent": false,
296
297     // If true, the copy and cut commands will operate on the current line
298     // when the selection is empty, rather than doing nothing.
299     //复制与剪切的
300     "copy_with_empty_selection": true,
301
302     // If true, the selected text will be copied into the find panel when it‘s
303     // shown.
304     // On OS X, this value is overridden in the platform specific settings, so
305     // you‘ll need to place this line in your user settings to override it.
306     // 选中的文本按Ctrl + f时,自动复制到查找面板的文本框里
307     "find_selected_text": true,
308
309     // When drag_text is enabled, clicking on selected text will begin a
310     // drag-drop operation
311     //拖动文本
312     "drag_text": true,
313
314     //
315     // User Interface Settings
316     //
317
318     // The theme controls the look of Sublime Text‘s UI (buttons, tabs, scroll bars, etc)
319     //主题
320     "theme": "Default.sublime-theme",
321
322     // Set to 0 to disable smooth scrolling. Set to a value between 0 and 1 to
323     // scroll slower, or set to larger than 1 to scroll faster
324     // 滚动的速度
325     "scroll_speed": 1.0,
326
327     // Controls side bar animation when expanding or collapsing folders
328     // 左边边栏文件夹动画
329     "tree_animation_enabled": true,
330
331     // Makes tabs with modified files more visible
332     //高亮未保存文件
333     "highlight_modified_tabs": false,
334     // 标签页的关闭按钮
335     "show_tab_close_buttons": true,
336
337     // Show folders in the side bar in bold
338     //在侧边栏显示文件夹
339     "bold_folder_labels": false,
340
341     // OS X 10.7 only: Set to true to disable Lion style full screen support.
342     // Sublime Text must be restarted for this to take effect.
343     //开启全屏,针对 OS X 10.7
344     "use_simple_full_screen": false,
345
346     // OS X only. Valid values are true, false, and "auto". Auto will enable
347     // the setting when running on a screen 2880 pixels or wider (i.e., a
348     // Retina display). When this setting is enabled, OpenGL is used to
349     // accelerate drawing. Sublime Text must be restarted for changes to take
350     // effect.
351     //针对OS X,使用OpenGL画图,需重启
352     "gpu_window_buffer": "auto",
353
354     // Valid values are "system", "enabled" and "disabled"
355     //延迟滚动条
356     "overlay_scroll_bars": "system",
357
358     //
359     // Application Behavior Settings
360     //
361
362     // Exiting the application with hot_exit enabled will cause it to close
363     // immediately without prompting. Unsaved modifications and open files will
364     // be preserved and restored when next starting.
365     //
366     // Closing a window with an associated project will also close the window
367     // without prompting, preserving unsaved changes in the workspace file
368     // alongside the project.
369     // 热退出功能!退出时不会提示是否保存文件,而是直接退出
370     "hot_exit": true,
371
372     // remember_open_files makes the application start up with the last set of
373     // open files. Changing this to false will have no effect if hot_exit is
374     // true
375     //记忆之前打开的文件
376     "remember_open_files": true,
377
378     // OS X only: When files are opened from finder, or by dragging onto the
379     // dock icon, this controls if a new window is created or not.
380     //始终在新窗口打开文件,针对OS X
381     "open_files_in_new_window": true,
382
383     // OS X only: This controls if an empty window is created at startup or not.
384     //在打开程序的时候新建窗口,针对OS X
385     "create_window_at_startup": true,
386
387     // Set to true to close windows as soon as the last file is closed, unless
388     // there‘s a folder open within the window. This is always enabled on OS X,
389     // changing it here won‘t modify the behavior.
390     //当没有文件时,关闭程序,针对Windows
391     "close_windows_when_empty": false,
392
393     // Show the full path to files in the title bar.
394     // On OS X, this value is overridden in the platform specific settings, so
395     // you‘ll need to place this line in your user settings to override it.
396     //在标题栏显示绝对路径
397     "show_full_path": true,
398
399     // Shows the Build Results panel when building. If set to false, the Build
400     // Results can be shown via the Tools/Build Results menu.
401     "show_panel_on_build": true,
402
403     // Preview file contents when clicking on a file in the side bar. Double
404     // clicking or editing the preview will open the file and assign it a tab.
405     //在侧边栏预览文件
406     "preview_on_click": true,
407
408     // folder_exclude_patterns and file_exclude_patterns control which files
409     // are listed in folders on the side bar. These can also be set on a per-
410     // project basis.
411     // 哪些文件会被显示到边栏上
412     "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"],
413     "file_exclude_patterns": ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db"],
414     // These files will still show up in the side bar, but won‘t be included in
415     // Goto Anything or Find in Files
416     "binary_file_patterns": ["*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
417
418     // List any packages to ignore here. When removing entries from this list,
419     // a restart may be required if the package contains plugins.
420     // 删除你想要忽略的插件,需要重启
421     "ignored_packages": ["Vintage"]
422 }

接下来就是它的最强项,插件的安装:
插件的安装有两个办法:

(1)直接把插件放到它的安装路径对应文件包packages里面去,不知道在哪的可以直接打开 preferences->Browse packages

放进去之后软件会自动检测

(2)使用命令方式直接让软件自己下载安装。(使用package control组件)

按下Ctrl+Shift+P调出命令面板,输入install, 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。(这一步你要先安装下面那个package control插件)

常用插件:

(1)package control

通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台

然后粘贴对应的版本代码进去,然后回车让它安装~

适用于 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)ifnotos.path.exists(ipp)elseNone;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‘)

当然了,有些时候这样你安装不进去的,就只能自个去下载安装包放到package文件里边去了(就是上边我说的那个文件夹)
如果在Preferences → Package Settings 中看到 Package Control 这一项,说明安装成功。这样:

好了接下来我们就可以直接用它来安装插件了~

(2)举个例子吧:比如这个插件 Alignment(代码补齐) 

补齐就是补齐~就像这样

你可以去插件库下载:https://github.com/wbond/sublime_alignment

然后把它放到package文件包中。

如果没用过Github的朋友不知道在哪里下载..看这个图~

然后把它解压,把文件夹放进package文件包,然后它就能检测到包啦~体验一下

 然后介绍一下命令的方式,键入Ctrl+shift+p  输入install  选择package install 过几秒会弹出另一个框。

然后在输入框中输入你想要的插件关键字就行,然后就选择安装吧~

大致就是这样,简单明了。下面介绍其他常用插件,安装方式同理~

(3)Zen Coding(现已改名为Emmet) 下载:https://github.com/sergeche/emmet-sublime

zen coding 就是通过简单的命令直接生成一大段代码!一个字又快又准~

安装好插件后,使用Ctrl + Alt + Enter 呼出ZenCoding。

我们可以用 div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话,生成下面一段代码:

更多的技巧就自己去学学吧~

(4)ColorPicker(调色盘) 下载:https://github.com/weslly/ColorPicker

在编辑CSS样式的时候,ColorPicker可以让sublime text 内置一个调色盘,调好颜色,点击OK就会在光标处生成十六进制颜色代码。

(5)SublimeTmpl(自定义新建文件) 下载:https://github.com/kairyou/SublimeTmpl

  默认已经添加了html、css、js等常见类型的面板,按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建这 3钟类型的文件,快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates,可修改。 比如下边简单的html文件

(6)

BracketHighlighter高亮显示匹配的括号、引号和标签

BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签,能匹配的[] ,  () ,  {} ,  "" ,  ‘‘ , <tag></tag>等甚至是自定义的标签,当看到密密麻麻的代码分不清标签之间包容嵌套的关系时,这款插件就能很好地帮你理清楚代码结构,快速定位括号,引号和标签内的范围。

(7)

还有更多插件,可以自行去搜索下载~我没时间了要出去了 T_T...

比如:

其他插件:

Clipboard-history(粘贴板历史记录) 下载:https://github.com/kemayo/sublime-text-2-clipboard-history   

CSScomb(CSS属性排序) 下载:https://github.com/csscomb/CSScomb-for-Sublime   

Gits(集成 GitHub) 下载:https://github.com/kemayo/sublime-text-git   

Hex-to-HSL-Color Hex(颜色模式转HSL颜色模式)  下载:https://github.com/atadams/Hex-to-HSL-Color   

HtmlTidy(清理与排版你的HTML代码)  下载:https://github.com/welovewordpress/SublimeHtmlTidy   

JsFormat(javascript格式化) 下载:https://github.com/jdc0589/JsFormat   

PHPTidy(整理与排版PHP代码) 下载:https://github.com/welovewordpress/SublimePhpTidy   

SideBarEnhancements(侧边栏增强) 下载:https://github.com/titoBouzout/SideBarEnhancements   

SublimeLinter(代码错误提示) 下载:https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3   

SFTP(编辑 FTP 或 SFTP 服务器上的文件) 下载:http://wbond.net/sublime_packages/sftp     

Tradsim(中文繁字体和简体字转换) 下载:https://github.com/erinata/SublimeTradsim   

TrailingSpacer(高亮显示多余的空格和Tab) 下载:https://github.com/SublimeText/TrailingSpaces   

YUI Compressor(压缩JS和CSS文件) 下载:https://github.com/kairyou/SublimeYUICompressor

---------先到这里了----------

时间: 2024-11-14 11:13:15

前端神器之Sublime Text2/3简单明了使用总结的相关文章

sublime Text2——轻量级前端编辑器

之前在知乎上搜索好用的前端开发工具,投票最多的是webStrom,试用过后发现果真好用,代码补全,代码检查,支持主流的版本控制,比如git,svn等等.但是毕竟是一款集成的IDE,启动速度慢.吃内存是不争的事实. sublime text2就弥补了这个不足,轻量级,秒速启动,不吃内存.而且有许多给力的插件包,可以根据需要配置成强有力的编辑神器,我主要用他来写html.javascript,下面是具体的配置步骤: 1.下载安装sublime text2 http://www.sublimetext

前端开发工程师必备编辑器:Sublime Text2

Sublime Text2有这么几个优点: 1.速度飞快.2.界面简洁.3.功能强大.4.插件众多.5.快捷键多.6.可以不保存关闭下次再开编辑.7.界面好看,可定制. 当然它最重要的还是插件众多,使得它的功能庞大. 安装Sublime Text 2插件的方法: 1.直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 2.使用Package Control组件安装 也可以安装package

设置sublime text2/3中默认预览浏览器快捷键的方法

各位前端大神们,大家在用IDE编辑器的时候喜欢用哪些呢?是Dreamweaver.Zend Studio.editplus又或者是sublime text?今天马浩周给大家就要说说设置sublime text2/3中默认预览浏览器快捷键的方法了,可能你早都设置了,(设置好的自动忽略).此篇文章讲给sublime text的使用新手们. 我们为什么要设置默认的预览浏览器呢?因为搞前端的都知道,你在预览的时候不可能只预览一个浏览器,可能需要多个,当然今天我们举例中会说道谷歌浏览器Chrome,IE浏

sublime text2教程

代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 我用过的编辑器不少,真不少- 但却没有哪款让我特别心仪的,直到我遇到了 Sublime Text 2 !如果说“神器”是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号.它小巧绿色且速度非常快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮.代码补全等,

转 Sublime text2 常用插件集锦

No.01 – Emmet Emmet 是一个前端开发的利器,其前身是Zen Coding.它让编写 HTML 代码变得简单.Emmet 的基本用法是:输入简写形式,然后按 Tab 键. 关于 Emmet 的更多用法,请看官方文档,这份速查表可以帮你快速记忆简写形式. No.02 – SublimeLinter SublimeLinter 是一个代码校验插件,它可以帮你找出错误或编写不规范的代码,支持 C/C++.CoffeeScript.CSS.Git Commit Messages.Haml

用Sublime Text2搭建VC编译环境

用惯了臃肿的VS2013,有时候想写个小项目,小测试程序,编辑浏览代码什么的不想 总打开它,于是我折腾了一下Sublime Text2 这款现代化高大上的强大代码编辑器,它的定位 在于绿色轻巧,速度快,且跨平台支持Win/Mac/Linux,支持32与64位,但它需要配合众多 的插件一起使用,所以比较适合喜欢折腾的人. 另外,Sublime Text2 通常用于前端开发,例如HTML,PHP神马的,亦或者是写些脚本神马的, 像Lua, Js之类的,但估计用它来写VC的还真不多,毕竟有VS这等便利

Sublime text2 常用插件集锦

No.01 – EmmetEmmet 是一个前端开发的利器,其前身是Zen Coding.它让编写 HTML 代码变得简单.Emmet 的基本用法是:输入简写形式,然后按 Tab 键.关于 Emmet 的更多用法,请看官方文档,这份速查表可以帮你快速记忆简写形式. No.02 – SublimeLinterSublimeLinter 是一个代码校验插件,它可以帮你找出错误或编写不规范的代码,支持 C/C++.CoffeeScript.CSS.Git Commit Messages.Haml.HT

设置sublime text2/3中预览浏览器快捷键的方法

我们为什么要设置默认的预览浏览器呢?因为搞前端的都知道,你在预览的时候不可能只预览一个浏览器,可能需要多个,当然今天我们举例中会说道谷歌浏览器Chrome,IE浏览器Internet Explorer,火狐浏览器Firefox:为什么选择这三个呢?因为他们就是我们最常用的浏览器啦.别说你没有用过! 先科(an)普(li)一下sublime text:(取自百科) Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编

Sublime Text2 使用心得总结

sublime text2是开发代码编辑的神器 ,编辑器界面优美,操作速度快速.而且Sublime Text2是一款跨平台的编辑器,再也不用为换平台而找不到合适的.熟悉的编辑器担忧了. Sublime Text2 是一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受. 两个小技巧:选择文字之后,按下 Tab 和 Shift + Tab 可以控制缩进,和 EmEditor 一样,内牛.文件未保存就可以直接退出程序,下次启