【后续还会补充】Sublime Text 4 常用插件安装及配置方法

目录

一、安装 Package Control 组件二、通用的插件1. AutoFileName2. Bracket Highlighter3. Doc​Blockr

三、Web 前端开发的插件1. Emmet2. View in Browser

四、Markdown 插件1. MarkdownEditing2. MarkdownPreview + LiveReload （浏览器实时预览）

一、安装 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

主要功能：代码匹配，可匹配 []、()、{}、“”、”、 等等，并高亮标记，便于查看起始和结束标记。配置方法：下载安装好后，点击『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 ，自动补全标签，包括尖括号与结尾的结束标签。

> + Tab，表示输入为标签子代。

+号 + Tab ，表示输入为标签同级。

^号 + Tab ，表示输入到标签上级。

*number + Tab ，表示输入多个标签。

添加标签属性

.类名 + Tab #id名 + Tab[普通属性] + Tab {元素内容} + tab

[an error occurred while processing the directive]

占位符$ + Tab，$ 的数量代表序列号的位数

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 文件首部添加一行代码，太麻烦了，且存在一定的问题。

解决方法：先配置『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'

}

);