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
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报错
DocBlockr 开头注释
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 切换到第一屏