<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

        前端神器之SublimeText2/3簡單明了使用總結(jié)_html/css_WEB-ITnose

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 16:02:56
        文檔

        前端神器之SublimeText2/3簡單明了使用總結(jié)_html/css_WEB-ITnose

        前端神器之SublimeText2/3簡單明了使用總結(jié)_html/css_WEB-ITnose:為什么叫神器呢? 我總結(jié)如下: 第一:也是最重要的,它占內(nèi)存很小(就如同notepad++那般迅速打開,所以那款其實也不錯~)。一般IDE比如WebStorm(它也是一款神器來著),Aptana(也比較常用),還有前后結(jié)合的Zend Studio 等都略顯臃腫,打開太慢,耗內(nèi)存太大
        推薦度:
        導(dǎo)讀前端神器之SublimeText2/3簡單明了使用總結(jié)_html/css_WEB-ITnose:為什么叫神器呢? 我總結(jié)如下: 第一:也是最重要的,它占內(nèi)存很小(就如同notepad++那般迅速打開,所以那款其實也不錯~)。一般IDE比如WebStorm(它也是一款神器來著),Aptana(也比較常用),還有前后結(jié)合的Zend Studio 等都略顯臃腫,打開太慢,耗內(nèi)存太大

        為什么叫神器呢?

        我總結(jié)如下:

        第一:也是最重要的,它占內(nèi)存很小(就如同notepad++那般迅速打開,所以那款其實也不錯~)。一般IDE比如WebStorm(它也是一款神器來著),Aptana(也比較常用),還有前后結(jié)合的Zend Studio 等都略顯臃腫,打開太慢,耗內(nèi)存太大。

        第二:主題豐富,漂亮的界面。各式各樣的主題可以滿足你的視覺美。

        第三:支持的插件豐富多樣。很多插件都能讓你獲得不一樣的體驗。

        第四:支持命令快捷鍵方式。就如同vim那般有廣闊的命令快捷。

        好吧,那就來下載安裝吧。

        Sublime Text2或者3都沒關(guān)系,3也只是作為2的beta版本,所以還是推薦3吧,支持新版嘛。2和3在使用方法功能上也有差異~

        (1)你可以去官網(wǎng)下載對應(yīng)版本,但可能需要輸入序列號什么的。

        訪問http://www.sublimetext.com/2下載2.x版本。

          或從http://www.sublimetext.com/3下載3.x版本。

          注冊碼(僅供個人非商業(yè)應(yīng)用):

          

        ----- 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)一般官網(wǎng)下來的都是英文原版的,可以網(wǎng)上找些中文包放進去就行了。你也可以直接去其他網(wǎng)站下載Sublime Text,一般下下來就可以直接使用了。

        先來基本配置

        基本配置可以在窗口布局的那幾個選項自己設(shè)定,當(dāng)然也可以在配置文件里邊直接開干。

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

        因為user的可以覆蓋default的,而且你重裝啊什么的也不怕被抹掉,所以推薦你直接寫進setting user里邊

        我是text3 中文版的:

        直接在里邊寫點配置信息就行了,比如:

        { //字體大小 "font_size": 11.0, //字體類型 "font_face": "微軟雅黑", // 設(shè)置每一行到頂部,以像素為單位的間距,效果相當(dāng)于行距 "line_padding_top": 2, // 設(shè)置每一行到底部,以像素為單位的間距,效果相當(dāng)于行距 "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" ] }

        下邊總結(jié)了一些更多的配置信息,需要的可打開看看~

         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關(guān)閉反鋸齒 23 // subpixel_antialias和no_round是OS X系統(tǒng)獨有的 24 // directwrite是Windows系統(tǒng)獨有的 25 "font_options": [], 26 27 // Characters that are considered to separate words 28 // 在文字上雙擊會全選當(dāng)前的內(nèi)容,如果里面出現(xiàn)以下字符,就會被截斷 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 //列顯示垂直標尺,在中括號里填入數(shù)字,寬度按字符計算 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 // 設(shè)為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設(shè)置為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 // 顯示對齊的白線是否根據(jù)回車、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 the103 // window width104 // 設(shè)置窗口內(nèi)文字區(qū)域的寬度105 "wrap_width": 0,106 107 // Set to false to prevent word wrapped lines from being indented to the same108 // level109 // 防止被縮進到同一級的字換行110 "indent_subsequent_lines": true,111 112 // Draws text centered in the window rather than left aligned113 // 如果沒有定義過,則文件居中顯示(比如新建的文件)114 "draw_centered": false,115 116 // Controls auto pairing of quotes, brackets etc117 // 自動匹配引號,括號等118 "auto_match_enabled": true,119 120 // Word list to use for spell checking121 // 拼寫檢查的單詞列表路徑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 in126 // the color scheme127 // 代碼地圖的可視區(qū)域部分是否加上邊框,邊框的顏色可在配色方案上加入minimapBorder鍵128 "draw_minimap_border": false,129 130 // If enabled, will highlight any line with a caret131 // 突出顯示當(dāng)前光標所在的行132 "highlight_line": false,133 134 // Valid values are "smooth", "phase", "blink", "wide" and "solid".、135 // 設(shè)置光標閃動方式136 "caret_style": "smooth",137 138 // Set to false to disable underlining the brackets surrounding the caret139 // 是否特殊顯示當(dāng)前光標所在的括號、代碼頭尾閉合標記140 "match_brackets": true,141 142 // Set to false if you'd rather only highlight the brackets when the caret is143 // next to one144 // 設(shè)為false時,只有光標在括號或頭尾閉合標記的兩端時,match_brackets才生效145 "match_brackets_content": true,146 147 // Set to false to not highlight square brackets. This only takes effect if148 // match_brackets is true149 // 是否突出顯示圓括號,match_brackets為true生效150 "match_brackets_square": true,151 152 // Set to false to not highlight curly brackets. This only takes effect if153 // match_brackets is true154 // 是否突出顯示大括號,match_brackets為true生效155 "match_brackets_braces": true,156 157 // Set to false to not highlight angle brackets. This only takes effect if158 // match_brackets is true159 // 是否突出顯示尖括號,match_brackets為true生效160 "match_brackets_angle": false,161 162 // Enable visualization of the matching tag in HTML and XML163 // html和xml下突出顯示光標所在標簽的兩端,影響HTML、XML、CSS等164 "match_tags": true,165 166 // Highlights other occurrences of the currently selected text167 // 全文突出顯示和當(dāng)前選中字符相同的字符168 "match_selection": true,169 170 // Additional spacing at the top of each line, in pixels171 // 設(shè)置每一行到頂部,以像素為單位的間距,效果相當(dāng)于行距172 "line_padding_top": 0,173 174 // Additional spacing at the bottom of each line, in pixels175 // 設(shè)置每一行到底部,以像素為單位的間距,效果相當(dāng)于行距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, so180 // you'll need to place this line in your user settings to override it.181 // 設(shè)置為false時,滾動到文本的最下方時,沒有緩沖區(qū)182 "scroll_past_end": true,183 184 // This controls what happens when pressing up or down when on the first185 // or last line.186 // On OS X, this value is overridden in the platform specific settings, so187 // you'll need to place this line in your user settings to override it.188 // 控制向上或向下到第一行或最后一行時發(fā)生什么(沒明白也沒試出來)189 "move_to_limit_on_up_down": false,190 191 // Set to "none" to turn off drawing white space, "selection" to draw only the192 // white space within the selection, and "all" to draw all white space193 // 按space或tab時,實際會產(chǎn)生白色的點(一個空格一個點)或白色的橫線(tab_size設(shè)置的制表符的寬度),選中狀態(tài)下才能看到194 // 設(shè)置為none時,什么情況下都不顯示這些點和線195 // 設(shè)置為selection時,只顯示選中狀態(tài)下的點和線196 // 設(shè)置為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 editing201 // the corresponding .tmTheme file, and specifying the colors "guide",202 // "activeGuide" and "stackGuide"203 // 制表位的對齊白線是否顯示,顏色可在主題文件里設(shè)置(guide,activeGuide,stackGuide)204 "draw_indent_guides": true,205 206 // Controls how the indent guides are drawn, valid options are207 // "draw_normal" and "draw_active". draw_active will draw the indent208 // guides containing the caret in a different color.209 // 制表位的對齊白線,draw_normal為一直顯示,draw_active為只顯示當(dāng)前光標所在的代碼控制域210 "indent_guide_options": ["draw_normal"],211 212 // Set to true to removing trailing white space on save213 // 為true時,保存文件時會刪除每行結(jié)束后多余的空格214 "trim_trailing_white_space_on_save": false,215 216 // Set to true to ensure the last line of the file ends in a newline217 // character when saving218 // 為true時,保存文件時光標會在文件的最后向下?lián)Q一行219 "ensure_newline_at_eof_on_save": false,220 221 // Set to true to automatically save files when switching to a different file222 // or application223 // 切換到其它文件標簽或點擊其它非本軟件區(qū)域,文件自動保存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-16229 "fallback_encoding": "Western (Windows 1252)",230 231 // Encoding used when saving new files, and files opened with an undefined232 // encoding (e.g., plain ascii files). If a file is opened with a specific233 // encoding (either detected or given explicitly), this setting will be234 // ignored, and the file will be saved with the encoding it was opened235 // with.236 // 默認編碼格式237 "default_encoding": "UTF-8",238 239 // Files containing null bytes are opened as hexadecimal by default240 // 包含空字節(jié)的文件被打開默認為十六進制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) and245 // 'unix' (LF only).246 // 每一行結(jié)束的時候用什么字符做終止符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 is252 // enabled.253 // 設(shè)置為enabled時,在一個字符串間按Tab將插入一個制表符254 // 設(shè)置為true時,按Tab會根據(jù)前后環(huán)境進行代碼自動匹配填補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 typing266 // 代碼提示延遲顯示267 "auto_complete_delay": 50,268 269 // Controls what scopes auto complete will be triggered in270 // 代碼提示的控制范圍271 "auto_complete_selector": "source - comment",272 273 // Additional situations to trigger auto complete274 // 觸發(fā)代碼提示的其他情況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 removes280 // ambiguity between committing the completion and inserting a newline.281 // 設(shè)為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 spans290 // multiple lines. When pressing shift+tab at other times, it'll insert a291 // tab character - this allows tabs to be inserted when tab_completion is292 // enabled. Set this to true to make shift+tab always unindent, instead of293 // inserting tabs.294 // 設(shè)置為false,使用Shift + tab總是插入制表符295 "shift_tab_unindent": false,296 297 // If true, the copy and cut commands will operate on the current line298 // when the selection is empty, rather than doing nothing.299 //復(fù)制與剪切的300 "copy_with_empty_selection": true,301 302 // If true, the selected text will be copied into the find panel when it's303 // shown.304 // On OS X, this value is overridden in the platform specific settings, so305 // you'll need to place this line in your user settings to override it.306 // 選中的文本按Ctrl + f時,自動復(fù)制到查找面板的文本框里307 "find_selected_text": true,308 309 // When drag_text is enabled, clicking on selected text will begin a310 // drag-drop operation311 //拖動文本312 "drag_text": true,313 314 //315 // User Interface Settings316 //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 to323 // scroll slower, or set to larger than 1 to scroll faster324 // 滾動的速度325 "scroll_speed": 1.0,326 327 // Controls side bar animation when expanding or collapsing folders328 // 左邊邊欄文件夾動畫329 "tree_animation_enabled": true,330 331 // Makes tabs with modified files more visible332 //高亮未保存文件333 "highlight_modified_tabs": false,334 // 標簽頁的關(guān)閉按鈕335 "show_tab_close_buttons": true,336 337 // Show folders in the side bar in bold338 //在側(cè)邊欄顯示文件夾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.7344 "use_simple_full_screen": false,345 346 // OS X only. Valid values are true, false, and "auto". Auto will enable347 // the setting when running on a screen 2880 pixels or wider (i.e., a348 // Retina display). When this setting is enabled, OpenGL is used to349 // accelerate drawing. Sublime Text must be restarted for changes to take350 // 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 Settings360 //361 362 // Exiting the application with hot_exit enabled will cause it to close363 // immediately without prompting. Unsaved modifications and open files will364 // be preserved and restored when next starting.365 //366 // Closing a window with an associated project will also close the window367 // without prompting, preserving unsaved changes in the workspace file368 // alongside the project.369 // 熱退出功能!退出時不會提示是否保存文件,而是直接退出370 "hot_exit": true,371 372 // remember_open_files makes the application start up with the last set of373 // open files. Changing this to false will have no effect if hot_exit is374 // true375 //記憶之前打開的文件376 "remember_open_files": true,377 378 // OS X only: When files are opened from finder, or by dragging onto the379 // dock icon, this controls if a new window is created or not.380 //始終在新窗口打開文件,針對OS X381 "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 X385 "create_window_at_startup": true,386 387 // Set to true to close windows as soon as the last file is closed, unless388 // 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 //當(dāng)沒有文件時,關(guān)閉程序,針對Windows391 "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, so395 // 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 Build400 // 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. Double404 // clicking or editing the preview will open the file and assign it a tab.405 //在側(cè)邊欄預(yù)覽文件406 "preview_on_click": true,407 408 // folder_exclude_patterns and file_exclude_patterns control which files409 // 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 in415 // Goto Anything or Find in Files416 "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)直接把插件放到它的安裝路徑對應(yīng)文件包packages里面去,不知道在哪的可以直接打開 preferences->Browse packages

        放進去之后軟件會自動檢測

        (2)使用命令方式直接讓軟件自己下載安裝。(使用package control組件)

        按下Ctrl+Shift+P調(diào)出命令面板,輸入install, 調(diào)出 Install Package 選項并回車,然后在列表中選中要安裝的插件。(這一步你要先安裝下面那個package control插件)

        常用插件:

        (1)package control

        通過快捷鍵 ctrl+` 或者 View > Show Console 菜單打開控制臺

        然后粘貼對應(yīng)的版本代碼進去,然后回車讓它安裝~

        適用于 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')

        當(dāng)然了,有些時候這樣你安裝不進去的,就只能自個去下載安裝包放到package文件里邊去了(就是上邊我說的那個文件夾)
        如果在Preferences → Package Settings 中看到 Package Control 這一項,說明安裝成功。這樣:

        好了接下來我們就可以直接用它來安裝插件了~

        (2)舉個例子吧:比如這個插件 Alignment(代碼補齊) 

        補齊就是補齊~就像這樣

        你可以去插件庫下載:https://github.com/wbond/sublime_alignment

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

        如果沒用過Github的朋友不知道在哪里下載..看這個圖~

        然后把它解壓,把文件夾放進package文件包,然后它就能檢測到包啦~體驗一下

        然后介紹一下命令的方式,鍵入Ctrl+shift+p 輸入install 選擇package install 過幾秒會彈出另一個框。

        然后在輸入框中輸入你想要的插件關(guān)鍵字就行,然后就選擇安裝吧~

        大致就是這樣,簡單明了。下面介紹其他常用插件,安裝方式同理~

        (3)Zen Coding(現(xiàn)已改名為Emmet) 下載:https://github.com/sergeche/emmet-sublime

        zen coding 就是通過簡單的命令直接生成一大段代碼!一個字又快又準~

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

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

        更多的技巧就自己去學(xué)學(xué)吧~

        (4)ColorPicker(調(diào)色盤) 下載:https://github.com/weslly/ColorPicker

        在編輯CSS樣式的時候,ColorPicker可以讓sublime text 內(nèi)置一個調(diào)色盤,調(diào)好顏色,點擊OK就會在光標處生成十六進制顏色代碼。

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

          默認已經(jīng)添加了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這個插件能在左側(cè)高亮顯示匹配的括號、引號和標簽,能匹配的[] , () , {} , "" , '' , 等甚至是自定義的標簽,當(dāng)看到密密麻麻的代碼分不清標簽之間包容嵌套的關(guān)系時,這款插件就能很好地幫你理清楚代碼結(jié)構(gòu),快速定位括號,引號和標簽內(nèi)的范圍。

        (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(顏色模式轉(zhuǎn)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(側(cè)邊欄增強) 下載:https://github.com/titoBouzout/SideBarEnhancements   

        SublimeLinter(代碼錯誤提示) 下載:https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3   

        SFTP(編輯 FTP 或 SFTP 服務(wù)器上的文件) 下載:http://wbond.net/sublime_packages/sftp   

        Tradsim(中文繁字體和簡體字轉(zhuǎn)換) 下載:https://github.com/erinata/SublimeTradsim   

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

        YUI Compressor(壓縮JS和CSS文件) 下載:https://github.com/kairyou/SublimeYUICompressor

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

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        前端神器之SublimeText2/3簡單明了使用總結(jié)_html/css_WEB-ITnose

        前端神器之SublimeText2/3簡單明了使用總結(jié)_html/css_WEB-ITnose:為什么叫神器呢? 我總結(jié)如下: 第一:也是最重要的,它占內(nèi)存很小(就如同notepad++那般迅速打開,所以那款其實也不錯~)。一般IDE比如WebStorm(它也是一款神器來著),Aptana(也比較常用),還有前后結(jié)合的Zend Studio 等都略顯臃腫,打開太慢,耗內(nèi)存太大
        推薦度:
        標簽: 神器 html css
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲女同成人AⅤ人片在线观看| 免费h成人黄漫画嘿咻破解版| 国产精品黄页免费高清在线观看| 国产精品亚洲精品日韩动图| 亚洲高清毛片一区二区| 国产91在线|亚洲| 亚洲国产精品久久久久秋霞小| 日本黄色动图免费在线观看| 无码av免费毛片一区二区 | 亚洲一卡2卡三卡4卡无卡下载| WWW亚洲色大成网络.COM| www在线观看播放免费视频日本| 色吊丝最新永久免费观看网站| 四虎免费永久在线播放| 亚洲色偷偷综合亚洲AVYP| 久久伊人久久亚洲综合| 亚洲国产精品成人久久久| 国产午夜亚洲精品不卡免下载| 黄瓜视频高清在线看免费下载| 亚洲精品亚洲人成在线观看下载 | 久久综合久久综合亚洲| 男女交性无遮挡免费视频| a级片免费在线播放| 免费无码A片一区二三区| 久久久久亚洲精品日久生情| 黄网站色视频免费看无下截| 一级毛片**不卡免费播| 永久在线毛片免费观看| 亚洲国产成人久久精品软件 | 曰韩无码AV片免费播放不卡| 57pao一国产成视频永久免费| 日本一道本高清免费| 亚洲国产精品嫩草影院在线观看| 亚洲乱人伦精品图片| 久久久免费观成人影院| 99精品国产免费久久久久久下载| 在线亚洲人成电影网站色www| 亚洲午夜无码久久| 国产成人免费片在线视频观看| 久久久久亚洲AV成人片| 成人免费夜片在线观看|