sublime text3插件使用

時間 2019-11-24

原文原文鏈接

sublime text 使用BUG解決javascript

1、安裝emmet、Package Control插件
ctrl+shift+p -> install package ->emmet(Zen Coding)[默認安裝文件路徑F:\Sublime Text 3\Data\Installed Packages]css

安裝Package Control插件html

報錯狀況 Package Control:There are no packages available for installation
直接將文件放到Sublime Text\Data\Packages\Package Control下面重啓sublime軟件便可前端

2、Sublime Text 打開Preferences--->Settings-User配置java

{
	"ignored_packages":
	[
		"Vintage"
	],
	"font_size": 12,
	// 左側列表中文文件名顯示方框
	"dpi_scale": 1.0,
	// 自動換行
	"word_wrap" : true,
	// 文件失去焦點自動保存文件
	"save_on_focus_lost": true,
	// 關閉軟件更新提示
	"update_check": false
}

3、設置F12預覽快捷鍵node

一、點擊菜單Tools -> New Plugin...（工具->新插件…），在建立好的py文件輸入下列內容：python

import sublime, sublime_plugin
import webbrowser
 
url_map = {
    '/Users/jerry/Sites/test/' : 'http://test/',
}
 
class OpenBrowserCommand(sublime_plugin.TextCommand):
    def run(self,edit):
        window = sublime.active_window()
        window.run_command('save')
        url = self.view.file_name()
        for path, domain in url_map.items():
            if url.startswith(path):
                url = url.replace(path, domain).replace('\\', '\/')
                break
 
        webbrowser.open_new(url)

將文件保存到Packages/User目錄（Packages可經過菜單裏的Browser Packages...打開），文件名隨意，如open_browser.py。插件部分完工了。ios

二、接下來，爲剛纔的插件分配快捷鍵。點菜單Tools -> Command Palette...（工具- >命令面板…），或者shift+cmd+p，打開命令集，選擇「key Bindings - User」（手動輸入 key Bindings就會出現相應提示）打開我的快捷鍵配置，輸入下列內容：css3

[{ "keys": ["f12"], "command": "open_browser" }]

---------------------------------------------------------------------------------------------------------------------------------------------------------git

sublime text 插件

1、auto_save文件自動保存

打開Preferences--->Package-Settings--->Auto_save--->Settings-Use配置裏面添加

{ 
    "auto_save_on_modified": true,
    "auto_save_delay_in_seconds":5 
}

2、Terminal運行框

打開cmd窗口配置

打開Preferences--->Package-Settings--->Terminal--->Settings-Use配置裏面添加

{
　　//window下終端路徑
　　"terminal": "C:\\windows\\system32\\cmd.exe",
　　//window下終端參數
　　"parameters": ["/START", "%CWD%"]
}

{
  //mac 下配置終端  
  "terminal": "Terminal.sh",
  "parameters": ["--open-in-tab"]
}

打開git bash窗口配置

打開Preferences--->Package-Settings--->Terminal--->Settings-Use配置裏面添加

{

　　// The command to execute for the terminal, leave blank for the OS default
　　// On OS X the terminal can be set to iTerm.sh to execute iTerm
　　// "terminal": "C:\\Program Files (x86)\\Git\\bin\\sh.exe",
　　"terminal": "D:\\Git\\bin\\sh.exe",

　　// A list of default parameters to pass to the terminal, this can be
　　// overridden by passing the "parameters" key with a list value to the args
　　// dict when calling the "open_terminal" or "open_terminal_project_folder"
　　// commands
　　// "parameters": ["-c", "cd \"%CWD%\" && \"C:\\Program Files (x86)\\Git\\bin\\sh.exe\" -i -l"]
　　"parameters": ["-c", "cd \"%CWD%\" && \"D:\\Git\\bin\\sh.exe\" -i -l"]

}

打開cmder窗口配置

a、把 Cmder 加到環境變量

把Cmder.exe存放的目錄添加到系統環境變量；加完以後,Win+r一下輸入cmder,便可。

b、添加 cmder 到右鍵菜單添加後在任意文件夾中便可打開Cmder，上一步的把 Cmder 加到環境變量就是爲此服務的, 在管理員權限的終端輸入如下語句便可: Cmder.exe /REGISTER ALL

打開Preferences--->Package-Settings--->Terminal--->Settings-Use配置裏面添加

{

　　// The command to execute for the terminal, leave blank for the OS default
　　// On OS X the terminal can be set to iTerm.sh to execute iTerm
　　// "terminal": "C:\\Program Files (x86)\\Git\\bin\\sh.exe",
　　"terminal": "E:\\cmder\\Cmder.exe",

　　// A list of default parameters to pass to the terminal, this can be
　　// overridden by passing the "parameters" key with a list value to the args
　　// dict when calling the "open_terminal" or "open_terminal_project_folder"
　　// commands
　　// "parameters": ["-c", "cd \"%CWD%\" && \"C:\\Program Files (x86)\\Git\\bin\\sh.exe\" -i -l"]
　　"parameters": ["/START", "%CWD%"]

}

還能夠設置按鍵

打開Preferences--->Package-Settings--->Terminal--->Key Bindings-Default配置裏面添加

[
　　{ "keys": ["ctrl+shift+t"], "command": "open_terminal" },
　　{ "keys": ["ctrl+shift+alt+t"], "command": "open_terminal_project_folder" }
]

3、AutoFileName顯示文件路徑

4、BracketHighlinghter顯示標籤對提示

5、SublimeServer簡易本地服務器環境

6、Babel 編寫ES6

7、Autoprefixer自動生成css3前綴

前提要先安裝nodejs,配置默認兼容瀏覽器版本打開Preferences--->Package-Settings--->Autopreifxer--->Autoprefixer Settings-Use配置裏面添加

{
    "browsers": ["last 1 version", "> 10%", "> 5% in US", "ie 8", "ie 7"]
}

可選瀏覽器列表

browserslist('last 1 version, > 10%');
//=> ["and_chr 51", "chrome 52", "chrome 51", "edge 13", "firefox 47",
//    "ie 11", "ie_mob 11", "ios_saf 9.3", "opera 38", "safari 9.1"]

You can specify the versions by queries (case insensitive):

last 2 versions: the last 2 versions for each major browser.
last 2 Chrome versions: the last 2 versions of Chrome browser.
> 5%: versions selected by global usage statistics.
> 5% in US: uses USA usage statistics. It accepts two-letter country code.
> 5% in my stats: uses custom usage data.
ie 6-8: selects an inclusive range of versions.
Firefox > 20: versions of Firefox newer than 20.
Firefox >= 20: versions of Firefox newer than or equal to 20.
Firefox < 20: versions of Firefox less than 20.
Firefox <= 20: versions of Firefox less than or equal to 20.
Firefox ESR: the latest [Firefox ESR] version.
iOS 7: the iOS browser version 7 directly.
not ie <= 8: exclude browsers selected before by previous queries. You can add not to any quer

配置完畢後，只需在css文件中選擇Autoprefix CSS便可

8、FileHeader自動生成文件修改時間插件

配置默認字段模板打開Preferences--->Package-Settings--->File Header--->Settings-Use配置裏面添加

{
    "Default": {
        "author":"JiaoShouf2e",
        "last_modified_by":"JiaoShouf2e"
    }
}

9、DocBlockr自動生成註釋模板

　　配置註釋模板打開Preferences--->Package-Settings--->DocBlockr--->Settings-Use配置裏面添加

{
	"jsdocs_extra_tags":["@Author JiaoShouf2e","@DateTime {{datetime}}"]
}

10、SFTP文件上傳插件

11、JsFormat js文件格式化插件 HTMLPrettify html、css、js格式化插件都可配置成自動保存格式化

12、LiveReload 瀏覽器自動刷新插件

　　安裝LiveReload擴展（chrome） https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnk

　　給文檔添加監測代碼

　　二、選LiveReload: Enable/disable plug-ins

　　三、選Enable - SimpleReload

---------------------------------------------------------------------------------------------------------------------------------------------------------

sublime text 默認配置

// 默認設置
{
    // 配色方案
    "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",

    // 字體
    "font_face": "",
    // 字號
    "font_size": 10,
    // 字型
    "font_options": [],

    // 雙擊選中的分隔字符
    "word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?",

    // 顯示行號
    "line_numbers": true,
    // 顯示行號邊界
    "gutter": true,
    // 行號邊界和文字的間距
    "margin": 4,

    // 顯示代碼摺疊按鈕
    "fold_buttons": true,
    // 代碼摺疊按鈕，鼠標移開時隱藏
    "fade_fold_buttons": true,

    // 垂直標尺寬度（單位：字符）
    "rulers": [],

    // 拼寫檢查
    "spell_check": false,

    // 製表符大小（單位：字符）
    "tab_size": 4,
    // 製表符轉換爲空格
    "translate_tabs_to_spaces": false,
    // 按製表符大小來插入及刪除
    "use_tab_stops": true,
    // 載入時檢查縮進
    "detect_indentation": true,
    // 回車鍵自動對齊縮進
    "auto_indent": true,
    // 針對 C 語言的花括號自動對齊
    "smart_indent": true,
    // 縮進時對齊括號
    "indent_to_bracket": false,
    // 移出一行時去除自動縮進的空白
    "trim_automatic_white_space": true,

    // 自動換行
    "word_wrap": "auto",
    // 換行寬度（單位：字符）
    "wrap_width": 0,
    // 防止被縮進到同一級的字符換行
    "indent_subsequent_lines": true,

    // 窗口居中顯示
    "draw_centered": false,

    // 自動匹配引號、括號等
    "auto_match_enabled": true,

    // 拼寫檢查的單詞列表
    "dictionary": "Packages/Language - English/en_US.dic",
    // 拼寫檢查的範圍
    "spelling_selector": "markup.raw, source string.quoted - punctuation - meta.preprocessor.c.include, source comment - source comment.block.preprocessor, -(source, constant, keyword, storage, support, variable, markup.underline.link, meta.tag)",

    // 縮略圖邊框
    "draw_minimap_border": false,
    // 默認顯示縮略圖
    "always_show_minimap_viewport": false,

    // 當前行高亮
    "highlight_line": false,

    // 光標閃動方式
    "caret_style": "smooth",
    // 光標尺寸（單位：像素）
    "caret_extra_top": 0,
    "caret_extra_bottom": 0,
    "caret_extra_width": 0,

    // 當前匹配的閉合標籤高亮
    "match_brackets": true,
    // 當前匹配的閉合標籤（圓括號）高亮
    "match_brackets_content": true,
    // 當前匹配的閉合標籤（方括號）高亮
    "match_brackets_square": true,
    // 當前匹配的閉合標籤（大括號）高亮
    "match_brackets_braces": true,
    // 當前匹配的閉合標籤（尖括號）高亮
    "match_brackets_angle": false,

    // 當前匹配的閉合標籤（HTML 及 XML）高亮
    "match_tags": true,
    // 當前選中字符的其餘相同字符高亮
    "match_selection": true,

    // 行距（單位：像素）
    "line_padding_top": 0,
    "line_padding_bottom": 0,

    // 超過頁尾時滾動
    "scroll_past_end": true,
    // 頁首或頁尾的移動限制
    "move_to_limit_on_up_down": false,

    // 顯示空白標記
    "draw_white_space": "selection",
    // 顯示縮進標記
    "draw_indent_guides": true,
    // 縮進標記的選項
    "indent_guide_options": ["draw_normal"],

    // 保存時，刪除行尾多餘的空白
    "trim_trailing_white_space_on_save": false,
    // 保存時，頁尾確保爲空行
    "ensure_newline_at_eof_on_save": false,
    // 失去焦點時，文件自動保存
    "save_on_focus_lost": false,
    // 恢復原始保存
    "atomic_save": false,

    // 回調編碼格式
    "fallback_encoding": "Western (Windows 1252)",
    // 默認編碼格式
    "default_encoding": "UTF-8",
    // 使用 HEX 編碼格式打開包含空字節的文件
    "enable_hexadecimal_encoding": true,
    // 行尾終止符默認的編碼格式
    "default_line_ending": "system",

    // 製表鍵補全
    "tab_completion": true,

    // 自動完成
    "auto_complete": true,
    // 自動完成的大小限制
    "auto_complete_size_limit": 4194304,
    // 自動完成的延時（單位：毫秒）
    "auto_complete_delay": 50,
    // 自動完成的範圍
    "auto_complete_selector": "meta.tag - punctuation.definition.tag.begin, source - comment - string.quoted.double.block - string.quoted.single.block - string.unquoted.heredoc",
    // 觸發自動完成的其餘狀況
    "auto_complete_triggers": [ {"selector": "text.html", "characters": "<"} ],
    // 自動完成上屏後換行
    "auto_complete_commit_on_tab": false,
    // 自動完成跟隨活躍字段
    "auto_complete_with_fields": false,
    // 自動完成循環選擇提示
    "auto_complete_cycle": false,

    // 自動閉合匹配的 HTML 及 XML 標籤
    "auto_close_tags": true,

    // 轉換鍵 + 製表鍵取消縮進
    "shift_tab_unindent": false,

    // 空選擇的複製與剪切
    "copy_with_empty_selection": true,
    // 查找文本框默認顯示選中的文本
    "find_selected_text": true,
    // 自動在選中的範圍內搜索
    "auto_find_in_selection": false,
    // 拖拽選中的文本
    "drag_text": true,

    //
    // 用戶界面設置
    //

    // 界面主題
    "theme": "Default.sublime-theme",

    // 平滑滾動速度
    "scroll_speed": 1.0,

    // 側邊欄文件夾動畫
    "tree_animation_enabled": true,
    // 動畫總控制
    "animation_enabled": true,

    // 高亮未保存的文件
    "highlight_modified_tabs": false,
    // 顯示標籤頁的關閉按鈕
    "show_tab_close_buttons": true,
    // 加粗顯示側邊欄的文件夾標籤
    "bold_folder_labels": false,

    // OS X 平臺選項
    "use_simple_full_screen": false,
    "gpu_window_buffer": "auto",

    // 顯示滾動條
    "overlay_scroll_bars": "system",
    // 滾動標籤欄
    "enable_tab_scrolling": true,

    // 狀態欄顯示文件編碼格式
    "show_encoding": false,
    // 狀態欄顯示行尾編碼格式
    "show_line_endings": false,

    //
    // 程序行爲設置
    //

    // 熱退出：關閉時不提示，打開時恢復退出前狀態
    "hot_exit": true,

    // 記住全屏顯示
    "remember_full_screen": false,

    // 老是提示文件被修改
    "always_prompt_for_file_reload": false,

    // OS X 平臺選項
    "open_files_in_new_window": true,
    "create_window_at_startup": true,

    // 窗口跟隨最後一個標籤關閉
    "close_windows_when_empty": false,

    // 標題欄顯示完整路徑
    "show_full_path": true,

    // 編譯時顯示結果面板
    "show_panel_on_build": true,

    // 側邊欄的文件單擊預覽
    "preview_on_click": true,
    // 側邊欄的文件夾排除
    "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"],
    // 側邊欄的文件排除
    "file_exclude_patterns": ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db", "*.sublime-workspace"],
    // 側邊欄的文件保留
    "binary_file_patterns": ["*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
    // 側邊欄的文件索引
    "index_files": true,
    // 側邊欄的文件索引線程
    "index_workers": 0,
    // 側邊欄的文件索引排除
    "index_exclude_patterns": ["*.log"],

    // 忽略插件，重啓後生效
    "ignored_packages": ["Vintage"]
}

---------------------------------------------------------------------------------------------------------------------------------------------------------

sublime text 快捷鍵

Ctrl+D:按詞，多按++(過程當中若是想跳過某個選項，Ctrl+k便可)
Alt+F3:按下全選一類
列選模式：鼠標右鍵+shift(Ctrl + Alt + Down)
Ctrl+kk:刪除行
Ctrl+Shift+D:複製光標所在整行，插入在該行以前
Ctrl+J:合併行（已選擇須要合併的多行時）
Ctrl+KU:改成大寫
Ctrl+KL:改成小寫
Ctrl+Shift+↑ 向上移動一行
Ctrl+Shift+↓ 向下移動一行
Ctrl+M:光標移動至括號內開始或結束的位置
Ctrl+Shift+M:選擇括號內的內容（按住-繼續選擇父括號）
Ctrl+Y:恢復撤銷
Ctrl+Shift+A:選擇光標位置父標籤對兒
Ctrl+Shift+[:摺疊代碼
Ctrl+Shift+]:展開代碼
Ctrl+KT:摺疊屬性
Ctrl+K0:展開全部
Ctrl+T:詞互換
Ctrl+Shift+UP:與上行互換
Ctrl+Shift+DOWN:與下行互換
Ctrl+Enter:插入行後
Ctrl+Shift Enter:插入行前
ctrl + g,或ctrl + p,再輸入 : 數字能夠跳轉到行
ctrl + r 或 ctrl + p ,在執行@。以後填寫要搜索的函數名

選中一對標籤(標籤開頭和標籤結尾),Ctrl+Shift+'

按Cmd-Shift-Y (Win: Ctrl-Shift-Y)計算數值

正則替換

目標

將相似 <div id="aaaa">$1</div>這樣的語句替換成 <div id="aaaa" class="jiaoshou">$1</div>

替換方法

調出查找和替換界面
點下最左側的.*按鈕，啓用正則搜索
Find What界面中輸入 "<div id="aaaa">(.*)</div>"，別忘了這兒的小括號
Replace With中輸入 "<div id="aaaa" class="jiaoshou">$1</div>"這兒的$1就表明了第一個括號中匹配的內容
Replace ALL！

稍微再加點限制：

Find What界面中輸入 <(.*) id=(.*)>(.*)</(.*)>
Replace With中輸入 <$1 id=$2 class="jiaoshou">$3</$4>

E
元素名（div、p）；
eg:<div></div>、<p></p>

E#id
帶Id的元素（div#content、p#intro、span#error）；
eg:<div id="content"></div>、<p id="intro"></p>、<span id="error"></span>

E.class
帶class的的元素（div.header、p.error）,id和class能夠連着寫，div#content.column
eg:<div class="header"></div>、<p class="error"></p>、<div id="content" class="column"></div>

使用E[attr]添加屬性
使用E{text}添加文本

E>N 生成彼此嵌套的元素
子元素（div>p、div#footer>p>span）
eg:<div>
<p></p>
</div>、<div id="footer">
<p><span></span></p>
</div>

E*N
多項元素（ul#nav>li*5>a）
eg:<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

E+N 用來生成彼此相鄰的元素
多項元素(div+p+a+ul+li)
eg:<div></div>
<p></p>
<a href=""></a>
<ul></ul>
<li></li>

E$*N
帶序號的元素(div$*5)
eg:<div1></div1>
<div2></div2>
<div3></div3>
<div4></div4>
<div5></div5>

本文標題:sublime text3插件使用

原創做者:Jiao Shou

發佈時間:2015年03月21日 - 20:47

最後更新:2015年03月21日 - 20:49

原始連接:http://www.cnblogs.com/jiaoshou/p/4356156.html

許可協議:轉載本篇文章時請務必以超連接形式標明文章原文連接和做者信息。

掃描二維碼,分享此文章