目录
一、安装 Package Control 组件
Package Control 是 Sublime Text 插件包管理器。sublime Text 只有安装了 Package control 组件，后期才能安装各种不同的插件。
Package Control 安装方法：按『Ctrl+Shift+P』组合键，调出如下界面，搜索『install package control』点击安装。
后续插件安装方法：按下『Ctrl+Shift+P』，输入『install』，选择『Package Control: Install Package』，在输入想要安装的插件名进行搜索即可。下文就不赘述了。
二、通用的插件
1. AutoFileName
- 主要功能：在代码中快速录入文件路径，当要输入文件路径时，会进行提示。
- 无需配置，下载安装好即可。
2. Bracket Highlighter
- 主要功能：代码匹配，可匹配 []、()、{}、“”、”、<tag></tag> 等等，并高亮标记，便于查看起始和结束标记。
- 配置方法：下载安装好后，点击『preferences - Package settings - BracketHighlighter - Bracket setting』，在右边输入如下代码：
{
// 这个是在成对的括号左侧显示一条竖线，表明开闭括号的范围与位置，如果不需要把true改为false
"content_highlight_bar": false,
// 下面不同括号的显示方式，默认是下划线，这里改成了高亮
"bracket_styles": {
"default": {
"icon": "dot",
"color": "region.yellowish brackethighlighter.default",
"style": "highlight"
},
"unmatched": {
"icon": "question",
"color": "region.redish",
"style": "outline"
},
"curly": {
"icon": "curly_bracket",
"color": "region.purplish"
// "style": "underline"
},
"round": {
"icon": "round_bracket",
"color": "region.yellowish"
// "style": "underline"
},
"square": {
"icon": "square_bracket",
"color": "region.bluish"
// "style": "underline"
},
"angle": {
"icon": "angle_bracket",
"color": "region.orangish"
// "style": "underline"
},
"tag": {
"icon": "tag",
"color": "region.orangish"
// "style": "underline"
},
"c_define": {
"icon": "hash",
"color": "region.yellowish"
// "style": "underline"
},
"single_quote": {
"icon": "single_quote",
"color": "region.greenish"
// "style": "underline"
},
"double_quote": {
"icon": "double_quote",
"color": "region.greenish"
// "style": "underline"
},
"regex": {
"icon": "star",
"color": "region.greenish"
// "style": "underline"
}
},
// 忽视限制因素，但是当代码较多的时候可能会影响性能
"ignore_threshold": true,
}
3. DocBlockr
- 主要功能：生成优美注释（可自行设置），包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦。
- 配置方法：下载安装好后，点击『preferences - Package settings - DocBlockr - setting - user』，输入一下内容：（这里按需求可以自行设置）
{
"jsdocs_extra_tags":
[
"@fuction ${1:[description]}",
"@Author PanyCG",
"@DateTime {{datetime}}",
],
"jsdocs_function_description": false
}
三、Web 前端开发的插件
1. Emmet
- 主要功能：Web 前端开发的神器。它利用了类 CSS 代码的编写方式能够快速地生成对应的 HTML 代码，进一步提升编写 HTML 的效率。
- 无需配置，安装好直接使用。
- 几种基本的使用技巧：
! + Tab，可快速生成 HTML 文档常用结构代码（默认），当然也可以修改这个模板。
<!--! + Tab--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>标签名 + Tab，自动补全标签，包括尖括号与结尾的结束标签。
<!--p + Tab--> <p></p>> + Tab，表示输入为标签子代。
<!--div>p>span--> <div> <p><span></span></p> </div>+号 + Tab，表示输入为标签同级。
<!--多个dom元素之间用 + 号连接即可--> <!--div+p+span--> <div></div> <p></p> <span></span>^号 + Tab，表示输入到标签上级。
<!--div>p^span--> <div><p></p></div> <span></span>*number + Tab，表示输入多个标签。
<!--div>ul>li*3--> <div> <ul> <li></li> <li></li> <li></li> </ul> </div>- 添加标签属性
.类名 + Tab#id名 + Tab[普通属性] + Tab{元素内容} + tab
<!--.nav--> <div class="nav"></div> <!--#id--> <div id="itme"></div> <!--一次添加多个属性 div#header.container[title="我是一个容器"]--> <div id="header" class="container" title="我是一个容器"></div> <!--div{我是文字内容}--> <div>我是文字内容</div>占位符$ + Tab，$的数量代表序列号的位数
<!--div.container#header>p{$$排序}*3--> <div class="container" id="header"> <p>01排序</p> <p>02排序</p> <p>03排序</p> </div>
2. View in Browser
- 主要功能：可以直接在浏览器上运行 HTML 文件。
- 配置方法：『preferences - Key Bindings』
- 修改快捷键为『F3』
- 修改默认浏览器为『Google 浏览器』
[
// F3 - open_in_browser
{
"keys": ["f3"],
"command": "open_in_browser"
},
// 设置默认浏览器为 Google
{
"keys": ["f2"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"extensions": ".*"
}
}
]
四、Markdown 插件
1. MarkdownEditing
- 主要功能：Markdown 写作者必备的插件，不仅可以高亮显示 Markdown 语法还支持很多编程语言的语法高亮显示。
- 颜色方案仿 Byword 及 iA writer
- 自动匹配星号（*）、下划线（_）及反引号（`）
- 选中文本按下以上符号能自动在所选文本前后添加配对的符号
- 方便粗体、斜体和代码框的输入
- 安装好即可以使用。
2. MarkdownPreview + LiveReload （浏览器实时预览）
- 主要功能：支持在浏览器中预览 markdown 文件，同时可以将 md 文件导出为 html 代码。
- 配置方法：
- 配置『MarkdownPreview』：使用 『F1』快捷键打开浏览器预览。点击『preferences - Key Bindings』，加入以下代码；
然后打开『Preferences - Package Settings - Markdown Preview - Settings』，加入以下代码：{ "keys": ["f1"], "command": "markdown_preview", "args": { "target": "browser", "parser": "markdown" } }{ "enable_autoreload": true }- 配置『LiveReload』：使得不用重开浏览器，保存文件后，浏览器自动刷新。点击『Ctrl + Shift + P』，输入『LiveReload: Enable/disable plug-ins』，选择 『Simple Reload with delay (400ms)』或者『Simple Reload』，两者的区别仅仅在于后者没有延迟。然后，为了使配置永久生效，点击『Preferences - Package Settings - LiveReload - Settings User』，在配置文件中加入如下设置：
{ "enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"] } - 解决公式渲染的问题
- 参考 如何在markdown中完美插入数学公式 ，借助『MathJax引擎』来实现。但是每次都需要在 markdown 文件首部添加一行代码，太麻烦了，且存在一定的问题。
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>- 解决方法：先配置『Markdown Preview - Settings』，内容如下：
{ "enable_autoreload": true, "js": [ "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js", "res://MarkdownPreview/js/math_config.js" ], /* Markdown extension configuration. To specify a function in this JSON configuration, create an object with the key "!!python/name" and set it to the import path to the function "module.submodule.etc.function". */ "markdown_extensions": [ // Python Markdown Extra with SuperFences. // You can't include "extra" and "superfences" // as "fenced_code" can not be included with "superfences", // so we include the pieces separately. "markdown.extensions.smart_strong", "markdown.extensions.footnotes", "markdown.extensions.attr_list", "markdown.extensions.def_list", "markdown.extensions.tables", "markdown.extensions.abbr", { "markdown.extensions.codehilite": { "guess_lang": false } }, // Extra's Markdown parsing in raw HTML cannot be // included by itself, but "pymdownx" exposes it so we can. "pymdownx.extrarawhtml", // More default Python Markdown extensions { "markdown.extensions.toc": { "permalink": "\ue157" } }, "markdown.extensions.meta", "markdown.extensions.sane_lists", "markdown.extensions.smarty", "markdown.extensions.wikilinks", "markdown.extensions.admonition", // PyMdown extensions that help give a GitHub-ish feel "pymdownx.superfences", // Nested fences and UML support { "pymdownx.magiclink": { // Auto linkify URLs and email addresses "repo_url_shortener": true, "repo_url_shorthand": true } }, "pymdownx.tasklist", // Task lists { "pymdownx.tilde": { // Provide ~~delete~~ "subscript": false } }, { "pymdownx.emoji": { // Provide GitHub's emojis "emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"}, "emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"}, "alt": "short", "options": { "attributes": { "align": "absmiddle", "height": "20px", "width": "20px" }, "image_path": "https://assets-cdn.github.com/images/icons/emoji/unicode/", "non_standard_image_path": "https://assets-cdn.github.com/images/icons/emoji/" } } }, { "pymdownx.arithmatex": { "generic": true, "smart_dollar": false } } ], }- 由于上面配置文件中设置的 js 路径是『res://MarkdownPreview/js/math_config.js』，该路径是相对于 sublime 包的保存路径而言的，因此我们需要在该目录下新建文件『math_config.js』，内容如下：
MathJax.Hub.Config( { config: ["MMLorHTML.js"], extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, TeX: { extensions: ["AMSmath.js", "AMSsymbols.js"], TagSide: "right", TagIndent: ".8em", MultLineWidth: "85%", equationNumbers: { autoNumber: "AMS", }, unicode: { fonts: "STIXGeneral,'Arial Unicode MS'" } }, displayAlign: "center", showProcessingMessages: false, messageStyle: 'none' } );
1701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
