Sublime Text 經常使用設置

sublime - 主題 Setting - User

編寫代碼質量的提高、是由於好的Theme潛移默化的結果
Material Theme 主題設置

//  Other available theme options:
//  其餘可用的主題選項:
"material_theme_small_tab" : true , // Set Set small tabs （標題高度緊縮）
"material_theme_disable_fileicons" : true , // Hide siderbar file type icons （隱藏siderBar的文件類型Icon）
"material_theme_disable_folder_animation" : true , // Disable folder animation （ stop siderBar 文件夾動畫效果）
"material_theme_small_statusbar" : true , // Set small status bar （設置左下角狀態欄）
"material_theme_compact_sidebar" : true , // Set compact side bar （sideBar緊縮）
"material_theme_disable_tree_indicator" : true , // Disable sidebar file indicator （禁用sideBar文件指針）
"material_theme_bold_tab" : true , // Make the tab labels bolder （標題字體加粗）
"material_theme_tabs_separator" : true , // Show tabs separator, this disable tab animation hover （禁止Title動畫、添加分割符）
/* changes提示顏色 */
"material_theme_accent_lime" : true , // set green lime accent color （酸橙色、綠黃色）
"material_theme_accent_purple" : true , // set purple accent color （紫色）
"material_theme_accent_red" : true , // set pale red accent color（紅色） 
"material_theme_accent_orange" : true , // set orange accent color （橙色）
"material_theme_accent_yellow" : true , // set yellow accent color （黃色）
"material_theme_accent_indigo" : true , // set indigo accent color （靛藍色）
"material_theme_panel_separator" : true , // show bottom panel separator （顯示分離器底部面板）
"material_theme_tabs_autowidth" : true , // Enable autowidth for tabs （啓用autowidth標籤）
"material_theme_contrast_mode" : true , // Enable sidebar and panels contrast mode （slideBar 和 main背景對比度）
"material_theme_tree_headings" : true , // Show siderbar headings（顯示siderbar標題）
//  Recommended UI and font settings for a better experience:
//  Material Theme 推薦的UI和字體設置
{
"overlay_scroll_bars": "enabled", //（水平垂直滾動條：system和disabled爲默認顯示方式，enabled爲自動隱藏顯示）
"line_padding_top": 3, //（設置每一行到頂部的距離PX）
"line_padding_bottom": 3, //（設置每一行到底部的距離PX）
"always_show_minimap_viewport": true, //（老是顯示迷你地圖窗口）
"bold_folder_labels": true, //（slideBar文件夾加粗）
"indent_guide_options": [ "draw_normal", "draw_active" ], // Highlight active indent（製表位的對齊白線，draw_normal爲一直顯示，draw_active爲只顯示當前光標所在的代碼控制域）
"font_options": [ "gray_antialias" ], // For retina Mac（視網膜Mac）
}

Theme - Soda 主題地址
Theme - Soda 官網
Theme 語法高亮的配色方案 - 下載

"theme": "Soda Light 3.sublime-theme",
"theme": "Soda Dark 3.sublime-theme",
// 配色方案( 打開Sublime Text 3 -> Packages -> User  把下載的文件複製進去 )
在Preferences -> Color Scheme -> User這裏設置一下對應的color theme就能夠了
"color_scheme": "Packages/User/Monokai Soda.tmTheme",
"color_scheme": "Packages/User/Espresso Soda.tmTheme",

"soda_folder_icons": true   //（Icons設置爲文件夾style、側邊欄文件夾圖標、默認箭頭）
"soda_classic_tabs": true   // set弧形標籤的風格、默認是顯示方形標籤風格

Sublime - 配色方案

colorsublime 自定義主體顏色(Ctrl + Shift + P -> Colorsublime: Install Theme)
Abyss\Aurora\Metropolis\Nouba\Dracula

Sublime - 用戶設置

// 主題設置
    "theme": "Material-Theme.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
    "material_theme_small_tab": true,
    "material_theme_small_statusbar": true,
    "material_theme_compact_sidebar": true,
    "material_theme_bold_tab": true,
    "material_theme_tabs_separator": true,
    "material_theme_accent_yellow": true,
    // 光標
    "caret_extra_width": 2,
    "caret_style": "phase",
    "caret_extra_bottom": 3,
    "caret_extra_top": 3,
    // 基礎設置
    "draw_minimap_border": true,// 預覽窗口添加邊框
    "save_on_focus_lost": true,// 失焦當即保存
    "trim_trailing_white_space_on_save": true,// 自動移除行尾多餘空格
    "ensure_newline_at_eof_on_save": true,// 文件末尾自動保留一個空行
    "highlight_line": true,// 當前行高亮
    "highlight_modified_tabs": true,// 高亮未保存文件
    "ignored_packages": ["Vintage"],// 忽略VIM的支持\去掉Vinage開啓vim模式
    "show_encoding": true,// 窗口右下角顯示打開文件的編碼
    "translate_tabs_to_spaces": true,// 代碼 tab 對齊轉換爲空格對齊
    "word_wrap": true,// 自動換行
    "tab_size": 2,// Tab鍵製表符寬度
    "default_line_ending": "unix",// 使用 unix 風格的換行符。
    "overlay_scroll_bars": "enabled",// 滾動條自動隱藏顯示
    "bold_folder_labels": true,// 側邊欄文件夾顯示加粗
    "fade_fold_buttons": false,// 顯示行號右側的代碼段閉合展開三角號
    // AutoFileName
    "auto_complete_triggers":
    [
      {
         "characters": "<",
         "selector": "text.html"
      },
      {
         "characters": "/",
         "selector": "string.quoted.double.html,string.quoted.single.html, source.css"
      }
    ]
    // With this, there's no need to worry about pressing ctrl+space, autocompletion with appear upon pressing /.

Sublime - 插件推薦

必備

• Package Control  插件管理
• Emmet 快速編寫html

JavaScript

• SublimeLinter 代碼檢查框架
• SublimeLinter-csslint css檢測
• SublimeLinter-jshint js檢測插件
• SublimeCodeIntel 代碼提示插件
• JsFormat javascript 格式化
• DocBlockr JavaScript代碼註釋
• jQuery jQuery

CSS

• CSS3 CSS3語言提示插件
• CSS Format CSS序列化插件:普通Expanded、緊湊Compact、壓縮Compressed
• SASS 語法高亮、提示

HTML

• HTML5

Other 插件

• FileHeader 模板插件
• DocBlockr 腳本開頭註釋
• QuoteHTML HTML拼接js插入字符串、ctrl/cmd + space + P 打開控制面板，選擇 Quote HTML
• Alignment 自動對齊代碼
• SideBarEnhancements 側邊欄加強

AutoFileName 自動補全路徑
Clipboard Manager 加強型剪貼板,可訪問歷史剪貼板記錄
HTML-CSS-JS Prettify 格式化(Ctrl + Shift + H) 兩格式化插件功能相互補充
BufferScroll 代碼摺疊狀態保留
PackageResourceViewer 插件修改必備，ctrl+shift+p 調用 Open Resource
TortoiseSVN
AutoPrefixer 瀏覽器私有屬性前綴補全
LiveStyle 雙向更改無刷新實時預覽(艾米特、中文翻譯過來挺有意思的)
TrailingSpaces，多餘空格標記，強迫症患者福音( "trim_trailing_white_space_on_save": true,// 自動移除行尾多餘空格 )
colorsublime 自定義主體顏色(Ctrl + Shift + P -> Colorsublime: Install Theme)

爲何使用csslint
SUBLIMETEXT3系列（2）-使用SUBLIMELINTER檢查JAVASCRIPT與CSS代碼
"use strict"在jshint報錯
Doc​Blockr 開頭註釋

SublimeCodeIntel 參數配置( Preferences->Package Settings->SublimeCodeIntel->Setting Default )

"codeintel_selected_catalogs": [
  "HTML5", "HTML", "JavaScript"
],

Alignment 參數配置

{
    // If the indent level of a multi-line selection should be aligned
    "align_indent": true,
    // true  : 一、選中多行;二、縮進(若選中行不對其的話);三、自動對齊(根據 alignment_chars)
    // false : 只是對齊、不改變縮進方式

    // If indentation is done via tabs, set this to true to also align
    // mid-line characters via tabs. This may cause alignment issues when
    // viewing the file in an editor with different tab width settings. This
    // will also cause multi-character operators to be left-aligned to the
    // first character in the operator instead of the character from the
    // "alignment_chars" setting.
    "mid_line_tabs": false,
    // true  : 若文本的縮進方式爲Tab縮進排版、則插件在對齊排版的時候也是用Tab方式(Sublime的Tab縮進爲4個空格)
    // false : 默認(空格)

    // The mid-line characters to align in a multi-line selection, changing
    // this to an empty array will disable mid-line alignment
    "alignment_chars": ["=",":"],
    // 對齊字符、設置依據什麼對齊 默認只對齊」=」

    // If the following character is matched for alignment, insert a space
    // before it in the final alignment
    "alignment_space_chars": ["=",":"],
    // 是"alignment_chars"的超級、若這裏包含上面那些字符 則對齊後 = 號前面會加一個空格 反之 則沒有

    // The characters to align along with "alignment_chars"
    // For instance if the = is to be aligned, there are a number of
    // symbols that can be combined with the = to make an operator, and all
    // of those must be kept next to the = for the operator to be parsed
    "alignment_prefix_chars": [
        "+", "-", "&", "|", "<", ">", "!", "~", "%", "/", "*", "."
    ]
}
// 對齊快捷鍵與QQ截圖衝突
// 打開 Preferences=>Package Settings=>Alignment=>Key Bindding - User而後寫入
// [{ "keys": ["super+ctrl+s"], "command": "alignment" }] // Mac
// [{ "keys": ["ctrl+alt+s"], "command": "alignment" }] // Win

SideBarEnhancements 參數設置
// 點擊菜單欄的preferences->package setting->side bar->Key Building-User

//Chrome
    { "keys": ["f1"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
            "extensions":".*" //匹配任何文件類型
        }
    },
    //Firefox
    { "keys": ["f2"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
            "extensions":".*"
        }
     },
    //iexplore
    { "keys": ["f3"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
            "extensions":".*"
        }
    },

Brackethighlighter 標籤對標記
自定義標記顏色

// 打開Preferences -> package settings -> Bracket Highlighter -> Bracket Settings – User 添加以下代碼：
{
    "bracket_styles": {
        "default": {
            "icon": "dot",
            // "color": "entity.name.class",
            "color": "brackethighlighter.default",
            "style": "highlight"
        },

        "unmatched": {
            "icon": "question",
            "color": "brackethighlighter.unmatched",
            "style": "highlight"
        },
        "curly": {
            "icon": "curly_bracket",
            "color": "brackethighlighter.curly",
            "style": "highlight"
        },
        "round": {
            "icon": "round_bracket",
            "color": "brackethighlighter.round",
            "style": "highlight"
        },
        "square": {
            "icon": "square_bracket",
            "color": "brackethighlighter.square",
            "style": "highlight"
        },
        "angle": {
            "icon": "angle_bracket",
            "color": "brackethighlighter.angle",
            "style": "highlight"
        },
        "tag": {
            "icon": "tag",
            "color": "brackethighlighter.tag",
            "style": "highlight"
        },
        "single_quote": {
            "icon": "single_quote",
            "color": "brackethighlighter.quote",
            "style": "highlight"
        },
        "double_quote": {
            "icon": "double_quote",
            "color": "brackethighlighter.quote",
            "style": "highlight"
        },
        "regex": {
            "icon": "regex",
            "color": "brackethighlighter.quote",
            "style": "outline"
        }
    }
}

FileHeader 文件模板 可自動更新修改時間

// New File Ctrl + Alt + N 新建文檔
// Add Header Ctrl + Alt + A
// 新建文件夾？
{
    "Default": {
        "author":"ntscshen",
        "last_modified_by":"ntscshen",
        "email": "ntscshen@gmail.com"
    },
}

DocBlockr 代碼註釋補全工具

{
    "jsdocs_extra_tags":["@Author ntscshen","@Email ntscshen@gmail.com","@DateTime {{datetime}}"]
}

HTML補全修改

("a\tTag", "a href=\"javascript:;\">$0</a>"),
    ("iframe\tTag", "iframe src=\"$1\">$0</iframe>"),
    ("link\tTag", "link href=\"$1\" rel=\"stylesheet\" type=\"text/css\" />"),
    ("script\tTag", "script type=\"text/javascript\" src=\"$1\">$0</script>"),
    ("style\tTag", "style type=\"${1:text/css}\">$0</style>"),
    ("img\tTag", "img src=\"$1\" alt=\"$2\" />"),
    ("param\tTag", "param name=\"$1\" value=\"$2\">")

Sublime - 快捷鍵映射

[
    //Copy Path
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //js_format
    { "keys": ["ctrl+alt+f"], "command": "js_format", "context": [{"key": "selector", "operator": "equal", "operand": "source.javascript"}] },
    //set autoprefixer
    {
        "keys": ["ctrl+alt+shift+x"],"command":"autoprefixer"
    },
    //code提示
    // { "keys": ["alt+space"], "command": "auto_complete" },
    { "keys": ["alt+space"], "command": "auto_complete" },
    { "keys": ["alt+space"], "command": "replace_completion_with_auto_complete", "context":
      [
        { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
        { "key": "auto_complete_visible", "operator": "equal", "operand": false },
        { "key": "setting.tab_completion", "operator": "equal", "operand": true }
      ]
    },
    //多文本粘貼
    { "keys": ["ctrl+c"], "command": "clipboard_manager_copy" },
    { "keys": ["ctrl+x"], "command": "clipboard_manager_cut" },
    { "keys": ["ctrl+v"], "command": "paste_and_indent" },
    { "keys": ["ctrl+shift+v"], "command": "clipboard_manager_choose_and_paste" },
    // 代碼補全
    {"keys": ["alt+d"], "command": "code_intel_auto_complete" },
    // Quote HTML快捷鍵修改
    { "keys": ["ctrl+alt+'"],
    "command": "quote_html",
    "args": {"action": "single"}
    },
    //Chrome
    { "keys": ["f1"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
            "extensions":".*" //匹配任何文件類型
        }
    },
    //Firefox
    { "keys": ["f2"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
            "extensions":".*"
        }
     },
    //iexplore
    { "keys": ["f3"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
            "extensions":".*"
        }
    },
]

快捷鍵

//經常使用類
    Ctrl + D ( 選擇單詞 ) 最經常使用的沒有之一
    Ctrl + Enter ( 換行 ) 舉個栗子：即便光標不在行尾，也能快速向下插入一行。
    Ctrl + K + B ( 切換側邊欄 )
    Ctrl + / （ 註釋當前行 ）
    Ctrl + Shift + / ( 註釋多行 )         --- com + option + /
    Ctrl + L  ( 選擇行 )    最經常使用的是Ctrl + L + delete 雖然有Ctrl + x
    Ctrl + Shift + ↑↓ 替換行
    Ctrl + ← 以單詞爲間隔 光標向左移動    --- com + ←
    Ctrl + → 以單詞爲間隔 光標向右移動    --- com + →
    Home    ( 光標跳轉當前行最前 )    --- com + ←
    End    ( 光標跳轉當前行最前 )    --- com + →
    Tab ( 縮進 ) == Alt + [ == com + [
    Shift + tab ( 左縮進 ) == Alt + ] == com + ]
    Alt+Shift+2 ( 左右分屏 )
    Ctrl + M 快速在起始括號和結尾括號之間切換 --- con + m
    Ctrl + shift + M 快速選中括號間的內容 --- con + shift + m
    Ctrl + Alt + n ( 快速建立文件並添加到當前文件parent內 ) --- File Header插件提供 --- 不裝插件只能新建保存等一堆麻煩的操做 以下↓
    Ctrl + n + Ctrl + s 輸入文件名( 記得加後綴、否則須要Ctrl + Shift + P 搜索html或者其餘格式進行切換。選擇: Set Syntax: HTML )

    SideBarEnhancements側邊欄加強插件 : 設置F1 F2 F3默認打開不一樣瀏覽器 --> 跳轉 快捷鍵映射( 映射地址application爲軟件安裝地址 )

    快速建立桌面文件夾( Win: Ctrl + Shift + n )
    桌面文件夾重命名快捷鍵( Win: F2;  Mac: enter )
    或zsh mkdir fileName  --> mv oldFileName newFileName

    ** Atom建立文件 **
    command + \ 切換側邊欄( 默認是選擇當前文件 )
    上下箭頭切換到當前文件
    按鍵盤a ( 輸入文件名和後綴 ) --- 就這麼簡單
    建立文件夾 shift + a  --- 就這麼簡單


    //公式
    Ctrl + Shift + y (公式計算)
    Ctrl + ↕、Alt + ↕ (數字加減)
    Ctrl + Shift + F (查找並替換)
    //選擇類
    Ctrl + Shift + M (選中當前括號內容,重複可選着括號自己)
    Ctrl + M (跳轉括號位置)
    Ctrl + ↔ (快速移動光標)
    Ctrl + K + 2 (摺疊all代碼)
    Ctrl + k + J (展開all代碼)
    //編輯類
    Ctrl + J (合併選中多行代碼爲一行、配合Ctrl+Shift+M使用)
    Ctrl + Shift + D (複製光標所在行、插入下一行)
    Ctrl + K + K (從光標處刪除至代碼結尾)
    Ctrl + Shift + K
    Shift + Delete (刪除整行)
    Ctrl + Insert (複製一行到粘貼板)
    Ctrl + Shift + D (複製一行)
    Ctrl + K + U (轉換大寫)
    Ctrl + K + L (轉換小寫)
    Ctrl + T (左右字母互換)
    //搜索類
    Ctrl + F 打開底部搜索框，查找關鍵字
    Ctrl + P 打開搜索框、快速搜索文件
    Ctrl + G(:) 數字跳轉
    Ctrl + R(@) 跳轉函數名
    Ctrl + :(#) 查找變量名、屬性名
    //顯示類
    Ctrl + PageDown 切換到當前文件頭部
    Ctrl + PageUp   切換到當前文件尾部
    Ctrl + 1        切換到第一屏

參考 - Sublime Text 3 調教你的私人利器
參考 - Sublime Text3插件以及配置集合