前端神器之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": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?",
 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 }
View Code

 

接下來就是它的最強項,插件的安裝:
插件的安裝有兩個辦法:

(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

 

---------先到這里了----------

 

關注公眾號

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2023 CODEPRJ.COM