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)
AbyssAuroraMetropolisNoubaDracula

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  : 1、选中多行;2、缩进(若选中行不对其的话);3、自动对齐(根据 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	Tag", "a href="javascript:;">$0</a>"),
    ("iframe	Tag", "iframe src="$1">$0</iframe>"),
    ("link	Tag", "link href="$1" rel="stylesheet" type="text/css" />"),
    ("script	Tag", "script type="text/javascript" src="$1">$0</script>"),
    ("style	Tag", "style type="${1:text/css}">$0</style>"),
    ("img	Tag", "img src="$1" alt="$2" />"),
    ("param	Tag", "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插件以及配置集合