sublime text 3 configuration notes

sublime_text_3_configurations_note.md

sublime text 3 configuration notes

by searching ‘sublime text 3 for front-end web developer

install package control

ctrl + ~

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

install some useful package for sublime text 3

cmd+shift+p

• emmet [html:5 or ! + (ctrl+e)] 自动补全代码，其余还在学习
• docblockr
  • DocBlockr is a Sublime Text 2 package which makes writing JSDoc comments and PHPDoc comments a breeze.
  • https://github.com/Warin/Sublime/tree/master/DocBlockr
  • 自动生成相关函数注释和文档相关注释说明
• sidebar enhance
  • https://github.com/titoBouzout/SideBarEnhancements
• material theme darker
• markdown preview #用法，在命令行（shift+command+p）中敲markdown preview [cmd+b => build]
  • 调整配置打开 uml
  • highlight
  • mathjax 相关配置如下：

{
    "parser": "github",
    "build_action": "browser",
    "enable_mathjax": true,
    "enable_uml": true,
    "enable_highlight": true,
    "enable_pygments": true,
    "enabled_extensions": "github",
    "enabled_parsers": ["github"],
    "github_mode": "markdown",
    "github_inject_header_ids": true,
    "enable_autoreload": false
}

在以上配置中我们设定渲染样式为 github，渲染结束后用浏览器打开，开启 uml、mathjax、pygments 等支持，最重要的一个配置项是 "github_inject_header_ids": true，保证 heading 的 id 与 heading 内容一致，也就与 MarkdownTOC 生成的一致，也就恰好能够锚点定位。最后我们关闭了 autoreload，否则每当保存 Markdown 文件，后台都会进行一次渲染操作，你就会看到一颗彩虹糖在打转。

使用快捷键 Shift + Command + B，选择 Build with Markdown，一会儿就能在弹出的浏览器框里看到渲染结果了。

• dashdoc [use: ctrl+h]

  • https://mattbrictson.com/sublime-text-3-recommendations

• html5 snippets

  • https://www.youtube.com/watch?v=4wE9O3w-ihc&gl=US

• jQuery

  • This is a Sublime Text bundle to help with jQuery functions. It has syntax highlighting and almost all of the jquery methods as snippets.
  • https://github.com/SublimeText/jQuery

• Alignment    用于等号和一些符号的自动对齐。参考

• ConvertToUTF8

  • https://github.com/seanliang/ConvertToUTF8/blob/master/README.zh_CN.md
  • 通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP 等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

• Bracket Highlighter #自动匹配括号

• sublimeLinter #语法检查工具

• markdown editing markdown 编辑器 syntax 略丑，暂时不安装了

• Monokai Extended 和 Markdown Extended 语法着色 配置生效，默认支持 .md。如果是.mdown后缀，需要收工配置一下扩展支持。如下： View -> Syntax -> Open all with current extension as... -> Markdown Extended

• MarkdownTOC 补充Markdown TOC的工具，使用 Menu->Tools 中调用，对应 UserSetting 如下：

{
  "default_autolink": true,
  "default_bracket": "round",
  "default_depth": 0
}

User Setting 覆盖 Default Setting，修改 User Setting 而非 Default Setting 是为了将来插件升级用户配置不被覆盖。配置文件都是 json 格式，上面的三个配置作用分别是：

• 目录以链接形式呈现；
• 链接以圆括号包裹；
• 无限目录深度。 将光标置于文档首部，点击 Tools -> MarkdownTOC -> Insert TOC，会自动在文首生成目录，效果如下图。这个目录会随文档内容改变自动更新（可能需要保存来触发）

save the user setting below:



{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"color_scheme": "Packages/User/SublimeLinter/Monokai Extended Bright (SL).tmTheme",
	"font_options":
	[
		"gray_antialias"
	],
	"font_size": 12,
	"ignored_packages":
	[
		"Vintage"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"overlay_scroll_bars": "enabled",
	"rulers":
	[
		80,
		100,
		120
	],
	"theme": "Material-Theme-Darker.sublime-theme",
	"word_wrap": true,
	"wrap_width": 80
}

Tips：

• Cmd+Shift+T可以打开之前关闭的tab页，这点同chrome是一样的

将 sublime 设置为支持命令行启动。参考：https://www.sublimetext.com/docs/3/osx_command_line.html

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl

但是，官方没有考虑 macOS 下面当前用户没有 bin 目录。 search 到一个更直接的方法。

vi ~/.zshrc
alias subl='open -a "Sublime Text"'
source ~/.zshrc

将 sublime 设置为EDITOR

export EDITOR='subl -w'