安装插件列表
Package Control
Sublime Text上 Package Control 来管理安装插件,所以它是我们要安装的第一个插件,安装方法见这里 。
AutoFileName
在你在输入文件名是提供自动提示,减少人为的输入错误。
Autoprefixer
帮你自动添加 CSS 厂商前缀,个人使用比较方便。如果是正式的项目,可以使用其它自动构建工具在构建过程中统一实现。需要Node.js环境,插件使用CanIUse资料库,能精准判断哪些属性需要什么前缀。
设置:
通用配置:Package Settings – AutoPrefixer – Settings-User 加入
1
{ "browsers": ["last 5 versions"], "cascade": true, "remove": true }
快捷键:Preferences – key Bindings-User 加入
1
{ "keys": ["ctrl+alt+c"], "command": "autoprefixer" },
Brackethighlighter
标签对提示标记
ColorHighliter
该插件可以自动显示 CSS 或 Sass 中声明的颜色,让你一目了然。默认配置下,当鼠标移到颜色变量上时背景就会变为声明的颜色。
Emmet
这个没有什么好说的,类似jQuery的语法,提高编码速率。需要PyV8环境。
设置:
禁用 Emmet css 私有属性补全:Package Settings – Emmet – Settings-User 加入
1
{ "preferences": { "css.autoInsertVendorPrefixes": false } }
禁用 @keyframes 自动补全前缀:Open Resource 选择 Emmet ,修改 emmet 文件夹里的 snippets.json 。找到 “@kf”,替换成如下内容:
1
"@kf": "@keyframes ${1:identifier} {\n\t${2:from} { ${3} }${6}\n\t${4:to} { ${5} }\n}",
此后,在 CSS 里,输入 @k ,然后 ctrl+e 就可以生成标准的 @keyframes 代码块。后面的事情就交给 AutoPrefixer 了。
HTML-CSS-JS Prettify
这是一款可以用于HTML,CSS,Javascript的集成排版插件,ctrl+shift+h 一键格式化代码。
LiveStyle
配上chrome插件实现css文件双向同步修改预览
Markdown Preview
md文件查看
MarkdownEditing
md文件语法高亮编辑
Monokai Extended
补全默认主题所缺失的代码高亮的颜色主题
PackageResourceViewer
插件修改必备,ctrl+shift+p 调用 Open Resource
QuoteHTML
转化html代码为字符串
设置:
- 快捷键 Preferences – key Bindings-User 加入
1
{ "keys": ["ctrl+alt+'"], "command": "quote_html", "args": {"action": "single"} },
SideBarEnhancements
大大增强右键列表的功能,装上就能用。
设置:
设置默认浏览器,Package Settings – Side Bar – Settings-User 加入
1
{ "default_browser": "chrome", }
设置快捷键,Preferences – key Bindings-User 加入
1
{ "keys": ["f12"], "command": "side_bar_open_in_browser" , "args":{"paths":[], "type":"testing", "browser":""} },
SublimeCodeIntel
代码自动补全提示
设置:
- 修改快捷键,Preferences – key Bindings-User 加入
1
{ "keys": ["alt+d"], "command": "code_intel_auto_complete" },
Terminal
快捷键 ctrl+shift+T呼出当前文件路径的控制台。
基础用户设置
工具栏 Preferences – Settings-User 加入1
"trim_trailing_white_space_on_save": true,自动移除行尾多余空格
"ensure_newline_at_eof_on_save": true,文件末尾自动保留一个空行
"disable_tab_abbreviations": true,禁用Emmet的tab键功能(请使用ctrl+e)
"draw_minimap_border": true,右侧代码预览时给所在区域加上边框
"save_on_focus_lost": true,窗口失焦立即保存文件
"highlight_line": true,当前行高亮
"fade_fold_buttons": false,默认显示行号右侧的代码段闭合展开三角号
"bold_folder_labels": true,侧边栏文件夹显示加粗,区别于文件
"highlight_modified_tabs": true,高亮未保存文件
"default_line_ending": "unix",使用 unix 风格的换行符
"auto_find_in_selection": true 开启选中范围内搜索
快捷键设置
工具栏 Preferences – key Bindings-User 加入1
{ "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+alt+d"], "command": "goto_definition" },跳转到函数或CSS定义
默认HTML补全修改
ST3自带了HTML代码补全机制,前面配置的 disable_tab_abbreviations 禁用了 Emmet 的 tab 功能,只是因为我觉得自带的HTML补全用起来更顺手。
ctrl+shift+p,输入 Open Resource,回车,选择HTML,回车,选择 html_completions.py ,回车即可修改。
替换如下内容(也许大约在第170行 :1
("a\tTag", "a href=\"javascript:void(0);\">$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>$0</style>"),
("img\tTag", "img src=\"$1\" alt=\"$2\" />"),
("param\tTag", "param name=\"$1\" value=\"$2\">"),
("br\tTag", "br />"),
("input\tTag", "input type=\"$1\" />")
其他问题
自动更新
有时候会弹出自动更新的框,解决方法:
- 找到Preferences -> Settings-User(设置用户)
- 在最后一个花括号结尾(“}”)前添加一句:”update_check”:false
- 然后请关闭Submine Text并重启,即不会再弹出更新提醒了
不能获取插件列表
Package Control:There are no packages available for installation
- cmd下输入ping sublime.wbond.net链接一下看下sublime.wbond.net这个域名的ip。
- 打开C:\Windows\system32\drivers\etc\hosts文件。在最后面加上例如50.116.34.243 sublime.wbond.net这样的对应关系,IP是上面测试的。
- 然后请关闭Submine Text并重启,即不会再弹出更新提醒了。