当前位置：君是淡定宝-记录博客 > 技术收集 > Sublime常用插件安装、配置和使用方法
windy 技术收集

Sublime常用插件安装、配置和使用方法

一、安装 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. Doc​Blockr
主要功能：生成优美注释（可自行设置），包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦。
配置方法：下载安装好后，点击『preferences – Package settings – Doc​Blockr – 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』，加入以下代码；

{
	"keys": ["f1"],
	"command": "markdown_preview",
	"args": {
		"target": "browser",
		"parser": "markdown"
	}
}

然后打开『Preferences – Package Settings – Markdown Preview – Settings』，加入以下代码：

{
	"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'
	}
);

 

布衣暖，菜根香，读书滋味长！
君是淡定宝-记录博客 » Sublime常用插件安装、配置和使用方法

相关推荐