sublime Text3技巧

sublime text 想必很多人在用吧，談談我個人的使用情況。也爲了總結一下，萬一哪天從新安裝它時，也知道自己都在用哪些技巧和插件以及配置方法。

滾輪中鍵按住滾動
按住shift + 右鍵 +滾動滾輪
ctrl + alt +down/up (與win10 衝突，禁止win10的快捷鍵即可，桌面右擊——圖形選項——快捷鍵）

上面三個都是垂直選擇,適用同時編輯。如果想回復到單選情況，按Esc

Ctrl-Shift-v：自適應縮進粘貼，自動縮進，相當不錯。

ctrl + d和ctrl + k：ctrl + d選擇，ctrl + k掠過選擇（在js中針對變量特別好用）

ctrl + d選擇了變量i但是沒有選擇list裏的i，按一次選一次，在第二個我時按了CTRL + K（沒有變化提示，必須選擇下一個後才能看出來按CTRL + K的那個變量沒有被選擇）掠過了它。

alt + f3：同類全選。選擇一個，按alt + f3，下圖感受同類

Ctrl + Shift + up/down: 上下兩行切換位置。
ctrl + ｐ：預覽文件，輸入想要的文件名即可查找。
ctrl + g ：跳行查找
ctrl + m : 選擇相匹配的括號。（函數大括號的結尾）
ctrl + shift + m：選擇括號開始和結束之間的內容

當你在修改以上線的兼容性問題時，在瀏覽器上發現線上的多少行css樣式需要修改，那這時候你就可以用跳行了。

二、用戶設置

Preferences > setting 右側是用戶的設置，左側是默認的設置，用戶設置覆蓋默認設置。

{
    "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
    "disable_tab_abbreviations": true,  //禁用 Emmet的tab鍵功能（請使用 ctrl+e）
    "draw_minimap_border": true, // 用於右側代碼預覽時給所在區域加上邊框，方便識別
    "highlight_line": true,  // 當前行高亮，很好的提示效果。
    "font_size": 14,  // 字體大小。
    "settings": {"expand_tabs_on_save": true}, // 這個貌似可以忽略，
    "expand_tabs_on_save": true,  // 保存自動tab縮進轉換爲空格，需要額外的配置
    "highlight_modified_tabs": true,  // 高亮未保存文件,很好的提示效果。
    "auto_find_in_selection": true,
    "draw_white_space": "all" ,  // 顯示空白字符，有利於去掉多餘的空白
    "ignored_packages":
    [
        "Vintage"
    ],  // 設置忽略內容，的文件檢索功能找到特定的文件，比如你不想檢索node_modules裏的內容。添加進去即可
    "tab_size": 4, // 四個空格縮進
    "preview_on_click": false, // 點擊左側的文件自動打開。我不太喜歡這個
    "drag_text": false, // 選中的文本可以拖動，偶爾誤操作。關掉。
    "font_face": "Microsoft YaHei Mono", // 換個字體換個心情
    "translate_tabs_to_spaces": true, //tab縮進轉換爲空格縮進
    "trim_trailing_white_space_on_save": true, //自動移除行尾多餘空格,獻給處女座
    "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?" // 雙擊選擇，遇到如下符號停止，我去掉了中線
}

關於上邊的保存自動把tab縮進轉化爲空格縮進的配置和問題。

請戳這裏原網址

設置步驟：

1.打開sublime的Preference - > Browser Packages
2.新建一個目錄（文件夾）ExpandTabsOnSave
3.在上邊新建的文件夾內新建文件ExpandTabsOnSave.py4.把下面內容複製進去，保存

import sublime, sublime_plugin, os

class ExpandTabsOnSave(sublime_plugin.EventListener):
  def on_pre_save(self, view):
    if view.settings().get('expand_tabs_on_save') == 1:
      view.window().run_command('expand_tabs')

5.全局改變，打開Preferences -> Settings - User添加（下面的寫法應該是是ST2的，ST3應該是我上邊的寫法，不用寫settings,因爲下面在ST3貌似不生效。）：

"settings": {
    "expand_tabs_on_save": true
}

三、插件設置

1、安裝Package Control

操作：package Control官網—Install Now —複製ST3的代碼 — 打開ST3的console （ctrl + ` 或 view —show console）

— 粘貼回車 —完成後重啓 — Ctrl+Shift+P — 輸入PC（即：package control）打開檢索框—搜索插件

2、各類插件

emmet:
- 支持cheat sheet，tab鍵html自動補全，css兼容性寫法，縮寫等等，安上即用。
- 上面用戶設置裏禁用了它的tab鍵，默認變爲ctrl + e觸發。
color hightlighter ：
- 顏色高亮提示，css很好用。安上即用
ConvertToUTF8：
- 編碼設置，採用utf-8，解決中文亂碼問題，安上即用
sublime Linter & SublimeLinter-contrib-eslint & eslint：
- eslint套裝插件，編寫高質量的js代碼。需要配置
standard：
- 同上的eslint，一個比較規範的標準配置。需要配置
AutoPrefixer：
- 自動補全瀏覽器私有屬性前綴，兼容性數據從著名的 can I use 讀取。需要配置。
sass：
- sass預處理必備，高亮提示。安上即用
sublimecodeintel：
- js自動補全功能，需要配置。
expand_region ：
- 向外擴展，範圍選擇，需要配置
goto definition ：
- 跳轉，當你聲明一個函數，並且在下面調用了它，當你用該插件時就會直接跳轉。

其實上面這些插件，有些重複的功能，很類似，但是也有不同。看自己需求了。其實emmet提供了很多功能,詳細瞭解[emmet]（http://docs.emmet.io/ ）

四，插件配置和使用

1，AutoPrefixer配置，

a、Preferences>Packages Settings> AutoPrefixer>設置用戶設置兼容性寫法。

{
  "browsers": ["last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"]
}

b、Preferences>Key Binding > user 綁定。

[
    { "keys":[ "Ctrl + Alt + Shift + p"], "command": "autoprefixer"}
]

2，sublimecodeintel配置

Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut

"codeintel_selected_catalogs": ["jQuery"] 修改爲 "codeintel_selected_catalogs": ["JavaScript"]

3、expand_region 配置

[
    { "keys": ["ctrl+shift+space"], "command": "expand_region" },
    {
      "keys": ["ctrl+space"],
      "command": "expand_region",
      "args": {"undo": true},
      "context": [{ "key": "expand_region_soft_undo" }]
    }
]

擴散性選擇，首先光標放到用戶名的位置，按一下快捷鍵選擇用戶名，再一下選擇整個span，再一下選擇li的內部所有。（emmet貌似有類似的功能）

注意：

1、插件安裝都是採用ctrl + shift + p — Package Control；
2、如果你綁定了多個自己的快捷鍵，請都在同一個[]內。不要每個都寫一個[]。

補充：

hexo用了ejs的模版引擎，對其設置高亮提示，

browse Packages — user — 新建HTML.sublime-settings—輸入如下代碼。

{
    "extensions":
    [
        "ejs"
    ]
}

4、View in Browser

直接在編輯器通過快捷鍵用默認瀏覽器打開靜態頁。

{ "keys":["ctrl+shift+alt+g"], "command": "open_in_browser"} //綁定自己的快捷鍵

5、code formatter

格式化插件。默認相關配置package setting —— code formatter ——setting default裏。需要改什麼自己設置即可。默認快捷鍵 ctrl + alt + f

{
    "codeformatter_html_options": {
        "syntaxes": "html,asp,xml", // Syntax names which must process HTML formatter
        "format_on_save": false, // Format on save
        "indent_size": 4, // indentation size
        "indent_char": " ", // Indentation character
        "indent_with_tabs": true, // Indent with one tab (overrides indent_size and indent_char options)
        "reduce_whole_word_tags": true,
        "exception_on_tag_mismatch": true,
        "expand_javascript": false,
        "reduce_empty_tags": true,
        "preserve_newlines": true, // Preserve existing line-breaks
        "max_preserve_newlines": 10, // Maximum number of line-breaks to be preserved in one chunk
        "indent_tags": "html|head|body|div|nav|ul|ol|dl|li|table|thead|tbody|tr|th|blockquote|select|form|optgroup|fieldset|legend|label|header|section|aside|footer|figure|video|datalist|keygen|audio|embed|source|track|output|article|bdi|details|dialog|figcaption|main|mark|menuitem|meter|nav|progress|rp|rt|ruby|summary|time|wbr" // List of tags (defaults to indent) that should be reformatted. Example "div|p|li|table"
    },
    "codeformatter_css_options":
    {
        "syntaxes": "css,less", // Syntax names which must process CSS formatter
        "format_on_save": false, // Format on save. Either a boolean (true/false) or a string regexp tested on filename. Example : "^((?!.min.|vendor).)*$"
        "indent_size": 4, // Indentation size
        "indent_char": " ", // Indentation character
        "indent_with_tabs": false, // Indent with one tab (overrides indent_size and indent_char options)
        "selector_separator_newline": true, // Add new lines after selector separators
        "end_with_newline": true, // Add new line of end in file
        "newline_between_rules": false, // Add new line between rules
        "eol": "\n" // EOL symbol
    },
    "codeformatter_js_options":
    {
        "syntaxes": "javascript,json", // Syntax names which must process JS formatter
        "format_on_save": false, // Format on save. Either a boolean (true/false) or a string regexp tested on filename. Example : "^((?!.min.|vendor).)*$"
        "indent_size": 2, // indentation size
        "indent_char": " ", // Indent character
        "indent_with_tabs": false, // Indent with one tab (overrides indent_size and indent_char options)
        "eol": "\n", // EOL symbol
        "preserve_newlines": true, // whether existing line breaks should be preserved,
        "max_preserve_newlines": 10, // maximum number of line breaks to be preserved in one chunk
        “space_in_paren”：false，//在paren中添加填充空格，即。f（a，b）
        “space_in_empty_paren”：false，//如果父項爲空，則在paren內添加填充空格。f（）
        “e4x”：false，//通過未觸及的
        “jslint_happy” 傳遞E4X xml文字：false，//如果爲true，則jslint-stricter模式被強制執行。示例function（）vs function（）
        “brace_style”：“collapse”，//“collapse”| “展開”| “最終展開”。將大括號放在與控制語句（默認值）相同的行上，或者將大括號放在自己的行上（Allman / ANSI樣式），或者只將末尾大括號放在自己的行上。
        “keep_array_indentation”：true，//保持數組縮進。
        “
        "eval_code": false, // eval code
        "unescape_strings": false, // Decode printable characters encoded in xNN notation
        "wrap_line_length": 0, // Wrap lines at next opportunity after N characters
        "break_chained_methods": true, // Break chained method calls across subsequent lines
        "end_with_newline": true, // Add new line at end of file
        "comma_first": false // Add comma first
    }
}

6、goto definition （這裏可能不是很對了，由於某次編輯保存時被谷歌自動翻譯給翻譯了）

1、

Windows新建： Default(Windows).sublime-mousemap\Sublime Text 3\Packages\User。

　 2，在Default(Windows).sublime-mousemap內輸入如下：

 // button1左鍵，button2右鍵。// 
修飾符綁定ctrl和alt。
[ 
    { 
        “button”：“button1”，
        “count”： 1，
        “modifiers”：[“ctrl”，“alt”]，
        “press_command”：“drag_select”，
        “command”：“goto_definition”
    }
]

alt + d會打開對應文件。

1、去open-include的github下載包
2、解壓——重命名文件夾Open-Include——放到ST3的Package裏
3、複製一份Open-Include.sublime-settings到Package-user文件夾下。

8. ClickableUrls

光標放在網址處。按ctrl + alt + enter打開網址。

1，去ClickableUrls的github上下載包2，解壓-重命名文件夾ClickableUrls–放到ST3的包裝裏

9 autofilename自動找到文件，這個不用說，必備方便的不行。

1，去autofilename的github下載包
2，解壓 - 重命名文件夾AutoFileName–放到ST3的Package裏

10.側欄增強增強對左側欄目操作的功能

2018-1-13日更新：

snipaste + sublime 的 SublimeHighlight插件，

snipaste有貼圖功能，且對於html格式的內容可以帶格式貼圖，複製後按F3即可生成剪切板的貼圖。
sublime 的 SublimeHighlight插件，可以複製html格式的內容，看一下下圖即明白了。

當然，這個只是爲了展示snipaste的強大功能，畢竟編輯器都有分欄的功能，不過有些時候snipaste也是蠻有用的。

liuyongshun2

發佈了42 篇原創文章 · 獲贊 8 · 訪問量 4萬+

私信關注

sublime Text3技巧

二、用戶設置

三、插件設置

1、安裝Package Control

2、各類插件

四，插件配置和使用

1，AutoPrefixer配置，

2，sublimecodeintel配置

3、expand_region 配置

4、View in Browser

5、code formatter

6、goto definition （這裏可能不是很對了，由於某次編輯保存時被谷歌自動翻譯給翻譯了）

8. ClickableUrls

9 autofilename自動找到文件，這個不用說，必備方便的不行。

10.側欄增強增強對左側欄目操作的功能

2018-1-13日更新：

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

java由於越界導致的報錯

github應用

基礎ps技巧

hexo之踩坑填坑

javascript數組定義、操作

js容易被忽略的內容(一)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結